Power of Jest Snapshot

Jest is a JavaScript testing framework built by Facebook . It has the test runner, test evaluator and assertions utilities built in. It’s an amazing framework to use for testing your applications, may it be written in React , Angular or Vue . In this article, I will explain what is Snapshot feature of Jest and show an interesting use case which can make your testing simpler and faster.

What is Snapshot?

Like the name says, it’s basically a snapshot of output, you want to compare over time and test if the code is up to the expectations. For example, let’s say you have written a React component which renders some UI. Over the time, different people work on it and change the UI output of it. This is stored as a text as shown below and a simple diff comparison of the text outputs can tell if the code is giving the correct output. The main interest of this feature is to make testing easier and painless, testing the goals of your App to render certain UI and not to worry about the implementations.

Though this snapshotting is widely used for testing React components, you can use to test the any output that can be serializable , for example objects or json.

The Case

Lets say, you have a configuration file exporting different values as one below:

// config.js

export const APP_NAME = 'MY_APP';

export const APP_MAIN_ROUTE = 'app/main';

export const APP_USER_ROUTE = 'app/user';

Ealier, I used to write a test, which used to import all these params and do individual assertions, or write some wrapper logic to get it working with a single assertion. But with Jest snapshot, it’s way simplified, as one below:

// config.test.js

import * as constants from '<source-file-path>';

test('constants matches snapshot', () => {
  expect(constants).toMatchSnapshot();
});

On the first run, it will create a snapshot file, as shown below and compare against it on future runs.

// config.test.js.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`constants matches snapshot 1`] = `
Object {
  "APP_NAME": "MY_APP",
  "APP_MAIN_ROUTE": "app/main",
  "APP_USER_ROUTE": "app/user",
}
`;

If you have a very huge, nested object (probably a configuration object), you can test it via snapshotting with a single line . A lot of assertion or implementation related coding can be avoided. Make sure to give this a try and let me know your thoughts in comments.

Thanks a lot for reading through. Please let me know how you felt and if you would like to hear more on any topic, don’t forget to let me know in comments. Have a good day!