DEV Community

Cover image for Jest Snapshot Testing for React Components is useless? Is it slowly dying? πŸ§πŸ€”πŸ˜
Shahjada Talukdar
Shahjada Talukdar

Posted on • Updated on

Jest Snapshot Testing for React Components is useless? Is it slowly dying? πŸ§πŸ€”πŸ˜

All the React developers will agree, mostly everyone has used Jest at least once in their dev life.
Yes, It's true for me too. πŸ‘‹

ReactJS team also suggested people use Jest to test their app. Which is fair as Jest was also created by Facebook. πŸ‘

Jest is cool. But later they came up with something called Jest Snapshot testing. And as usual, they also suggested developers use it to test their React components.πŸ‘πŸ‘

First, let's see what's Snapshot testing with Jest-

  • It takes a snapshot, then compares it to a reference snapshot file stored alongside the test.

  • If they match, the test will pass.

  • If they don't match, either the test runner found a bug in your code that should be fixed, or the implementation has changed and the snapshot needs to be updated.

Hm, it seems okay till now!

To play with this, I have created a simple CRA app which already has Jest installed with it. I have a component named Anchor.

import React from "react";

class Anchor extends React.Component {
  render() {
    const { href, ...rest } = this.props;

    return (
      <a href={href} {...rest}>
        this is hte beginning
      </a>
    );
  }
}

export default Anchor;

Enter fullscreen mode Exit fullscreen mode

Please note that THE is misspelled at this is hte beginning. We will come back here later.

I have a test spec file for this named Anchor.spec.js

import React from "react";
import Anchor from "./Anchor";
import renderer from "react-test-renderer";

it("renders correctly and snapshot matches", () => {
  const tree = renderer.create(<Anchor />).toJSON();
  expect(tree).toMatchSnapshot();
});

Enter fullscreen mode Exit fullscreen mode

If I run the command yarn test -u or npm run test -u, Jest will generate the snapshot file named Anchor.spec.js.snap inside __snapshots__ directory.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly and snapshot matches 1`] = `
<a>
  this is hte beginning
</a>
`;

Enter fullscreen mode Exit fullscreen mode

And also the Test will pass-

Alt Text

Wow! We, the developers, are happy. and let's deploy the code to PROD. πŸŽ‰

As I wrote above about THE was misspelled in our version 1. On the PROD, we found out it's a bug.
So let's fix it.

After fixing, our code is

return (
  <a href={href} {...rest}>
    this is the beginning
  </a>
 );
Enter fullscreen mode Exit fullscreen mode

And now if I run yarn test, the test is broken. The reason is it's trying to match with the right code to the old wrong snapshot and it thinks the test should pass.

Alt Text

What? Is this crazy? I just fixed the Bug and made it right. And it's saying me your code is wrong!!! 😬

To make it happy I need to regenerate the snapshot by running this-
yarn test -u

Now let's think of a large application where there are a lot of Components depend on other components. And if your requirements change quite frequently, then if you change one or more components your whole test can be measurably broken.
Even if you add one DIV to one component, the Test will fail.
😱

Yes, One can say/argue, it's better to see what's changed on the component. Yes exactly, and for that, we have GIT or any version management system where we can clearly see the differences. And When the PR reviewer will review your code, it will be clearly visible.

When the app grows and there are a lot of changes on the Components based on new requirements, the Test will fail and developers mostly update the snapshots blindly. Coz be honest, you will not go through failed tests and snapshots line by line when you know that the changes you did are for new requirements and all right. And after running the snapshots again, the PR will be really big for all the newly generated snapshot file changes. It's also a pain in the ass for the PR reviewer. 😟

Tomas(I found this on the web) says - You have become professional snapshot updater, congratulations! ⭐

And of course, you can not do TDD with this Snapshot testing.

A lot of people say we have 100% test coverage. And when they mean it they talk about Unit Testing mostly.

** Unit testing is not enough!

Even after having 100% Unit test coverage( build time), the app can be completely broken in runtime!

Alt Text

Also, from twitter -

I will write more on this testing related stuff!

Till then,
Cheers! πŸ‘‹

My website: https://shahjada.me

As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❀️😊🌸
Buy Me A Coffee

Top comments (8)

Collapse
 
revskill10 profile image
Truong Hoang Dung

They're just tools, they solved specific problems (in this case, snapshot testing, not unit test, not integration test).

It's not the tools false, it's the human using it the wrong way.

Collapse
 
flamesoff profile image
Artem

Yes, you're totally right. It's not the tool's false that it's useless, it the human's false, who has created sucha a useless tool.
Image description

Collapse
 
destro_mas profile image
Shahjada Talukdar

Thanks for your opinion!

But what do you think about the example I gave in this Article?
Do you think snapshot testing is good for this kind of case?

Collapse
 
barakplasma profile image
Michael Salaverry

I think snapshot testing is good for testing single components like your example anchor component.

Especially when the typical alternative is writing many selectors and expectations by hand.

Using snapshots to test the root element of an entire SPA is a mistake since snapshot update fatigue is real, but that doesn't make snapshots useless.

That being said, there are visual regression testing tools worth looking into as a replacement for jest snapshots.

Thread Thread
 
destro_mas profile image
Shahjada Talukdar

The example is actually just a placeholder. But let's assume it as a bigger component and then the snapshot will be very big and if we change the component and generate snapshot again, the diff will be very big too.

Also, Doing visual snapshot testing can be a good thing and can also get potential UI bugs. And tools like Percy can be a good replacement.

Collapse
 
serhiishvaher profile image
Serhii Shvaher

It's dead for me. Heavily used snapshots for components library testing but have never caught any bug with it. Only spent time updating snapshots.

Collapse
 
destro_mas profile image
Shahjada Talukdar

I fully get your point :)

Collapse
 
destro_mas profile image
Shahjada Talukdar

This article was tweeted.
The creator of Styleguidist commented πŸ‘‡