Skip to main content

Testing Lab 2: Snapshot Tests

Objectives

  • Install React's Test Renderer
  • Create Your First Snapshot Test

Steps

Install React's Test Renderer

  1. Open a command prompt (Windows) or terminal (Mac).

  2. Change the current directory to code\keeptrack.

  3. Run one of the following sets of commands:

    npm

    npm i react-test-renderer --save-dev
    npm i @types/react-test-renderer --save-dev

    Yarn

    yarn add react-test-renderer
    yarn add @types/react-test-renderer --save-dev

Create Your First Snapshot Test

  1. Add a snapshot test for the component. Organize the tests in a suite (describe function).

    src\home\HomePage.test.js

    import React from 'react';
    import HomePage from './HomePage';
    + import renderer from 'react-test-renderer';

    + describe('<HomePage />', () => {

    test('should render without crashing', () => {
    render(<HomePage />);
    });

    + test('snapshot', () => {
    + const tree = renderer.create(<HomePage />).toJSON();
    + expect(tree).toMatchSnapshot();
    + });

    + });
  2. Verify the snapshot is created.

    1 snapshot written.
  3. Open src\home\__snapshots__\HomePage.test.js.snap and review the contents.


You have completed Testing Lab 2