[React] Use Jest's Snapshot Testing Feature

Often when testing, you use the actual result to create your assertion and have to manually update it as you make changes to the feature. With Jest snapshot testing, you can let Jest do this part for you and write more tests and features faster and with more confidence. Let's learn about how you can use Jest snapshot testing to improve your own workflow.

 

Using different renderer lib:

import React from 'react'
import TestUtils from 'react-addons-test-utils';
import renderer from 'react-test-renderer'

test('jsx', () => {
    const renderer = TestUtils.createRenderer();
    renderer.render(<MyComponent name="John" />);
    const component = renderer.getRenderOutput();
    expect(component).toMatchSnapshot()
});

test('jsx: example2', () => {
    const component = renderer.create(<MyComponent name="John" />)
    expect(component).toMatchSnapshot()
})

So first test eusing 'react-addons-test-utils' lib and second test using 'react-test-renderer' lib.

 

Sometime you might will 'expect' lib form npm, but Jest also include global 'expect' function, so to avoid conflict:

import React from 'react';
import TestUtils from 'react-addons-test-utils';
import expectLib from 'expect';
import expectJSX from 'expect-jsx';

import Box from '../components/Box';

Object.assign({}, expect, expectLib, expectJSX);

    it('should rendering the string', () => {
       const renderer = TestUtils.createRenderer();
       renderer.render(<Box color="green" id="2" />);
       const result = renderer.getRenderOutput();
       expect(result).toMatchSnapshot()
    });

 

So later if you change the Box component, the test will faild. Because the snapshots are not updated, you can simply type 'u' in command line to update the snapshots, then the tests will pass.