Using Razzle and Jest Snapshots

How to use

Download the example or clone the whole project:

1curl https://codeload.github.com/jaredpalmer/razzle/tar.gz/master | tar -xz --strip=2 razzle-master/examples/with-jest
2cd with-jest

Install it and run:

1yarn install
2yarn test

Idea behind the example

This is an example of how to use Jest Snapshots with a Razzle project.

Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly. A typical snapshot test case for a mobile app renders a UI component, takes a screenshot, then compares it to a reference image stored alongside the test. The test will fail if the two images do not match: either the change is unexpected, or the screenshot needs to be updated to the new version of the UI component.

1// src/__tests__/Home.test.js
2
3import React from 'react';
4import renderer from 'react-test-renderer';
5import Home from '../Home';
6
7it('renders Home correctly', () => {
8  const tree = renderer.create(<Home />).toJSON();
9  expect(tree).toMatchSnapshot();
10});

When you run yarn test, a snapshot file is generated that looks like:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders Home correctly 1`] = `
<div>
  Hello World!
</div>
`;

Refer to the Jest documentation for more information.