DEV Community

Cover image for Illustrated Snapshot Testing
Behzad Ali Mohammad Zad
Behzad Ali Mohammad Zad

Posted on

Illustrated Snapshot Testing

First, I want to say that for many cases you don’t need to use snapshot testing. You can find a good article here: What Are Proper Use Cases For Snapshot Testing React Components?.

Second, if you are interested in software quality and testing then it is better to know about tools and concepts although some of them are rarely used.

Let's take a look at how snapshot testing works ( example is in Jest ):
expect(component).toMatchSnapshot();
Image description

The process:
Snapshot testing process

The result:
Snapshots are code

Nextjs snapshot testing

Some tips:

  • Visual regression testing tools take screenshots of web pages and compare the resulting images pixel by pixel.
  • With Snapshot testing values are serialized, stored within text files, and compared using a diff algorithm and this is why it's made.
  • Commit snapshots and review them as part of your regular code review process.

Snapshot testing Visual regression testing

Resources:

Jest Snapshot Testing
Youtube
Snapshot testing React components with Jest

Top comments (0)