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 -
Justin Searls@searls
I 👎'd snapshot testing yesterday. Someone DM'd (not @'d!) me a question so here's my response to why. I'll blog soon twitter.com/searls/status/…16:03 PM - 15 Oct 2017Justin Searls @searlsEnzyme and snapshot testing is generally a bad idea. Don't @ me.
Guillermo Rauch@rauchgWrite tests. Not too many. Mostly integration.16:43 PM - 10 Dec 2016
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 ❤️😊🌸
Latest comments (8)
This article was tweeted.
The creator of Styleguidist commented 👇
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.
I fully get your point :)
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.
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.
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?
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.
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.