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