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;

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();
});

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>
`;

And also the Test will pass-

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>
 );

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.

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!

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 ❤️😊🌸