Using Jest for Snapshot testing your React Components

When it comes to testing React components there are plenty of school of thoughts around it. I have been using Airbnb’s Enzyme.js for a while and felt uncomfortable in updating the test specs with ever-changing UI. Then I came across something interesting called Snapshot Testing using Jest. It was also compelling to know that Jest snapshot testing was developed along with the React Developers to make the component testing easier. I do not want to get into a war of words which is better and this post is not intended for it. And the snapshot testing will not replace your unit test, you will still continue to write your unit tests for the business logic.

So what Jest does? It creates a serializable react dom tree which can be saved and checked-in along with your code. In later time if you component changes, you can immediately verify whether the change is an intended one or by a mistake. If it is an intended change, you will update the snapshot and check-in the new version otherwise discards the change.

Alright, enough theory! Let’s get into some action. I am going to use one the react starter kit library that I have created some time ago. First, we have to install the required the npm packages

npm install –save-dev babel-jest babel-polyfill babel-preset-env babel-preset-react jest react-test-renderer

Create a test folder if you do have it already and nowadays most of the test libraries look for the code in “__test__” folder. And my folder structure looks like below,

__test__
├── components
│   └── app.test.js
└── test.js

My first test file looks like below,

import React from 'react';
import App from '../../src/components/App'
import renderer from 'react-test-renderer';

/**
 *  Tesing components using Snapshot testing using Jest
 */


 describe("Check whether App renders correctly usign snapshot", ()=>{
     it("renders correctly", () => {
         const rendered = renderer.create(
             <App />
         )
         expect(rendered.toJSON()).toMatchSnapshot();
     })
 })

React-Test-Renderer library provides a mean of render react components as pure javascript objects without the need of DOM.

Now, add the jest command to your package.toJSON and jest the library knows the location that it has to look for the test specs.

 "test": "jest",

Run npm test and see the results and which will show something like this and if you look closely you will have a snapshot folder created (__snapshots__) and the component’s snapshot is saved as a pure serializable string.

  PASS  __test__/components/app.test.js
 › 1 snapshot written.
 PASS  __test__/test.js

Snapshot Summary
 › 1 snapshot written in 1 test suite.

Test Suites: 2 passed, 2 total
Tests:       3 passed, 3 total
Snapshots:   1 added, 1 total
Time:        1.823s
Ran all test suites.

I am going to modify the component by adding a div and verify my snapshot again and run

 npm test

. If you see the below output that jest library gives you the changes and you can choose the action accordingly and update your code.

    +   <div>
    +      Test
    +   </div>
      </div>

      at Object.<anonymous> (__test__/components/app.test.js:26:35)
      at process._tickCallback (internal/process/next_tick.js:109:7)

 › 1 snapshot test failed.
 PASS  __test__/test.js

Snapshot Summary
 › 1 snapshot test failed in 1 test suite. Inspect your code changes or run with `npm test -- -u` to update them.

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   1 failed, 1 total
Time:        2.068s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

The entire code base used for this is available on GitHub.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *