Figuring out snapshot testing with Jest
2 min read

Figuring out snapshot testing with Jest

Recently, I read about Jest while looking up snapshot testing for a project at work. However, I wasn't too sure just what this is. This blog post documents my own confusion and attempt at figuring out what Jest is and what the pros/cons of it are compared to traditional snapshot testing.

I saw this one the github page.

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);

Now this definitely doesn't look like its checking any screenshots or visual elements. Certainly looks nice and simple though.

A quick look at the documentation shows me a Snapshot Testing chapter in the guide. Now this seems more like what I'm looking for.

to make sure your UI does not change unexpectedly. YES! Please. I need this exact thing.

Jest creates a snapshot file Ooo, interesting. So it generates a serialized version of the rendered screen. So we can check that elements exist with the attributes that we expect, but not the actual visual representation of the elements. To be fair, Selenium doesn't check the actual rendered element either.

You can run Jest with a flag that will tell it to re-generate snapshots: Sweet, nice and simple. Perfect for a tool that devs to run themselves.

This next part is the big question. Just what are the actual differences? I need someone smarter and much more familiar with this than I am to tell me.

What's the difference between snapshot testing and visual regression testing?
Snapshot testing and visual regression testing are two distinct ways of testing UIs, and they serve different purposes. 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. There are different trade-offs to consider and we listed the reasons why snapshot testing was built in the Jest blog.

Ok, not too much info but a blog post. Let's check that out.

For Facebook's native apps we use a system called “snapshot testing”: a snapshot test system that renders UI components, takes a screenshot and subsequently compares a recorded screenshot with changes made by an engineer. If the screenshots don't match, there are two possibilities: either the change is unexpected or the screenshot can be updated to the new version of the UI component.

While this was the solution we wanted for the web, we also found many problems with such end-to-end tests that snapshot integration tests solve:

I... what? Did I miss something? So this isn't snapshot testing? or is it? I think, and I'm not sure at all, that the snapshot testing Jest is doing is called snapshot integration tests and the normal screenshot comparison is called snapshot testing. But only for these first two paragraphs. The rest of this blog post seems to refer to the Jest tool as snapshot testing again. Completely ignoring that the words are used to mean two very similar but different things.

Hopefully I somehwat understood this correctly. If not, I'm not sure how anything makes sense. Basically, this tool seems like it can be a really cool quick way to check React apps, just one step beyond unit tests, but not quite as fully rendered as E2E tests.