After years of writing Jest tests, I recently stumbled upon Snapshot Testing — a feature in Jest that can streamline testing for certain types of code, particularly UI components. If you are not familiar, snapshot testing is a way to assert that the rendered output of a component hasn’t changed unexpectedly. Jest generates a "snapshot" of the component’s output and stores it. Future tests compare the current output against this snapshot, flagging differences that may indicate unintended changes.

In this post, I’ll share my experiences so far with snapshot testing in Jest, including the pros and cons I’ve encountered along the way. Let’s dive in!

What is Snapshot Testing?

Snapshot testing is a testing technique that captures the output of a component or function and saves it as a file. When you run your tests, Jest compares the current output with the saved snapshot to determine if anything has changed.

Here’s a simple example of snapshot testing in Jest:

// myComponent.test.js
import renderer from 'react-test-renderer';
import Link from '../Link';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

In this test, Jest renders MyComponent and saves the output as a snapshot.

// myComponent.test.js.snap
exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

On subsequent test runs, Jest compares the new output with the saved snapshot to check for any changes. If the output has changed, Jest alerts you so you can review the differences.

Pros of Snapshot Testing

1. Quick and Simple: Creating snapshot tests is fast. By running toMatchSnapshot(), Jest automatically saves a snapshot of the component’s current structure, allowing you to focus on functionality. The generated snapshots are stored in .snap files and are versioned with your rest, making changes easy to code review.

2. Reduces Boilerplate: Snapshot tests can help eliminate repetitive assertions, especially when dealing with complex UI structures. This is particularly helpful in Vue or React, where UI states change frequently.

3. Catching Unexpected Changes: Snapshot testing is great for catching unexpected changes in your code. If a UI component’s output changes unexpectedly, Jest will flag it as a failed test, prompting you to review the changes. This can help you catch regressions early and prevent bugs from slipping through the cracks.

Cons of Snapshot Testing

1. Fragile Tests: One of the downsides of snapshot testing is that tests could become fragile over time. If your UI components change frequently, snapshots may need to be updated frequently as well. This can lead to a lot of noise in your test results and make it harder to identify real issues. Additionally, large snapshots can lead to a phenomenon called "snapshot blindness," where developers mindlessly approve changes without closely examining them.

2. Lack of Context: When a snapshot test fails, it can be challenging to understand why the output has changed. Jest provides a visual diff of the changes, but it doesn’t always give you the full context of what caused the change. This can make debugging failures more difficult, especially for complex components.

3. Limited Insight: While snapshots check that a component’s structure hasn’t changed, they don’t verify behavioural aspects. You might still need unit or integration tests to cover these cases. Snapshot testing is best suited for testing the visual output of components, not their functionality.

Conclusion

Snapshot testing in Jest is a powerful tool for testing UI components and capturing changes in your code. While it offers several benefits, such as easy setup and catching unexpected changes, it also has its drawbacks, like fragile tests and false positives. Perhaps its better to use snap shot tests sparingly, for components that should change infrequently, and therefore have a stable snapshot. It’s also important to remember that snapshot testing is just one piece of the testing puzzle and should be used in conjunction with other testing strategies to ensure comprehensive test coverage.

Overall, snapshot testing is a useful technique to have in your testing arsenal, but like any tool, it’s essential to use it judiciously and understand its limitations. By weighing the pros and cons of snapshot testing, you can make an informed decision about whether it’s the right choice for your testing workflow.