[Jest] Snapshot

The problem we face daily when we do testing:

The Data structure may changing, component outlook might changing... this makes it hard for us do testing. Imaging when the data structure changed, your tests broken, when you need to change the tests accordingly. Our your component DOM structure changed, then you need to update your tests to match the changes.

There are lots of manul work. Jest's snapshot make it easy for us to do test.

You no longer need to hard code value inside your test, you just need to do:

import React from 'react';
import renderer from 'react-test-renderer';
import MovieList from './MovieList';

it('Renders movies', () => {
   const component = renderer.create(
       <MovieList query="F" />
   );

   expect(component).toMatchSnapshot();
})

it will generate a snapshot file, and next time you run the tests, it will check whether the output is the same as what saved into snapshot. If they are not the same, tests will faild, but it allow you to update snapshot, if after updated, they are matched, then tests will pass.

You can also control what to be saved into snapshot by using 'Serializer'.

expect.addSnapshotSerializer({
   test: (val) => val.title && val.emoji, // check whether should use serializer
   print: () => `${val.emoji} ${val.title}`// the formatted value to be saved into snapshot
})

It can also work with serializer from other libaray:

import {shallow} from 'enzyme';
import enzymeSerializer from 'enzyme-to-json/serializer';

expect.addSnapshotSerializer(enzymeSerializer);

it('REnders movies', () => {
   const component = shallow(
      <MovieList query="F" />
   );

   expect(component).toMatchSnapshot(); 
});