Hands-On Design Patterns with React Native

Snapshot testing expandable components

This time, we will demonstrate a tricky part of snapshot testing.

Let's start by creating our first snapshot test. Go to Chapter_1/Example 4_Stateful_expandable_component and run yarn test in the command line. You should see that one test passes. What kind of test is it? It's a trivial unit test that's located in the App.test.js file.

It's time to create our first snapshot test. Replace expect(rendered).toBeTruthy(); with expect(rendered).toMatchSnapshot();. It should look like this:

it('renders', () => {  const rendered = renderer.create(<App />).toJSON();  expect(rendered).toMatchSnapshot();});

Once you have this, rerun yarn test. A new directory called __snapshots__ should be created with the App.test.js.snap ...