Snapshot testing is a useful tool to test that there are no unwanted changes in your user interface. Jest generates snapshot files when the snapshot tests are executed. The next time the tests are executed, the new snapshot is compared to the previous one. If there are changes between the content of the files, the test case fails and an error message is shown in the terminal.

To start snapshot testing, perform the following steps:

1. Install the react-test-render package. The --save-dev parameter means that this dependency is saved to the package.json file's devDependencies part and it is only used for development purposes. If you type the npm install --production command in the installation phase, dependencies in the devDependencies part are not installed. So, all dependencies that are needed only in the development phase should be installed using the --save-dev parameter:

npm install react-test-renderer --save-dev

2. Your package.json file should look the following, and the new devDependecies part have been added to the file:

{
  "name": "carfront",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^1.0.0",
    "@material-ui/icons": "^1.0.0",
    "material-ui": "^0.20.1",
    "react": "^16.3.2",
    "react-confirm-alert": "^2.0.2",
    "react-csv": "^1.0.14",
    "react-dom": "^16.3.2",
    "react-scripts": "1.1.4",
    "react-skylight": "^0.5.1",
    "react-table": "^6.8.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-test-renderer": "^16.3.2"
  }
}

3. Import renderer to your test file:

import renderer from 'react-test-renderer';

Let's add a new snapshot test case to our App.test.js file. The test case will create a snapshot test of our AddCar component:

1. Import the AddCar component to our test file:

import AddCar from './components/AddCar';

2. Add following test code after the first test case, which already exists in the file. The test case takes a snapshot from our App component and then compares whether the snapshot differs from the previous snapshot:

it('renders a snapshot', () => {
  const tree = renderer.create(<AddCar/>).toJSON();
  expect(tree).toMatchSnapshot();
});

3. Run the test cases again by typing the following command into your terminal:

npm test

4. Now you can see the following message in the terminal. The test suite tells us the number of test files, and the tests tell us the number of test cases:

When the test is executed for the first time, a _snapshots_ folder is created. This folder contains all the snapshot files that are generated from the test cases. Now, you can see that there is one snapshot file generated, as shown in the following screenshot:

The snapshot file now contains the React tree of our AddCar component. You can see part of the snapshot file from the beginning here:

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

exports[`renders a snapshot 1`] = `
<div>
  <section
    className="skylight-wrapper "
  >
    <div
      className="skylight-overlay"
      onClick={[Function]}
      style={
        Object {
          "backgroundColor": "rgba(0,0,0,0.3)",
          "display": "none",
          "height": "100%",
          "left": "0px",
          "position": "fixed",
          "top": "0px",
          "transitionDuration": "200ms",
          "transitionProperty": "all",
          "transitionTimingFunction": "ease",
          "width": "100%",
          "zIndex": "99",
        }
      }
  />
...continue