Snapshot Testing With React JS And Jest Using TDD

As Developer, We are facing different types of bugs and errors, during development time. Some Bugs make developer life hell. So using testing framework or testing tool and TDD(Test Driven Development) are helpful for developer to create less and non critical bugs during developement.

There is Lot of Testing framework and tools for testing javascript or node js application. I am using Jest because, it is a native testing tool for React JS application.

Today I am discussing about snapshot testing technique. Snapshot tests is a very useful tool. By using this, you want to make sure your UI does not change unexpectedly.

A typical snapshot test case renders a UI component, create snapshot or copy of render component with testing data, then compares it to a reference testing copy. The test will fail if the reference copy is not match with testing copy.

Installation and Configuration

> npm install -g create-react-app

Create new Testing Project by using this command to cmd or terminal

> create-react-app react-snap-testing

Install prop types to check the property type for state and props and function of react component.

> npm install --save prop-types

Install test renderer npm package to provide the functionality for snapshot testing with jest

> npm install --save react-test-renderer

Test Project Structure

Figure 1.1 Test Project Structure

1. Create folder named components which will contains all the react component and test files.
2. Add DataSource.json file, which contains the array of People infomration, we can get json datasource from https://jsonplaceholder.typicode.com/users . then save it to json file.
3. Then Create People.jsx react component, which represent the single people or which represent the single row of the table view.
4. Create PeopleList.jsx , react component which represent the table view of People .
5. Then Create Test File named People.spec.js (we can use .test.js suffix to People.test.js file) which contains the all the test related to snapshot testing.

Design and Test People Component and Test

Figure 2.1 Create the People React Component.

In Figure 1.1, I have added table row which is represent single people information from people list .

We can use TDD(Test Driven Development) methodology to test the People component and write the test case in Poeple.spec.js file.

To Support snapshot testing, developer must need to install ‘react-test-renderer’ npm package.

Create the Test Case In People.spec.js file for Testing People.jsx functionality

Figure 1.2 Test case for empty People List row representation

In Figure 1.2, I write test case, which will create spanshot with test case related to empty <People /> component.

In Line 2, I import react-test-renderer to create spanshot automatically when runing test file by npm test or yarn test .

In Line 7, renderer.create(<React Component />).toJSON() is chain function.

renderer.create(<React Component /> create the TestRenderer instance, this function does not use real dom, but it creates component tree in memory and create test assertions, which provide properties and methods such as toJSON() , toTree() , update()

We are using toJSON() , which will be available after using renderer.create() function. toJSON() function return a object representing rendered tree. That tree only contains platform-specific nodes like <div> or <View> and their properties. But It does not contains any user-written component.

In Line 8, expect(tree).toMatchSnapshot() function will automatically create the __snapshots__ folder and create the component wise snap file when first time the test is run. The snapshot testing file extension will be<test file name>.snap .

For Jest Testing, we need to know about two functions, which are very important during writing test for application

1. describe () -> This function, which use for binding the testing scope.
  describe() takes two arguments. 
    first argument takes `scope name` . 
    second argument takes function which takes one and more test cases
2. it() -> this function is used for writing the test case.
     it() takes two agrument.
       first argument takes `tast case name`
       second argument takes testing functions 

Output of the Testing Code

Go To terminal or cmd and run command

> npm test

Figure 1.3, Snap Shot testing output

In Figure 1.3, After Runing the command we will get that output to terminal and create the snapshot file in __snapshots__ directory.

(1) It shows that, All the test case is passed successfully.

(2) react-test-renderer automatically create snapshot folder with snap shot testing file,The below figure contains snap test output in src/components/__snapshots__/People.spec.js.snap file.

Figure 1.4, Snapshot File for simple snapshot testing (People.spec.js.snap)

Welldone, We Are Completing Our First Snapshot testing

Check the People Component with Single Objects

Figure 1.5 Test People Component With Data

Figure 1.6 Snapshot Testing Output for figure 1.5

Test PeopleList.js Component with Spanshot Testing

Figure 2.1 Create Test File for people List Component

1. Create Seperate test file for Table Component named PeopleList.jsx file.
2. Then create test file named PeopleList.spec.js
3. For Testing with PeopleList.jsx file, we are using DataSource.json file.

Create PeopleList Component For Snapshot Testing

Figure 2.2, People List React Component

Create The Test File for PeopleList.spec.js file to test the PeopleList Component

Figure 2.3 Testing PeopleList Component with DataSoruce.json file

In line 4, I have import the json file, which contains JSON array of data. In line 9, I pass the lstPeoples json array to lstPeoples properties of a <PeopleList /> . Then Run the test again with npm test command from terminal or cmd . The output of the file we can find in __snapshots__ path named PoepleList.spec.js.snap file.

The Process of Updating the Snapshot Testing

1. To create situation about updating the test, first we test the <PeopleList /> component with one element. Then add two element so we need to update the snapshot test.

Figure 3.1 Test The <PeopleList /> with One People Item in a List

Now we can run Figure 3.1’s codes into terminal, It generate the Snapshot With One Element in PeopleList.spec.js.snap file at__snapshots__ folder.

Then , If we want to test 2 element within this test case, first we add the another object in peopleList array after line 13.

Figure 3.2 people list array with 2 element.

2. Then Run test, get an error in command line and test failed. The output of after updating test case is provide below

Figure 3.3, Output of Test for Two People Item in People List

From terminal we get option w . Press w ,then we get the list of actions for further operations

WFigure 3.4 Option for Run test again from terminal

If we want to update the snapshot , we will press u to update the test. Or we can press q to quite the testing.

After Pressing the q , testing will end. To solve the Error for updating the testing case.we can use the command below in terminal or cmd . It will update the test case and update the snapshot of the <PeopleList /> element.

> npm test -u

tariqulislam/react-snap-testing