Illustrated Snapshot Testing

First, I want to say that for many cases you dont 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();

The process:

The result:

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.

Resources:

Jest Snapshot Testing
Youtube
Snapshot testing React components with Jest