Jest snapshot testing on steroids with Wallaby.js

Jest testing framework is becoming more popular, even outside the React community. Snapshot testing is one of the features that everyone loves.

In wallaby.js we have been supporting integration with Jest since its very early versions, v0.4.3 was the first wallaby supported Jest version. We keep watching the testing framework evolution closely to keep the promise we give to our users — no matter how good a testing framework gets, wallaby.js is always making the experience with it even better.

Today I would like to share a couple of new and hot features that we have recently added in wallaby that take Jest snapshot testing to a whole new level.

So what happens when a few tests are failing because of some failed snapshot assertions? You need to quickly see the expectation difference and either fix your code or the failing test(s), or to update the stored snapshot(s).

Jest provides a nice results view in the terminal window:

which is great, but:

• You need to switch context from your editor to the terminal window.
• It takes some time to find the test you are interested in, when more than one test is failing.
• It takes some time to navigate to the failing test.
• More than often, updating all snapshots is simply not desirable, and if a specific snapshot update is required, it takes a lot of time to do.

Now let’s see how we approach these issues in wallaby.js. Let’s do it the Wallaby Way.

For example, let’s say you have two tests with snapshots, both are failing, and for the first test you need to update the snapshot, while in the second case you need to update the test without touching its snapshot.

Here is the Wallaby Way:

Wallaby.js in Webstorm

Amazing, isn’t it? We just triggered the Run line tests action for the first test to update just the snapshot of this test, and not the snapshot of the second test, even though these tests share the snapshot file.

Just to illustrate the same, but in a different editor:

Wallaby.js in VS Code

Notice how with wallaby.js we:

• Are able to update individual snapshots, without affecting other snapshots, right from the context of the specific failing test.
• Are able to immediately see the failing tests right in the editor, have instant feedback without even having to save the file.
• Have quick actions and links to navigate to any failing test/error stack.
• Didn’t have to leave the editor to do anything mentioned above.

Quick note: if you would like to update all snapshots in a test file, you may use the Run file tests action, to update all snapshots in a project you may use the Run project tests action.

Also, while Jest’s diff view is nice, we wanted to provide something less verbose and more editor style/theme friendly:

Plus, even if your snapshot test is not failing, you may still be interesting to quickly inspect its content:

And of course, we have made all these new and cool features available in Wallaby App:

If you liked what you saw, give wallaby.js a go. The tool is a commercial product, but there are no free developer tools, unless your time has no value.