Snapshot Testing

Snapshot Testing image
Snapshot testing is all about capturing the state of your software at a specific point in time so you can compare it later. Think of it like taking a photograph of something you want to remember. We use this technique to establish a baseline, a known good state, and then compare subsequent states against it. This helps us quickly spot unexpected changes, regressions or even visual bugs that might have crept into our system. It's a fantastic way to quickly analyse if something has gone awry without having to manually check every single detail each time.

For example, imagine you have a web page with a complex layout. You can take a snapshot of its visual appearance after all the elements have loaded correctly. This becomes your reference. Later, after a new feature has been added or some code has been refactored, you can take another snapshot of the same page. Automated tools can then compare these two images pixel by pixel. If there's any difference, even a tiny shift in a button's colour or position, the test will flag it up as a potential bug. This provides a clear indication that something has changed and requires further investigation, saving you a significant amount of effort in visually checking the page.
Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.

A typical snapshot test case renders a UI component, takes a snapshot, then compares it to a reference snapshot file stored alongside the test. The snapshot artefact should be committed alongside code changes, and reviewed as part of your code review process. The test will fail if the two snapshots do not match: either the change is unexpected, or the reference snapshot needs to be updated to the new version of the UI component.

It's straightforward to spot when a snapshot test fails after a bug has been introduced. When that happens, go ahead and fix the issue and make sure your snapshot tests are passing again.

However, if the component behaviour is updated, our snapshot test case fails because the snapshot for our updated component no longer matches the snapshot artifact for this test case. To resolve this, we will need to update our snapshot artifacts. You can run Jest with a flag that will tell it to re-generate snapshots:
jest --updateSnapshot

Explore MoT
From test cases to AI-ready quality data: why structure matters image
Learn how to structure and organize test management data as an AI-ready foundation that gives AI systems richer context for testing insights and workflows.
MoT Software Testing Essentials Certificate image
Boost your career in software testing with the MoT Software Testing Essentials Certificate. Learn essential skills, from basic testing techniques to advanced risk analysis, crafted by industry experts.
Into The Motaverse image
Into the MoTaverse is a podcast by Ministry of Testing, hosted by Rosie Sherry, exploring the people, insights, and systems shaping quality in modern software teams.
Subscribe to our newsletter