Testing the React application using Jest
14 Jul 202324 minutes to read
React Jest testing is a popular approach to test React applications using the Jest testing framework. This approach involves the creation and execution of unit tests specifically designed for React components. By conducting unit testing, which focuses on testing isolated units of code like functions, methods, and components to ensure that they behave as expected. This approach validates the individual units of your React components, catch potential bugs early in the development process, and maintains the reliability and stability of your React application. To create a Jest test case for the Grid component, follow the below steps:
Step 1: Set up the Jest testing environment
I. Check and install the node version:
You need to verify if the installed version of Node is 14 or higher. If it is below version 14, you must install a version of Node above 14. You can refer the following link to install the node version. You can select the any node version is 14 or above and installed.
II. Create an React application and install the Syncfusion Grid package:
To create an React application and install the Syncfusion Grid package, you can refer to the Getting started documentation.
III. Install the Jest:
When react application is installed, the dependency for Jest should be automatically installed. To verify if the Jest dependency is installed, you can check the package.json file. If the Jest dependency is not installed, you can run the following command to install the Jest dependency using npm.
npm install --save-dev jest
IV. Install the testing library package:
Run the following command to install the testing library package using npm.
npm install --save-dev @testing-library/jest-dom
Step 2: Adding a Grid component
Refer to the documentation to add the styling for the Grid component. The following code is used in this demonstration to create a Grid component. For further information on creating the Grid component, refer to the detailed documentation.
App.tsx:
import * as React from 'react';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
// import the your datasource instead of this
import { customerData} from './dataSource';
import './App.css';
function App() {
return (<div>
<GridComponent dataSource={customerData.slice(0,5)} height={315}>
<ColumnsDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100'/>
<ColumnDirective field='ContactName' headerText='CustomerName' width='100' textAlign="Right"/>
<ColumnDirective field='Address' headerText='Address' width='80' textAlign="Right"/>
<ColumnDirective field='Country' headerText='Country' width='100'/>
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;Step 3: To implement the Jest test case.
You can write the Jest test case in the test.tsx extension file. You need to import the below required files in your component. You need to import the render function from the @testing-library/react package. This function is used to render the component for react testing. To test a specific component, you need to import it into your testing environment. In this demo, we have written the grid component in the App file. So, you need to import the App file in the Jest test case.
import { render } from '@testing-library/react';
import App from './App';I. Define test suite:
The describe function is utilized to define the test suite. Within the describe function, you can use the beforeEach function. This function to execute the before each test case. Inside the beforeEach function, The Jest mock function is assign to the windows.crypto. By using jest.fn, we are creating a mock implementation for the crypto object. The another Jest mock function is assign to the window.crypto.getRandomValues. This is done to replace the original implementation of the getRandomValues method with a mock implementation for testing.
window.crypto = jest.fn() as any;
window.crypto.getRandomValues = jest.fn();II. Types of testing:
You need to add the different types of test cases in a it block.
1. Snapshot Testing:
The Snapshot testing involves capturing a snapshot of the rendered output of a component and comparing it against a previously stored snapshot. If the current output matches the stored snapshot, the test case will be passed successfully.
Example:
In the below example, the it block is utilized to define a test case for Snapshot testing. Within the test case, the <App/> component is rendered within the container object. After, the expect statement verifies that the container matches the stored snapshot, utilizing the toMatchSnapshot matcher provided by Jest.
it('Snapshot testing', () => {
const { container } = render(<App />);
expect(container).toMatchSnapshot();
});
2. DOM testing:
The DOM testing involves testing the behavior and interact of React component. This goal is to ensure that the component function correctly and produce the expected output when interacting with the DOM. You can utilize libraries like react-testing-library, Enzyme, or React’s TestUtils to manipulate the rendered component in the DOM testing.
Example:
In the below example, the it block is used to define a test case for the “Length of the record”. Within the test case, render the <App/> component in the container object. After, you need to create the instance of grid component. We check that the data grid in the data source has the appropriate number of data records. The dataSource property is employed to retrieve the record of the data. By utilizing this property, we can verify the accurate population of data length in the grid component.
it('Length of the record', () => {
const { container } = render(<App />);
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const gridElement = container.getElementsByClassName('e-grid');
const gridInstance = (gridElement as any)[0].ej2_instances[0];
expect(gridInstance.dataSource).toHaveLength(5);
});The following example illustrates how to create the grid sample and how to write the Jest test case.
import * as React from 'react';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { customerData} from './dataSource';
function App() {
return (<div>
<GridComponent dataSource={customerData.slice(0,5)} height={315}>
<ColumnsDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='ContactName' headerText='ContactName' width='100' textAlign="Right" />
<ColumnDirective field='Address' headerText='Address' width='80' textAlign="Right"/>
<ColumnDirective field='Country' headerText='Country' width='100'/>
</ColumnsDirective>
</GridComponent>
</div>)
};
export default App;import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
const { getComputedStyle } = global.window;
describe('Jest test case', () =>{
beforeEach(() =>{
window.crypto = jest.fn() as any;
window.crypto.getRandomValues = jest.fn();
window.getComputedStyle = (eletm, select) => getComputedStyle(eletm, select);
});
it('Length of the record', () => {
const { container } = render(<App />);
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const gridElement = container.getElementsByClassName('e-grid');
const gridInstance = (gridElement as any)[0].ej2_instances[0];
expect(gridInstance.dataSource).toHaveLength(5);
});
});import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
const { getComputedStyle } = global.window;
describe('Jest test case', () =>{
beforeEach(() =>{
window.crypto = jest.fn() as any;
window.crypto.getRandomValues = jest.fn();
window.getComputedStyle = (eletm, select) => getComputedStyle(eletm, select);
});
it('Snapshot testing', () => {
const { container } = render(<App />);
expect(container).toMatchSnapshot();
});
});import React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { customerData } from './datasource';
function App() {
return (<div>
<GridComponent dataSource={customerData.slice(0,5)} height={315}>
<ColumnsDirective>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100' />
<ColumnDirective field='ContactName' headerText='ContactName' width='100' textAlign="Right" />
<ColumnDirective field='Address' headerText='Address' width='80' textAlign="Right"/>
<ColumnDirective field='Country' headerText='Country' width='100'/>
</ColumnsDirective>
</GridComponent>
</div>);
};
export default App;import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
const { getComputedStyle } = global.window;
describe('Jest test case', () =>{
beforeEach(() =>{
window.crypto = jest.fn();
window.crypto.getRandomValues = jest.fn();
window.getComputedStyle = (eletm, select) => getComputedStyle(eletm, select);
});
it('Length of the record', () => {
var { container } = render(<App />);
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
var gridElement = container.getElementsByClassName('e-grid');
var gridInstance = (gridElement)[0].ej2_instances[0];
expect(gridInstance.dataSource).toHaveLength(5);
});
});import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
const { getComputedStyle } = global.window;
describe('Jest test case', () =>{
beforeEach(() =>{
window.crypto = jest.fn();
window.crypto.getRandomValues = jest.fn();
window.getComputedStyle = (eletm, select) => getComputedStyle(eletm, select);
});
it('Snapshot testing', () => {
var { container } = render(<App />);
expect(container).toMatchSnapshot();
});
});export let customerData = [
{
'CustomerID': 'ALFKI',
'ContactName': 'Maria ',
'CompanyName': 'Alfreds Futterkiste',
'Address': 'Obere Str. 57',
'Country': 'Germany'
},
{
'CustomerID': 'ANATR',
'ContactName': 'Ana Trujillo',
'CompanyName': 'Ana Trujillo Emparedados y helados',
'Address': 'Avda. de la Constitución 2222',
'Country': 'Mexico'
},
{
'CustomerID': 'ANTON',
'ContactName': 'Antonio Moreno',
'CompanyName': 'Antonio Moreno Taquería',
'Address': 'Mataderos 2312',
'Country': 'Mexico'
},
{
'CustomerID': 'AROUT',
'ContactName': 'Thomas Hardy',
'CompanyName': 'Around the Horn',
'Address': '120 Hanover Sq.',
'Country': 'UK'
},
{
'CustomerID': 'BERGS',
'ContactName': 'Christina Berglund',
'CompanyName': 'Berglunds snabbköp',
'Address': 'Berguvsvägen 8',
'Country': 'Sweden'
},
{
'CustomerID': 'BLAUS',
'ContactName': 'Hanna Moos',
'CompanyName': 'Blauer See Delikatessen',
'Address': 'Forsterstr. 57',
'Country': 'Germany'
},
{
'CustomerID': 'BLONP',
'ContactName': 'Frédérique Citeaux',
'CompanyName': 'Blondesddsl père et fils',
'Address': '24, place Kléber',
'Country': 'France'
},
{
'CustomerID': 'BOLID',
'ContactName': 'Martín Sommer',
'CompanyName': 'Bólido Comidas preparadas',
'Address': 'C/ Araquil, 67',
'Country': 'Spain'
},
{
'CustomerID': 'BONAP',
'ContactName': 'Laurence Lebihan',
'CompanyName': 'Bon app',
'Address': '12, rue des Bouchers',
'Country': 'France'
},
{
'CustomerID': 'BOTTM',
'ContactName': 'Elizabeth Lincoln',
'CompanyName': 'Bottom-Dollar Markets',
'Address': '23 Tsawassen Blvd.',
'Country': 'Canada'
},
{
'CustomerID': 'BSBEV',
'ContactName': 'Victoria Ashworth',
'CompanyName': 'B\'s Beverages',
'Address': 'Fauntleroy Circus',
'Country': 'UK'
},
{
'CustomerID': 'CACTU',
'ContactName': 'Patricio Simpson',
'CompanyName': 'Cactus Comidas para llevar',
'Address': 'Cerrito 333',
'Country': 'Argentina'
},
{
'CustomerID': 'CENTC',
'ContactName': 'Francisco Chang',
'CompanyName': 'Centro comercial Moctezuma',
'Address': 'Sierras de Granada 9993',
'Country': 'Mexico'
},
{
'CustomerID': 'CHOPS',
'ContactName': 'Yang Wang',
'CompanyName': 'Chop-suey Chinese',
'Address': 'Hauptstr. 29',
'Country': 'Switzerland'
},
{
'CustomerID': 'COMMI',
'ContactName': 'Pedro Afonso',
'CompanyName': 'Comércio Mineiro',
'Address': 'Av. dos Lusíadas, 23',
'Country': 'Brazil'
},
{
'CustomerID': 'CONSH',
'ContactName': 'Elizabeth Brown',
'CompanyName': 'Consolidated Holdings',
'Address': 'Berkeley Gardens 12 Brewery',
'Country': 'UK'
},
{
'CustomerID': 'DRACD',
'ContactName': 'Sven Ottlieb',
'CompanyName': 'Drachenblut Delikatessen',
'Address': 'Walserweg 21',
'Country': 'Germany'
},
{
'CustomerID': 'DUMON',
'ContactName': 'Janine Labrune',
'CompanyName': 'Du monde entier',
'Address': '67, rue des Cinquante Otages',
'Country': 'France'
},
{
'CustomerID': 'EASTC',
'ContactName': 'Ann Devon',
'CompanyName': 'Eastern Connection',
'Address': '35 King George',
'Country': 'UK'
},
{
'CustomerID': 'ERNSH',
'ContactName': 'Roland Mendel',
'CompanyName': 'Ernst Handel',
'Address': 'Kirchgasse 6',
'Country': 'Austria'
},
{
'CustomerID': 'FAMIA',
'ContactName': 'Aria Cruz',
'CompanyName': 'Familia Arquibaldo',
'Address': 'Rua Orós, 92',
'Country': 'Brazil'
},
{
'CustomerID': 'FISSA',
'ContactName': 'Diego Roel',
'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.',
'Address': 'C/ Moralzarzal, 86',
'Country': 'Spain'
},
{
'CustomerID': 'FOLIG',
'ContactName': 'Martine Rancé',
'CompanyName': 'Folies gourmandes',
'Address': '184, chaussée de Tournai',
'Country': 'France'
},
{
'CustomerID': 'FOLKO',
'ContactName': 'Maria Larsson',
'CompanyName': 'Folk och fä HB',
'Address': 'Åkergatan 24',
'Country': 'Sweden'
},
{
'CustomerID': 'FRANK',
'ContactName': 'Peter Franken',
'CompanyName': 'Frankenversand',
'Address': 'Berliner Platz 43',
'Country': 'Germany'
},
{
'CustomerID': 'FRANR',
'ContactName': 'Carine Schmitt',
'CompanyName': 'France restauration',
'Address': '54, rue Royale',
'Country': 'France'
},
{
'CustomerID': 'FRANS',
'ContactName': 'Paolo Accorti',
'CompanyName': 'Franchi S.p.A.',
'Address': 'Via Monte Bianco 34',
'Country': 'Italy'
},
{
'CustomerID': 'FURIB',
'ContactName': 'Lino Rodriguez',
'CompanyName': 'Furia Bacalhau e Frutos do Mar',
'Address': 'Jardim das rosas n. 32',
'Country': 'Portugal'
},
{
'CustomerID': 'GALED',
'ContactName': 'Eduardo Saavedra',
'CompanyName': 'Galería del gastrónomo',
'Address': 'Rambla de Cataluña, 23',
'Country': 'Spain'
},
{
'CustomerID': 'GODOS',
'ContactName': 'José Pedro Freyre',
'CompanyName': 'Godos Cocina Típica',
'Address': 'C/ Romero, 33',
'Country': 'Spain'
},
{
'CustomerID': 'GOURL',
'ContactName': 'André Fonseca',
'CompanyName': 'Gourmet Lanchonetes',
'Address': 'Av. Brasil, 442',
'Country': 'Brazil'
},
{
'CustomerID': 'GREAL',
'ContactName': 'Howard Snyder',
'CompanyName': 'Great Lakes Food Market',
'Address': '2732 Baker Blvd.',
'Country': 'USA'
},
{
'CustomerID': 'GROSR',
'ContactName': 'Manuel Pereira',
'CompanyName': 'GROSELLA-Restaurante',
'Address': '5ª Ave. Los Palos Grandes',
'Country': 'Venezuela'
},
{
'CustomerID': 'HANAR',
'ContactName': 'Mario Pontes',
'CompanyName': 'Hanari Carnes',
'Address': 'Rua do Paço, 67',
'Country': 'Brazil'
},
{
'CustomerID': 'HILAA',
'ContactName': 'Carlos Hernández',
'CompanyName': 'HILARION-Abastos',
'Address': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'Country': 'Venezuela'
},
{
'CustomerID': 'HUNGC',
'ContactName': 'Yoshi Latimer',
'CompanyName': 'Hungry Coyote Import Store',
'Address': 'City Center Plaza 516 Main St.',
'Country': 'USA'
},
{
'CustomerID': 'HUNGO',
'ContactName': 'Patricia McKenna',
'CompanyName': 'Hungry Owl All-Night Grocers',
'Address': '8 Johnstown Road',
'Country': 'Ireland'
},
{
'CustomerID': 'ISLAT',
'ContactName': 'Helen Bennett',
'CompanyName': 'Island Trading',
'Address': 'Garden House Crowther Way',
'Country': 'UK'
},
{
'CustomerID': 'KOENE',
'ContactName': 'Philip Cramer',
'CompanyName': 'Königlich Essen',
'Address': 'Maubelstr. 90',
'Country': 'Germany'
},
{
'CustomerID': 'LACOR',
'ContactName': 'Daniel Tonini',
'CompanyName': 'La corne d\'abondance',
'Address': '67, avenue de l\'Europe',
'Country': 'France'
},
{
'CustomerID': 'LAMAI',
'ContactName': 'Annette Roulet',
'CompanyName': 'La maison d\'Asie',
'Address': '1 rue Alsace-Lorraine',
'Country': 'France'
},
{
'CustomerID': 'LAUGB',
'ContactName': 'Yoshi Tannamuri',
'CompanyName': 'Laughing Bacchus Wine Cellars',
'Address': '1900 Oak St.',
'Country': 'Canada'
},
{
'CustomerID': 'LAZYK',
'ContactName': 'John Steel',
'CompanyName': 'Lazy K Kountry Store',
'Address': '12 Orchestra Terrace',
'Country': 'USA'
},
{
'CustomerID': 'LEHMS',
'ContactName': 'Renate Messner',
'CompanyName': 'Lehmanns Marktstand',
'Address': 'Magazinweg 7',
'Country': 'Germany'
},
{
'CustomerID': 'LETSS',
'ContactName': 'Jaime Yorres',
'CompanyName': 'Let\'s Stop N Shop',
'Address': '87 Polk St. Suite 5',
'Country': 'USA'
},
{
'CustomerID': 'LILAS',
'ContactName': 'Carlos González',
'CompanyName': 'LILA-Supermercado',
'Address': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'Country': 'Venezuela'
},
{
'CustomerID': 'LINOD',
'ContactName': 'Felipe Izquierdo',
'CompanyName': 'LINO-Delicateses',
'Address': 'Ave. 5 de Mayo Porlamar',
'Country': 'Venezuela'
},
{
'CustomerID': 'LONEP',
'ContactName': 'Fran Wilson',
'CompanyName': 'Lonesome Pine Restaurant',
'Address': '89 Chiaroscuro Rd.',
'Country': 'USA'
},
{
'CustomerID': 'MAGAA',
'ContactName': 'Giovanni Rovelli',
'CompanyName': 'Magazzini Alimentari Riuniti',
'Address': 'Via Ludovico il Moro 22',
'Country': 'Italy'
},
{
'CustomerID': 'MAISD',
'ContactName': 'Catherine Dewey',
'CompanyName': 'Maison Dewey',
'Address': 'Rue Joseph-Bens 532',
'Country': 'Belgium'
},
{
'CustomerID': 'MEREP',
'ContactName': 'Jean Fresnière',
'CompanyName': 'Mère Paillarde',
'Address': '43 rue St. Laurent',
'Country': 'Canada'
},
{
'CustomerID': 'MORGK',
'ContactName': 'Alexander Feuer',
'CompanyName': 'Morgenstern Gesundkost',
'Address': 'Heerstr. 22',
'Country': 'Germany'
},
{
'CustomerID': 'NORTS',
'ContactName': 'Simon Crowther',
'CompanyName': 'North/South',
'Address': 'South House 300 Queensbridge',
'Country': 'UK'
},
{
'CustomerID': 'OCEAN',
'ContactName': 'Yvonne Moncada',
'CompanyName': 'Océano Atlántico Ltda.',
'Address': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'Country': 'Argentina'
},
{
'CustomerID': 'OLDWO',
'ContactName': 'Rene Phillips',
'CompanyName': 'Old World Delicatessen',
'Address': '2743 Bering St.',
'Country': 'USA'
},
{
'CustomerID': 'OTTIK',
'ContactName': 'Henriette Pfalzheim',
'CompanyName': 'Ottilies Käseladen',
'Address': 'Mehrheimerstr. 369',
'Country': 'Germany'
},
{
'CustomerID': 'PARIS',
'ContactName': 'Marie Bertrand',
'CompanyName': 'Paris spécialités',
'Address': '265, boulevard Charonne',
'Country': 'France'
},
{
'CustomerID': 'PERIC',
'ContactName': 'Guillermo Fernández',
'CompanyName': 'Pericles Comidas clásicas',
'Address': 'Calle Dr. Jorge Cash 321',
'Country': 'Mexico'
},
{
'CustomerID': 'PICCO',
'ContactName': 'Georg Pipps',
'CompanyName': 'Piccolo und mehr',
'Address': 'Geislweg 14',
'Country': 'Austria'
},
{
'CustomerID': 'PRINI',
'ContactName': 'Isabel de Castro',
'CompanyName': 'Princesa Isabel Vinhos',
'Address': 'Estrada da saúde n. 58',
'Country': 'Portugal'
},
{
'CustomerID': 'QUEDE',
'ContactName': 'Bernardo Batista',
'CompanyName': 'Que Delícia',
'Address': 'Rua da Panificadora, 12',
'Country': 'Brazil'
},
{
'CustomerID': 'QUEEN',
'ContactName': 'Lúcia Carvalho',
'CompanyName': 'Queen Cozinha',
'Address': 'Alameda dos Canàrios, 891',
'Country': 'Brazil'
},
{
'CustomerID': 'QUICK',
'ContactName': 'Horst Kloss',
'CompanyName': 'QUICK-Stop',
'Address': 'Taucherstraße 10',
'Country': 'Germany'
},
{
'CustomerID': 'RANCH',
'ContactName': 'Sergio Gutiérrez',
'CompanyName': 'Rancho grande',
'Address': 'Av. del Libertador 900',
'Country': 'Argentina'
},
{
'CustomerID': 'RATTC',
'ContactName': 'Paula Wilson',
'CompanyName': 'Rattlesnake Canyon Grocery',
'Address': '2817 Milton Dr.',
'Country': 'USA'
},
{
'CustomerID': 'REGGC',
'ContactName': 'Maurizio Moroni',
'CompanyName': 'Reggiani Caseifici',
'Address': 'Strada Provinciale 124',
'Country': 'Italy'
},
{
'CustomerID': 'RICAR',
'ContactName': 'Janete Limeira',
'CompanyName': 'Ricardo Adocicados',
'Address': 'Av. Copacabana, 267',
'Country': 'Brazil'
},
{
'CustomerID': 'RICSU',
'ContactName': 'Michael Holz',
'CompanyName': 'Richter Supermarkt',
'Address': 'Grenzacherweg 237',
'Country': 'Switzerland'
},
{
'CustomerID': 'ROMEY',
'ContactName': 'Alejandra Camino',
'CompanyName': 'Romero y tomillo',
'Address': 'Gran Vía, 1',
'Country': 'Spain'
},
{
'CustomerID': 'SANTG',
'ContactName': 'Jonas Bergulfsen',
'CompanyName': 'Santé Gourmet',
'Address': 'Erling Skakkes gate 78',
'Country': 'Norway'
},
{
'CustomerID': 'SAVEA',
'ContactName': 'Jose Pavarotti',
'CompanyName': 'Save-a-lot Markets',
'Address': '187 Suffolk Ln.',
'Country': 'USA'
},
{
'CustomerID': 'SEVES',
'ContactName': 'Hari Kumar',
'CompanyName': 'Seven Seas Imports',
'Address': '90 Wadhurst Rd.',
'Country': 'UK'
},
{
'CustomerID': 'SIMOB',
'ContactName': 'Jytte Petersen',
'CompanyName': 'Simons bistro',
'Address': 'Vinbæltet 34',
'Country': 'Denmark'
},
{
'CustomerID': 'SPECD',
'ContactName': 'Dominique Perrier',
'CompanyName': 'Spécialités du monde',
'Address': '25, rue Lauriston',
'Country': 'France'
},
{
'CustomerID': 'SPLIR',
'ContactName': 'Art Braunschweiger',
'CompanyName': 'Split Rail Beer & Ale',
'Address': 'P.O. Box 555',
'Country': 'USA'
},
{
'CustomerID': 'SUPRD',
'ContactName': 'Pascale Cartrain',
'CompanyName': 'Suprêmes délices',
'Address': 'Boulevard Tirou, 255',
'Country': 'Belgium'
},
{
'CustomerID': 'THEBI',
'ContactName': 'Liz Nixon',
'CompanyName': 'The Big Cheese',
'Address': '89 Jefferson Way Suite 2',
'Country': 'USA'
},
{
'CustomerID': 'THECR',
'ContactName': 'Liu Wong',
'CompanyName': 'The Cracker Box',
'Address': '55 Grizzly Peak Rd.',
'Country': 'USA'
},
{
'CustomerID': 'TOMSP',
'ContactName': 'Karin Josephs',
'CompanyName': 'Toms Spezialitäten',
'Address': 'Luisenstr. 48',
'Country': 'Germany'
},
{
'CustomerID': 'TORTU',
'ContactName': 'Miguel Angel Paolino',
'CompanyName': 'Tortuga Restaurante',
'Address': 'Avda. Azteca 123',
'Country': 'Mexico'
},
{
'CustomerID': 'TRADH',
'ContactName': 'Anabela Domingues',
'CompanyName': 'Tradição Hipermercados',
'Address': 'Av. Inês de Castro, 414',
'Country': 'Brazil'
},
{
'CustomerID': 'TRAIH',
'ContactName': 'Helvetius Nagy',
'CompanyName': 'Trail\'s Head Gourmet Provisioners',
'Address': '722 DaVinci Blvd.',
'Country': 'USA'
},
{
'CustomerID': 'VAFFE',
'ContactName': 'Palle Ibsen',
'CompanyName': 'Vaffeljernet',
'Address': 'Smagsloget 45',
'Country': 'Denmark'
},
{
'CustomerID': 'VICTE',
'ContactName': 'Mary Saveley',
'CompanyName': 'Victuailles en stock',
'Address': '2, rue du Commerce',
'Country': 'France'
},
{
'CustomerID': 'VINET',
'ContactName': 'Paul Henriot',
'CompanyName': 'Vins et alcools Chevalier',
'Address': '59 rue de l\'Abbaye',
'Country': 'France'
},
{
'CustomerID': 'WANDK',
'ContactName': 'Rita Müller',
'CompanyName': 'Die Wandernde Kuh',
'Address': 'Adenauerallee 900',
'Country': 'Germany'
},
{
'CustomerID': 'WARTH',
'ContactName': 'Pirkko Koskitalo',
'CompanyName': 'Wartian Herkku',
'Address': 'Torikatu 38',
'Country': 'Finland'
},
{
'CustomerID': 'WELLI',
'ContactName': 'Paula Parente',
'CompanyName': 'Wellington Importadora',
'Address': 'Rua do Mercado, 12',
'Country': 'Brazil'
},
{
'CustomerID': 'WHITC',
'ContactName': 'Karl Jablonski',
'CompanyName': 'White Clover Markets',
'Address': '305 - 14th Ave. S. Suite 3B',
'Country': 'USA'
},
{
'CustomerID': 'WILMK',
'ContactName': 'Matti Karttunen',
'CompanyName': 'Wilman Kala',
'Address': 'Keskuskatu 45',
'Country': 'Finland'
},
{
'CustomerID': 'WOLZA',
'ContactName': 'Zbyszek Piestrzeniewicz',
'CompanyName': 'Wolski Zajazd',
'Address': 'ul. Filtrowa 68',
'Country': 'Poland'
}
];"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.customerData = void 0;
exports.customerData = [
{
'CustomerID': 'ALFKI',
'ContactName': 'Maria ',
'CompanyName': 'Alfreds Futterkiste',
'Address': 'Obere Str. 57',
'Country': 'Germany'
},
{
'CustomerID': 'ANATR',
'ContactName': 'Ana Trujillo',
'CompanyName': 'Ana Trujillo Emparedados y helados',
'Address': 'Avda. de la Constitución 2222',
'Country': 'Mexico'
},
{
'CustomerID': 'ANTON',
'ContactName': 'Antonio Moreno',
'CompanyName': 'Antonio Moreno Taquería',
'Address': 'Mataderos 2312',
'Country': 'Mexico'
},
{
'CustomerID': 'AROUT',
'ContactName': 'Thomas Hardy',
'CompanyName': 'Around the Horn',
'Address': '120 Hanover Sq.',
'Country': 'UK'
},
{
'CustomerID': 'BERGS',
'ContactName': 'Christina Berglund',
'CompanyName': 'Berglunds snabbköp',
'Address': 'Berguvsvägen 8',
'Country': 'Sweden'
},
{
'CustomerID': 'BLAUS',
'ContactName': 'Hanna Moos',
'CompanyName': 'Blauer See Delikatessen',
'Address': 'Forsterstr. 57',
'Country': 'Germany'
},
{
'CustomerID': 'BLONP',
'ContactName': 'Frédérique Citeaux',
'CompanyName': 'Blondesddsl père et fils',
'Address': '24, place Kléber',
'Country': 'France'
},
{
'CustomerID': 'BOLID',
'ContactName': 'Martín Sommer',
'CompanyName': 'Bólido Comidas preparadas',
'Address': 'C/ Araquil, 67',
'Country': 'Spain'
},
{
'CustomerID': 'BONAP',
'ContactName': 'Laurence Lebihan',
'CompanyName': 'Bon app',
'Address': '12, rue des Bouchers',
'Country': 'France'
},
{
'CustomerID': 'BOTTM',
'ContactName': 'Elizabeth Lincoln',
'CompanyName': 'Bottom-Dollar Markets',
'Address': '23 Tsawassen Blvd.',
'Country': 'Canada'
},
{
'CustomerID': 'BSBEV',
'ContactName': 'Victoria Ashworth',
'CompanyName': 'B\'s Beverages',
'Address': 'Fauntleroy Circus',
'Country': 'UK'
},
{
'CustomerID': 'CACTU',
'ContactName': 'Patricio Simpson',
'CompanyName': 'Cactus Comidas para llevar',
'Address': 'Cerrito 333',
'Country': 'Argentina'
},
{
'CustomerID': 'CENTC',
'ContactName': 'Francisco Chang',
'CompanyName': 'Centro comercial Moctezuma',
'Address': 'Sierras de Granada 9993',
'Country': 'Mexico'
},
{
'CustomerID': 'CHOPS',
'ContactName': 'Yang Wang',
'CompanyName': 'Chop-suey Chinese',
'Address': 'Hauptstr. 29',
'Country': 'Switzerland'
},
{
'CustomerID': 'COMMI',
'ContactName': 'Pedro Afonso',
'CompanyName': 'Comércio Mineiro',
'Address': 'Av. dos Lusíadas, 23',
'Country': 'Brazil'
},
{
'CustomerID': 'CONSH',
'ContactName': 'Elizabeth Brown',
'CompanyName': 'Consolidated Holdings',
'Address': 'Berkeley Gardens 12 Brewery',
'Country': 'UK'
},
{
'CustomerID': 'DRACD',
'ContactName': 'Sven Ottlieb',
'CompanyName': 'Drachenblut Delikatessen',
'Address': 'Walserweg 21',
'Country': 'Germany'
},
{
'CustomerID': 'DUMON',
'ContactName': 'Janine Labrune',
'CompanyName': 'Du monde entier',
'Address': '67, rue des Cinquante Otages',
'Country': 'France'
},
{
'CustomerID': 'EASTC',
'ContactName': 'Ann Devon',
'CompanyName': 'Eastern Connection',
'Address': '35 King George',
'Country': 'UK'
},
{
'CustomerID': 'ERNSH',
'ContactName': 'Roland Mendel',
'CompanyName': 'Ernst Handel',
'Address': 'Kirchgasse 6',
'Country': 'Austria'
},
{
'CustomerID': 'FAMIA',
'ContactName': 'Aria Cruz',
'CompanyName': 'Familia Arquibaldo',
'Address': 'Rua Orós, 92',
'Country': 'Brazil'
},
{
'CustomerID': 'FISSA',
'ContactName': 'Diego Roel',
'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.',
'Address': 'C/ Moralzarzal, 86',
'Country': 'Spain'
},
{
'CustomerID': 'FOLIG',
'ContactName': 'Martine Rancé',
'CompanyName': 'Folies gourmandes',
'Address': '184, chaussée de Tournai',
'Country': 'France'
},
{
'CustomerID': 'FOLKO',
'ContactName': 'Maria Larsson',
'CompanyName': 'Folk och fä HB',
'Address': 'Åkergatan 24',
'Country': 'Sweden'
},
{
'CustomerID': 'FRANK',
'ContactName': 'Peter Franken',
'CompanyName': 'Frankenversand',
'Address': 'Berliner Platz 43',
'Country': 'Germany'
},
{
'CustomerID': 'FRANR',
'ContactName': 'Carine Schmitt',
'CompanyName': 'France restauration',
'Address': '54, rue Royale',
'Country': 'France'
},
{
'CustomerID': 'FRANS',
'ContactName': 'Paolo Accorti',
'CompanyName': 'Franchi S.p.A.',
'Address': 'Via Monte Bianco 34',
'Country': 'Italy'
},
{
'CustomerID': 'FURIB',
'ContactName': 'Lino Rodriguez',
'CompanyName': 'Furia Bacalhau e Frutos do Mar',
'Address': 'Jardim das rosas n. 32',
'Country': 'Portugal'
},
{
'CustomerID': 'GALED',
'ContactName': 'Eduardo Saavedra',
'CompanyName': 'Galería del gastrónomo',
'Address': 'Rambla de Cataluña, 23',
'Country': 'Spain'
},
{
'CustomerID': 'GODOS',
'ContactName': 'José Pedro Freyre',
'CompanyName': 'Godos Cocina Típica',
'Address': 'C/ Romero, 33',
'Country': 'Spain'
},
{
'CustomerID': 'GOURL',
'ContactName': 'André Fonseca',
'CompanyName': 'Gourmet Lanchonetes',
'Address': 'Av. Brasil, 442',
'Country': 'Brazil'
},
{
'CustomerID': 'GREAL',
'ContactName': 'Howard Snyder',
'CompanyName': 'Great Lakes Food Market',
'Address': '2732 Baker Blvd.',
'Country': 'USA'
},
{
'CustomerID': 'GROSR',
'ContactName': 'Manuel Pereira',
'CompanyName': 'GROSELLA-Restaurante',
'Address': '5ª Ave. Los Palos Grandes',
'Country': 'Venezuela'
},
{
'CustomerID': 'HANAR',
'ContactName': 'Mario Pontes',
'CompanyName': 'Hanari Carnes',
'Address': 'Rua do Paço, 67',
'Country': 'Brazil'
},
{
'CustomerID': 'HILAA',
'ContactName': 'Carlos Hernández',
'CompanyName': 'HILARION-Abastos',
'Address': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'Country': 'Venezuela'
},
{
'CustomerID': 'HUNGC',
'ContactName': 'Yoshi Latimer',
'CompanyName': 'Hungry Coyote Import Store',
'Address': 'City Center Plaza 516 Main St.',
'Country': 'USA'
},
{
'CustomerID': 'HUNGO',
'ContactName': 'Patricia McKenna',
'CompanyName': 'Hungry Owl All-Night Grocers',
'Address': '8 Johnstown Road',
'Country': 'Ireland'
},
{
'CustomerID': 'ISLAT',
'ContactName': 'Helen Bennett',
'CompanyName': 'Island Trading',
'Address': 'Garden House Crowther Way',
'Country': 'UK'
},
{
'CustomerID': 'KOENE',
'ContactName': 'Philip Cramer',
'CompanyName': 'Königlich Essen',
'Address': 'Maubelstr. 90',
'Country': 'Germany'
},
{
'CustomerID': 'LACOR',
'ContactName': 'Daniel Tonini',
'CompanyName': 'La corne d\'abondance',
'Address': '67, avenue de l\'Europe',
'Country': 'France'
},
{
'CustomerID': 'LAMAI',
'ContactName': 'Annette Roulet',
'CompanyName': 'La maison d\'Asie',
'Address': '1 rue Alsace-Lorraine',
'Country': 'France'
},
{
'CustomerID': 'LAUGB',
'ContactName': 'Yoshi Tannamuri',
'CompanyName': 'Laughing Bacchus Wine Cellars',
'Address': '1900 Oak St.',
'Country': 'Canada'
},
{
'CustomerID': 'LAZYK',
'ContactName': 'John Steel',
'CompanyName': 'Lazy K Kountry Store',
'Address': '12 Orchestra Terrace',
'Country': 'USA'
},
{
'CustomerID': 'LEHMS',
'ContactName': 'Renate Messner',
'CompanyName': 'Lehmanns Marktstand',
'Address': 'Magazinweg 7',
'Country': 'Germany'
},
{
'CustomerID': 'LETSS',
'ContactName': 'Jaime Yorres',
'CompanyName': 'Let\'s Stop N Shop',
'Address': '87 Polk St. Suite 5',
'Country': 'USA'
},
{
'CustomerID': 'LILAS',
'ContactName': 'Carlos González',
'CompanyName': 'LILA-Supermercado',
'Address': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'Country': 'Venezuela'
},
{
'CustomerID': 'LINOD',
'ContactName': 'Felipe Izquierdo',
'CompanyName': 'LINO-Delicateses',
'Address': 'Ave. 5 de Mayo Porlamar',
'Country': 'Venezuela'
},
{
'CustomerID': 'LONEP',
'ContactName': 'Fran Wilson',
'CompanyName': 'Lonesome Pine Restaurant',
'Address': '89 Chiaroscuro Rd.',
'Country': 'USA'
},
{
'CustomerID': 'MAGAA',
'ContactName': 'Giovanni Rovelli',
'CompanyName': 'Magazzini Alimentari Riuniti',
'Address': 'Via Ludovico il Moro 22',
'Country': 'Italy'
},
{
'CustomerID': 'MAISD',
'ContactName': 'Catherine Dewey',
'CompanyName': 'Maison Dewey',
'Address': 'Rue Joseph-Bens 532',
'Country': 'Belgium'
},
{
'CustomerID': 'MEREP',
'ContactName': 'Jean Fresnière',
'CompanyName': 'Mère Paillarde',
'Address': '43 rue St. Laurent',
'Country': 'Canada'
},
{
'CustomerID': 'MORGK',
'ContactName': 'Alexander Feuer',
'CompanyName': 'Morgenstern Gesundkost',
'Address': 'Heerstr. 22',
'Country': 'Germany'
},
{
'CustomerID': 'NORTS',
'ContactName': 'Simon Crowther',
'CompanyName': 'North/South',
'Address': 'South House 300 Queensbridge',
'Country': 'UK'
},
{
'CustomerID': 'OCEAN',
'ContactName': 'Yvonne Moncada',
'CompanyName': 'Océano Atlántico Ltda.',
'Address': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'Country': 'Argentina'
},
{
'CustomerID': 'OLDWO',
'ContactName': 'Rene Phillips',
'CompanyName': 'Old World Delicatessen',
'Address': '2743 Bering St.',
'Country': 'USA'
},
{
'CustomerID': 'OTTIK',
'ContactName': 'Henriette Pfalzheim',
'CompanyName': 'Ottilies Käseladen',
'Address': 'Mehrheimerstr. 369',
'Country': 'Germany'
},
{
'CustomerID': 'PARIS',
'ContactName': 'Marie Bertrand',
'CompanyName': 'Paris spécialités',
'Address': '265, boulevard Charonne',
'Country': 'France'
},
{
'CustomerID': 'PERIC',
'ContactName': 'Guillermo Fernández',
'CompanyName': 'Pericles Comidas clásicas',
'Address': 'Calle Dr. Jorge Cash 321',
'Country': 'Mexico'
},
{
'CustomerID': 'PICCO',
'ContactName': 'Georg Pipps',
'CompanyName': 'Piccolo und mehr',
'Address': 'Geislweg 14',
'Country': 'Austria'
},
{
'CustomerID': 'PRINI',
'ContactName': 'Isabel de Castro',
'CompanyName': 'Princesa Isabel Vinhos',
'Address': 'Estrada da saúde n. 58',
'Country': 'Portugal'
},
{
'CustomerID': 'QUEDE',
'ContactName': 'Bernardo Batista',
'CompanyName': 'Que Delícia',
'Address': 'Rua da Panificadora, 12',
'Country': 'Brazil'
},
{
'CustomerID': 'QUEEN',
'ContactName': 'Lúcia Carvalho',
'CompanyName': 'Queen Cozinha',
'Address': 'Alameda dos Canàrios, 891',
'Country': 'Brazil'
},
{
'CustomerID': 'QUICK',
'ContactName': 'Horst Kloss',
'CompanyName': 'QUICK-Stop',
'Address': 'Taucherstraße 10',
'Country': 'Germany'
},
{
'CustomerID': 'RANCH',
'ContactName': 'Sergio Gutiérrez',
'CompanyName': 'Rancho grande',
'Address': 'Av. del Libertador 900',
'Country': 'Argentina'
},
{
'CustomerID': 'RATTC',
'ContactName': 'Paula Wilson',
'CompanyName': 'Rattlesnake Canyon Grocery',
'Address': '2817 Milton Dr.',
'Country': 'USA'
},
{
'CustomerID': 'REGGC',
'ContactName': 'Maurizio Moroni',
'CompanyName': 'Reggiani Caseifici',
'Address': 'Strada Provinciale 124',
'Country': 'Italy'
},
{
'CustomerID': 'RICAR',
'ContactName': 'Janete Limeira',
'CompanyName': 'Ricardo Adocicados',
'Address': 'Av. Copacabana, 267',
'Country': 'Brazil'
},
{
'CustomerID': 'RICSU',
'ContactName': 'Michael Holz',
'CompanyName': 'Richter Supermarkt',
'Address': 'Grenzacherweg 237',
'Country': 'Switzerland'
},
{
'CustomerID': 'ROMEY',
'ContactName': 'Alejandra Camino',
'CompanyName': 'Romero y tomillo',
'Address': 'Gran Vía, 1',
'Country': 'Spain'
},
{
'CustomerID': 'SANTG',
'ContactName': 'Jonas Bergulfsen',
'CompanyName': 'Santé Gourmet',
'Address': 'Erling Skakkes gate 78',
'Country': 'Norway'
},
{
'CustomerID': 'SAVEA',
'ContactName': 'Jose Pavarotti',
'CompanyName': 'Save-a-lot Markets',
'Address': '187 Suffolk Ln.',
'Country': 'USA'
},
{
'CustomerID': 'SEVES',
'ContactName': 'Hari Kumar',
'CompanyName': 'Seven Seas Imports',
'Address': '90 Wadhurst Rd.',
'Country': 'UK'
},
{
'CustomerID': 'SIMOB',
'ContactName': 'Jytte Petersen',
'CompanyName': 'Simons bistro',
'Address': 'Vinbæltet 34',
'Country': 'Denmark'
},
{
'CustomerID': 'SPECD',
'ContactName': 'Dominique Perrier',
'CompanyName': 'Spécialités du monde',
'Address': '25, rue Lauriston',
'Country': 'France'
},
{
'CustomerID': 'SPLIR',
'ContactName': 'Art Braunschweiger',
'CompanyName': 'Split Rail Beer & Ale',
'Address': 'P.O. Box 555',
'Country': 'USA'
},
{
'CustomerID': 'SUPRD',
'ContactName': 'Pascale Cartrain',
'CompanyName': 'Suprêmes délices',
'Address': 'Boulevard Tirou, 255',
'Country': 'Belgium'
},
{
'CustomerID': 'THEBI',
'ContactName': 'Liz Nixon',
'CompanyName': 'The Big Cheese',
'Address': '89 Jefferson Way Suite 2',
'Country': 'USA'
},
{
'CustomerID': 'THECR',
'ContactName': 'Liu Wong',
'CompanyName': 'The Cracker Box',
'Address': '55 Grizzly Peak Rd.',
'Country': 'USA'
},
{
'CustomerID': 'TOMSP',
'ContactName': 'Karin Josephs',
'CompanyName': 'Toms Spezialitäten',
'Address': 'Luisenstr. 48',
'Country': 'Germany'
},
{
'CustomerID': 'TORTU',
'ContactName': 'Miguel Angel Paolino',
'CompanyName': 'Tortuga Restaurante',
'Address': 'Avda. Azteca 123',
'Country': 'Mexico'
},
{
'CustomerID': 'TRADH',
'ContactName': 'Anabela Domingues',
'CompanyName': 'Tradição Hipermercados',
'Address': 'Av. Inês de Castro, 414',
'Country': 'Brazil'
},
{
'CustomerID': 'TRAIH',
'ContactName': 'Helvetius Nagy',
'CompanyName': 'Trail\'s Head Gourmet Provisioners',
'Address': '722 DaVinci Blvd.',
'Country': 'USA'
},
{
'CustomerID': 'VAFFE',
'ContactName': 'Palle Ibsen',
'CompanyName': 'Vaffeljernet',
'Address': 'Smagsloget 45',
'Country': 'Denmark'
},
{
'CustomerID': 'VICTE',
'ContactName': 'Mary Saveley',
'CompanyName': 'Victuailles en stock',
'Address': '2, rue du Commerce',
'Country': 'France'
},
{
'CustomerID': 'VINET',
'ContactName': 'Paul Henriot',
'CompanyName': 'Vins et alcools Chevalier',
'Address': '59 rue de l\'Abbaye',
'Country': 'France'
},
{
'CustomerID': 'WANDK',
'ContactName': 'Rita Müller',
'CompanyName': 'Die Wandernde Kuh',
'Address': 'Adenauerallee 900',
'Country': 'Germany'
},
{
'CustomerID': 'WARTH',
'ContactName': 'Pirkko Koskitalo',
'CompanyName': 'Wartian Herkku',
'Address': 'Torikatu 38',
'Country': 'Finland'
},
{
'CustomerID': 'WELLI',
'ContactName': 'Paula Parente',
'CompanyName': 'Wellington Importadora',
'Address': 'Rua do Mercado, 12',
'Country': 'Brazil'
},
{
'CustomerID': 'WHITC',
'ContactName': 'Karl Jablonski',
'CompanyName': 'White Clover Markets',
'Address': '305 - 14th Ave. S. Suite 3B',
'Country': 'USA'
},
{
'CustomerID': 'WILMK',
'ContactName': 'Matti Karttunen',
'CompanyName': 'Wilman Kala',
'Address': 'Keskuskatu 45',
'Country': 'Finland'
},
{
'CustomerID': 'WOLZA',
'ContactName': 'Zbyszek Piestrzeniewicz',
'CompanyName': 'Wolski Zajazd',
'Address': 'ul. Filtrowa 68',
'Country': 'Poland'
}
];Run the Jest test case:
Run the following command to execute the Jest test case.
npm test
- This is only for local data. You can use the currentViewData property by rendering the remote data.
- You can find the sample of the Unit Jest testing in DataGrid here