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