7. Snapshot Testing

Question 1

What is a snapshot?

Answer 1

JSON-based record of a component’s output.

Question 2

How does snapshot testing work?

Answer 2

A snapshot taken previously is compared to its corresponding component’s actual output. If everything matches, the test passes; otherwise, it fails.

Question 3

What can be said about snapshots when it comes to source control?

Answer 3

Snapshots are committed along with other and tests to the application repo.

Question 4

What do you need to import in a file in order to create a snapshot?

Answer 4

The component you’d like to create the snapshot of, and the renderer from ‘react-test-renderer’.

eg.
~~~
import renderer from ‘react-test-renderer’;
import { MyComponent} from ‘./MyComponent’;
~~~

Question 5

What do you use to create a tree?

Answer 5

The .create method of the renderer.

eg. const tree = renderer.create();

Question 6

What is a tree in the context of snapshot testing?

Answer 6

A representation of the HTML output of the component.

Question 7

How do you create a snapshot from a tree?

Answer 7

By using the toMatchSnapshot assertion method and the toJSON method of the tree— the first time toMatchSnapshot is called, it creates the snapshot.

eg. expect(tree.toJSON()).toMatchSnapshot();

Question 8

How do you assert that a tree matches a snapshot?

Answer 8

By using the toMatchSnapshot assertion method and the toJSON method of the tree — subsequent calls (after the first) to toMatchSnapshot asserts whether it matches the existing snapshot.

eg. expect(tree.toJSON()).toMatchSnapshot();

Question 9

What’s are the six potential steps of a snapshot testing process?

hint: Developer A vs Developer B

Answer 9

1. Developer A authors a new component
2. Snapshot of that component’s output is generated automatically
3. Developer A commits changes, moves on
   - -
4. Developer B makes a breaking change to a dependency of the new component
5. A new snapshot is automatically generated
6. Since the snapshots don’t match, the test suite will fail until updated.

Question 10

What are the five advantages of snapshot testing?

Answer 10

1. Fast and automatic
2. Catches regressions humans may miss
3. Works nicely with libraries that take in a state and output HTML components (React, Angular, Vue)
4. Adds some protection against regression when no time is available for manually writing tests
5. Requires little training or knowledge of testing to use

Question 11

What are the six disadvantages of snapshot testing?

Answer 11

1. Easy to ignore and suppress
2. Protects only against regression
3. If a component is working incorrectly and then is fixed, a snapshot test will say it is now broken
4. Adds extra files to an already crowded repo
5. Sensitive to incidental changes
6. A waste of resources if the component in question is certain to be modified in the near future

Question 12

How do you update snapshots?

Answer 12

By running the tests with an --update flag.

eg. jest --update

Question 13

When should we update snapshots?

Answer 13

Only when the developer has legitimately verified that the change to the broken component is not a regression but rather intended.