Jest Snapshot Testing for React Components is useless? Is it slowly dying? 🧐🤔😐
Tags: react, testing, javascript, jest
Published: 2019-11-10 18:01:56

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. :wave:

ReactJS team also suggested people use Jest to test their app. Which is fair as Jest was also created by Facebook. :clap:

Jest is cool. But later they came up with something called [<b>Jest Snapshot testing</b>](https://jestjs.io/docs/en/snapshot-testing). And as usual, they also suggested developers use it to test their React components.:clap::clap:

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


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

```javascript
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.

```javascript
// 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-

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cfonpzxdz0nizpu65pmo.png)

Wow! We, the developers, are happy. and let's deploy the code to PROD. :tada:

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
```javascript
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.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/m1j7il7fihb8r57ncf3a.png)

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

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.
:scream:

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. :worried:

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

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](https://thepracticaldev.s3.amazonaws.com/i/rnxretchsqht9opukxpw.gif)

Also, from twitter -

{% twitter 919594505938112512 %}

{% twitter 1098563602645221377 %}

{% twitter 807626710350839808 %}

I will write more on this testing related stuff!

Till then,
Cheers! :wave:

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 ❤️😊🌸
<a href="https://www.buymeacoffee.com/destromas" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>