How can I help you?
React Grid - Jest Unit Testing
17 Feb 202624 minutes to read
Jest is a widely used testing framework for React applications, enabling the creation and execution of unit tests for components, functions, and methods. Unit testing helps validate individual parts of a React application, detect issues early, and maintain overall reliability. The following steps explain how to create Jest test cases for the Syncfusion® React Grid.
Step 1: Set up the Jest testing environment
- Check and install the node version:
Ensure that node version 14 or higher is installed. If not, install a supported version from the official Node.js website.
- Create a React application and install the Grid package:
Follow the Syncfusion® React Grid Getting Started guide to create a React app and install the required Syncfusion® React Grid package.
- Install Jest:
Jest is typically included by default in React apps created with Create React App. If not present in package.json, install it using npm:
npm install --save-dev jest
- Install the testing library package:
Run the following command to install the DOM testing utilities provided by testing library:
npm install --save-dev @testing-library/jest-dom
Step 2: Adding a Grid component
Refer to the documentation to include necessary styles. Below is a sample implementation of the Grid component:
App.tsx:
import * as React from 'react';
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
// Import 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='Customer Name' 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: Jest test case implementation
Create a test file with a .test.tsx extension (e.g., App.test.tsx). Import the necessary modules:
import { render } from '@testing-library/react';
import App from './App';- Define test suite:
The describe block groups related test cases. If a component relies on browser APIs like window.crypto or window.crypto.getRandomValues, mock them in a beforeEach block:
window.crypto = jest.fn() as any;
window.crypto.getRandomValues = jest.fn();- Types of testing:
Test case types are added in an it block.
a. Snapshot testing:
Snapshot testing captures the rendered output of a component and compares it to a saved version to detect unexpected changes. 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();
});
b. DOM testing:
The DOM testing involves testing the behavior and interactions of React components. The goal is to ensure that components function correctly and produce the expected output when interacting with the DOM. Libraries such as react-testing-library, Enzyme, or React’s TestUtils manipulate the rendered component in DOM testing.
DOM testing verifies the rendered structure and behavior of the component.
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, the <App/> component is rendered in the container object. After creating a Grid component instance, the appropriate number of data records in the e-grid CSS class is verified. The dataSource property is employed to retrieve the record of the data. Using this property, the accurate population of data length in the grid component is verified.
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'
}
];Step 4: Run the Jest test case:
The Jest test case is executed using the following command:
npm test
- This is only for local data. Use the currentViewData property when rendering remote data.
- Find the sample of the Unit Jest testing in DataGrid here