Snapshot Testing with Jest

Snapshot testing is a valuable method for ensuring UI consistency and validating output over time by comparing current results with previously stored snapshots.

This article will guide you through the process of setting up snapshot testing in Jest to effectively track changes and maintain the integrity of your components.

What is Snapshot Testing?

Snapshot testing is a technique where the rendered output of a component, such as UI elements or data structures, is captured and saved as a reference.

It allows developers to compare future outputs to ensure no unintended changes have occurred, helping detect regressions quickly.

How Does Snapshot Testing Work?

Snapshot testing in Jest works by capturing a component’s rendered output and comparing it to a saved snapshot file.

• Test Setup: Configure the system or component for testing.
• Execution: Trigger the functionality you want to test (e.g., rendering a component).
• Snapshot Capture: Capture the output and save it as a reference snapshot.
• Snapshot Storage: Store the snapshot and associate it with the test case.
• Subsequent Test Runs: Compare the current output to the stored snapshot on future test runs.
• Snapshot Comparison: If outputs match, the test passes; if not, the test fails, indicating a potential change.
• Snapshot Update: If changes are intentional, update the snapshot to reflect the new output.

Snapshot testing helps quickly detect regressions in UI or data output, but should not be the only method used for comprehensive testing.

Snapshot Testing in Jest

Snapshot testing is a popular technique in Jest, a JavaScript testing framework, used to verify that the output of a component or function remains consistent over time.

When a snapshot test fails, Jest provides a diff between the expected snapshot and the actual output, making it easy to pinpoint the changes that need attention. Snapshot testing simplifies the process of testing complex components or functions, as you don’t need to manually define and maintain the expected output.

Overall, snapshot testing in Jest offers a convenient way to validate the consistency of your component or function output, making it easier to catch unintended changes and prevent regressions in your codebase.

Prerequisites of Snapshot Testing

Before getting started with snapshot testing in Jest, there are a few prerequisites you need to have in place:

1. Node.js and npm/yarn: Ensure that you have Node.js installed on your development machine. Jest requires Node.js version 10.12.0 or above. npm (Node Package Manager) comes bundled with Node.js, or you can use yarn as an alternative package manager.

2. Jest Installation: Install Jest as a dev dependency in your project. You can use npm or yarn to install Jest. Open your project directory in a terminal and run one of the following commands:

Using npm:

npm install --save-dev jest

Using yarn:

yarn add --dev jest

3. Test Environment Setup: If you’re testing React components, make sure you have the necessary dependencies installed for testing React. This typically includes react, react-dom, and @testing-library/react. Install these dependencies as dev dependencies:

Using npm:

npm install --save-dev react react-dom @testing-library/react

Using yarn:

yarn add --dev react react-dom @testing-library/react

4. Babel Configuration (for JSX): If you’re using JSX syntax in your tests, ensure that you have the necessary Babel configuration set up. This is required to transpile JSX syntax into regular JavaScript code that can be executed by Jest. You can use Babel presets like @babel/preset-react for JSX transformation.

Install Babel dependencies as dev dependencies:

Using npm:

npm install --save-dev @babel/core @babel/preset-react babel-jest

Using yarn:

yarn add --dev @babel/core @babel/preset-react babel-jest

Create a .babelrc file in the root directory of your project and add the following configuration:

{

"presets": ["@babel/preset-react"]

}

This configuration tells Babel to use the React preset for transpiling JSX.

Once you have these prerequisites set up, you’re ready to start writing snapshot tests in Jest. You can create test files, import Jest functions, and write test cases to capture and validate snapshots of your component or function outputs.

Steps to Set Up Snapshot Testing in Jest

Here are the detailed steps on how to set up snapshot testing in Jest:

Step 1: Create a New Project –  Start by creating a new directory for your sample project. Open your terminal or command prompt and navigate to the desired location. Then, use the following command to create a new project with a package.json file:

mkdir sample-project

  cd sample-project

  npm init -y

This will create a new directory called sample-project and initialize it as an npm project.

Step 2: Install Jest– Next, you need to install Jest, which is a popular JavaScript testing framework. Run the following command in your terminal:

npm install jest --save-dev

This install Jest as a development dependency and adds it to the package.json file.

Step 3: Create a Test File– Create a new file called sample.test.js in the project directory. This will be our test file where we’ll write our snapshot tests. Open the file in a text editor and add the following code:

test('should match snapshot', () => 

{

const data = {name: 'John',age: 30,email: 'john@example.com'};

expect(data).toMatchSnapshot();

});

This test case creates a sample data object and uses the toMatchSnapshot() matcher provided by Jest to generate a snapshot. The toMatchSnapshot() matcher is then used to compare the result with a stored snapshot. If the snapshot exists, Jest compares the result against it. If the snapshot doesn’t exist, Jest creates a new snapshot file.

Step 4: Update package.json– Open the package.json file in your text editor and locate the “scripts” section. Add the following line to the “scripts” section:

"test": "jest"

This configuration sets up a test script that can be run with npm test command.

Step 5: Run Snapshot Tests- Now, you can run the snapshot tests. In your terminal, run the following command:

npm test

Jest will automatically look for files with the .test.js or .spec.js extension and execute the tests. In our case, it will find sample.test.js and run the snapshot test defined inside.

Step 6: Review Snapshot Output- When you run the snapshot tests for the first time, Jest will generate a snapshot file for your test. The snapshot file will have the same name as your test file but with a .snap extension.

In this case, Jest will create a file called sample.test.js.snap.

Open the sample.test.js.snap file and you’ll see a serialized representation of the data object. Jest saves this snapshot as the baseline for future tests.

Step 7: Rerun Snapshot Tests– Now, make a deliberate change to our code to see how Jest handles it. Modify the email property of the data object in sample.test.js to a different value.

const data = {name: 'John',age: 30,email: 'changed-email@example.com'};

Save the file and run the tests again with npm test. Jest will compare the modified snapshot with the previously saved snapshot. If the two snapshots match, the test passes. If they differ, Jest will show a diff of the changes and ask for your confirmation to update the snapshot.

Remember, snapshot testing is useful for capturing the output of code and ensuring it doesn’t change unexpectedly. It’s particularly effective for testing UI components or complex data structures.

Creating Snapshots in Jest

To create snapshots in Jest, you can follow these steps:

1. Import Jest functions: At the top of your test file, import the necessary functions from the Jest library:

import { toMatchSnapshot } from 'jest-snapshot';

import { createSerializer } from 'jest-snapshot';

2. Configure Snapshot Serializers (Optional): If you’re working with complex data structures or custom objects, you may need to configure Jest’s snapshot serializers to properly serialise and compare the output. This step is usually optional, but it can be useful in certain scenarios.

For example, if you’re using React components, you can configure the react-test-renderer serializer to handle component snapshots. Add the following code to your test file :

expect.addSnapshotSerializer(createSerializer({ mode: 'deep' }));

This configures Jest to use the react-test-renderer serializer in deep mode for snapshot serialisation.

3. Write a Test: Write a test case using the test or its function provided by Jest. Within the test case, call the component or function you want to test and capture the output using the toMatchSnapshot() matcher. For example:

test('renders MyComponent correctly', () => { 

Const component = render(<MyComponent />);             expect(component).toMatchSnapshot();

});

In this example, render(<MyComponent />) is called to render the MyComponent component, and the result is captured in the component variable.

4. Run the Test: Run the test command provided by Jest (e.g., jest or npm test). Jest executes the test and compares the output against the stored snapshot. If the output matches the snapshot, the test passes. If there are differences, Jest fails the test and provides a difference between the expected and actual output.

On the first test run, Jest will create a snapshot file (with the same name as your test file and a .snap extension) and pass the test. On subsequent test runs, Jest compares the output with the stored snapshot.

5. Review and Commit Snapshots: After running the test and validating the snapshot, review the generated snapshots in your project directory. The snapshots will be stored in files with the .snap extension. Review the snapshots to ensure they reflect the expected output.

Once you are satisfied with the generated snapshots, commit them to version control. It’s important to include the snapshots in version control so that they can be shared with your team and tracked over time.

By following these steps, you can create and manage snapshots in Jest. The snapshots help you ensure that the output of your components or functions remains consistent and detect any unintended changes or regressions.

Updating Snapshots in Jest

To update snapshots in Jest, you can follow these steps:

1. Identify Snapshot Changes: After making intentional changes to your component or function, run your test suite that includes snapshot tests.

2. Detect Snapshot Differences: During the test execution, Jest compares the updated output with the stored snapshots. If there are differences between the new output and the existing snapshots, Jest will fail those specific snapshot tests and provide a diff between the expected and actual output.

3. Decide Whether to Update Snapshots: Review the diff provided by Jest to determine if the changes in the output are expected. If the differences reflect intentional changes, you can proceed to update the snapshots. If the differences are unintended and indicate a regression or unexpected behaviour, you might need to investigate and fix the issue in your code.

4. Update Snapshots: To update the snapshots, re-run the test suite with the —updateSnapshot or –u flag. For example:

jest --updateSnapshot

This flag tells Jest to update the stored snapshots to match the new output. Jest will overwrite the existing snapshot files with the updated snapshots.

Alternatively, you can use the interactive mode with the -i flag to selectively update snapshots:

jest -u -i

This will enter the interactive mode, allowing you to choose which snapshots to update.

5. Verify Updated Snapshots: After updating the snapshots, review the modified snapshot files to ensure they accurately represent the updated output. Manually check the snapshots and verify that the changes align with your expectations.

6. Commit Updated Snapshots: Once you’re satisfied with the updated snapshots, commit the changes to version control. This ensures that the updated snapshots are preserved and shared with your team.

Remember to use caution when updating snapshots and ensure that the changes are intentional. Regularly reviewing and updating snapshots helps maintain accurate representations of the expected output and accommodates deliberate changes in your codebase.

Inline Snapshots in Jest

Inline snapshots in Jest allow you to store snapshots directly within your test files, instead of in separate files. This makes tests easier to maintain, as the snapshot data is right next to the test code.

It simplifies the process of updating snapshots, as they can be edited and updated directly within the test file.

How to Use Inline Snapshots in Jest:

1. In your Jest test, use the toMatchInlineSnapshot() method instead of toMatchSnapshot().
2. Jest automatically generates and stores the snapshot within the test file.

Example:

test('renders correctly', () => {

  const tree = renderer.create(<MyComponent />).toJSON();

  expect(tree).toMatchInlineSnapshot(`

    <div>

      <h1>Welcome</h1>

      <p>This is a snapshot test</p>

    </div>

  `);

});

With inline snapshots, the snapshot is stored within the test, making it easy to track changes directly in the test file.

Property Matchers in Snapshot Testing

Property matchers in snapshot testing allow you to selectively match certain properties of the output, making snapshot tests more flexible and focused.

These matchers enable you to ignore dynamic values or properties that may change frequently, such as timestamps or random IDs, ensuring that only relevant parts of the output are compared in the snapshot.

How Property Matchers Work:

1. Use property matchers like expect.objectContaining(), expect.arrayContaining(), or expect.stringContaining() to match specific properties in the snapshot output.
2. This ensures that certain properties (like dynamic data) are not included in the snapshot comparison, making tests more stable and focused on essential parts of the output.

Example:

test('compares snapshots ignoring dynamic properties', () => {

  const result = { id: '1234', name: 'John', timestamp: new Date().toISOString() };

  expect(result).toMatchSnapshot({

    timestamp: expect.any(String) // Ignore dynamic timestamp

  });

});

By using property matchers, you can improve the stability of snapshot tests, making them more reliable and reducing false positives due to dynamic values.

Handling Jest Snapshot Failures

When snapshot tests fail in Jest, it indicates that the output of your component or function has changed since the snapshots were last updated. Handling snapshot failures typically involves reviewing the differences and deciding whether the changes are expected or require further investigation.

Here are the steps to handle snapshot failures:

1. Review the Failure Message: When a snapshot test fails, Jest provides a detailed failure message that includes information about the failing test case and a diff between the expected and actual output. Pay attention to the failure message as it can provide valuable insights into the nature of the changes.
2. Evaluate the Changes: Examine the difference between the expected and actual output to understand the specific differences. Evaluate whether the changes reflect intentional updates to the component or function or if they indicate a regression or unexpected behaviour. Consider factors such as recent code changes, library updates, or environment differences that could have influenced the output.
3. Determine Expected Behaviour: Based on your evaluation, determine the expected behaviour of the component or function. If the changes are intentional and align with the expected behaviour, you may need to update the snapshots to reflect the new output. However, if the changes are unintended or unexpected, they might indicate a bug or regression that requires further investigation.
   After updating the snapshots, review the modified snapshot files and verify that they accurately represent the updated output.
4. Investigate Unexpected Changes: If the changes in the output are unexpected or indicate a regression, further investigation is necessary. Review the relevant code, recent changes, and any dependencies that might have caused the issue. Debug the failing test case and identify the root cause of the unexpected changes. Fix any issues identified and rerun the test to ensure the snapshots are updated accordingly.
5. Commit Changes: Once you’ve handled the snapshot failures, commit any changes made to the snapshots or code to version control. This ensures that the updated snapshots or bug fixes are properly tracked and shared with your team.

By carefully reviewing and handling snapshot failures, you can maintain accurate and up-to-date snapshots that reflect the expected output of your components or functions. Regularly monitoring and addressing snapshot failures helps catch unintended changes and ensures the reliability of your tests.

Jest Interactive Snapshot Mode

The interactive snapshot mode in Jest allows you to selectively update or delete individual snapshots during the test execution. This mode provides a convenient way to handle snapshot failures and manage your snapshots. Here’s how to use the interactive snapshot mode:

1. Run Jest in Interactive Mode: Execute your test suite with the –i or —interactive flag:
This command launches Jest in interactive mode.

jest -i

2. Review Snapshot Differences: When Jest encounters a snapshot failure, it presents the diff between the expected and actual output. You’ll see options to update or skip the snapshot for that specific test case.

3. Choose an Action: Jest prompts you to choose an action for each snapshot failure. You can select one of the following options:

• u or i: Update the snapshot for the current test case.
• d or o: Remove the snapshot for the current test case.
• s or n: Skip the snapshot update or deletion for the current test case.
• q: Quit the interactive mode and stop running the tests.

You can type the corresponding letter or use the arrow keys to navigate and select an option.

4. Perform the Chosen Action: After selecting an action, Jest applies the chosen action to the current snapshot and continues with the test execution. If you choose to update the snapshot, Jest will update it to reflect the new output. If you choose to delete the snapshot, Jest will remove it from the snapshot files. If you choose to skip the action, Jest will keep the existing snapshot without making any changes.

5. Repeat for Other Snapshot Failures: Jest will continue running the test suite and present the interactive prompt for each subsequent snapshot failure. Review the differences, choose the appropriate action, and Jest will apply it accordingly.

6. Complete the Test Execution: After handling all the snapshot failures or quitting the interactive mode, Jest completes the test execution and provides a summary of the results.

7. Commit Snapshot Changes: Once you’ve finished handling the snapshot failures, commit the updated or deleted snapshots to version control. This ensures that the changes are tracked and shared with your team.

The interactive snapshot mode allows you to selectively update or delete snapshots during the test execution, providing greater control over managing your snapshots. It helps streamline the snapshot review process and makes it easier to handle snapshot failures efficiently.

Tools for Snapshot Testing

When it comes to snapshot testing in JavaScript, Jest is the most widely used testing framework that provides built-in support for snapshot testing.

Jest offers powerful snapshot functionality and is commonly used for snapshot testing in various JavaScript projects.

However, there are also other tools available that can complement or enhance snapshot testing capabilities. Here are a few notable tools:

• React Testing Library: React Testing Library is a popular testing utility for React applications. It provides a toMatchSnapshot() function that works alongside Jest’s snapshot testing. Additionally, React Testing Library emphasises testing user interactions and component behaviour rather than implementation details, making it a great choice for snapshot testing React components.

• Enzyme: Enzyme is another testing utility for React applications. It provides a toJSON() method that can be used in combination with Jest’s snapshot testing. Enzyme offers a different approach to testing React components, focusing on component traversal and manipulation. It can be used as an alternative or alongside React Testing Library.
• React-test-renderer: The react-test-renderer package is part of React’s official testing utilities. It allows you to render React components to a JSON-like structure, which can then be compared using Jest’s snapshot testing. It provides a low-level API for testing components without the need for a full DOM.
• Testing Library for other frameworks: Apart from React Testing Library, there are testing libraries available for other JavaScript frameworks like Vue.js (Vue Testing Library), Angular (Angular Testing Library), and Svelte (Svelte Testing Library). These libraries often provide snapshot testing capabilities that align with the principles of their respective frameworks.

• Snapshot Diff: Snapshot Diff is a tool that enhances the diffing experience when dealing with snapshot failures. It provides a clearer and more readable diff between the expected and actual output, making it easier to understand the changes and identify potential issues.
• Storybook: Storybook is a popular tool for building UI component libraries. It also includes snapshot testing capabilities through add-ons like Storyshot. Story Shot allows you to take snapshots of your Storybook stories, ensuring that components render consistently across different states and variations.

These tools can assist in snapshot testing, provide additional utilities for testing frameworks, and enhance the overall testing experience. Consider exploring these options based on your specific project requirements and the JavaScript framework you are using.

Talk to an Expert

How can BrowserStack Aid Snapshot Testing in Jest?

BrowserStack’s visual regression testing tool, Percy, can help you enhance snapshot testing in Jest with the help of robust functionalities.

• Automated Visual Comparisons: Spot visual changes quickly by automatically flagging differences between snapshots and getting in-depth pixel-level comparisons.
• Cross-browser testing: With Percy, you can perform snapshot testing across multiple real-device and browser combinations. This way, you can ensure that the Jest snapshots are consistent across various devices and browsers.
• Parallel Testing: Percy uses parallel testing capabilities to help you execute snapshot tests across various devices concurrently and accelerate testing efforts.
• In-depth history and baseline management: Access a historical record of snapshots for monitoring and validating component changes over time.
• Seamless Integrations: Percy integrates with CI/CD tools like Jenkins, Travis CI, Bamboo, etc, along with tools like Storybook.

Advantages of Snapshot Testing

Snapshot testing offers several benefits that can improve the efficiency and reliability of your testing process. Here are some key benefits of snapshot testing:

• Simplified Test Maintenance: Snapshots store expected output, making it easy to compare future results and catch regressions early without manually updating test assertions.
• Readable and Concise Tests: Snapshots reduce boilerplate code, making tests more understandable and maintainable by acting as self-documenting test cases.
• Fast Feedback Loop: Snapshot tests provide quick feedback by comparing outputs to stored snapshots, speeding up the development cycle.
• Detecting Visual Changes: Ideal for UI components, snapshot tests easily detect unintended visual changes like pixel shifts, layout changes, or styling issues.
• Collaboration and Documentation: Snapshots serve as documentation, assisting in onboarding, code reviews, and team collaboration, while providing a historical record of expected output.
• Consistency Across Environments: Snapshot tests ensure consistent behavior across different environments, catching platform-specific issues or inconsistencies in the output.

Disadvantages of Snapshot Testing

While snapshot testing offers numerous benefits, it’s important to be aware of its limitations and potential challenges. Here are some limitations of snapshot testing:

• Limited Contextual Information: Snapshots capture output at a specific moment, lacking details about input data, user interactions, or conditions, making debugging harder.
• False Positives/Negatives: Changes in output not reflected in snapshots can cause false positives, while missed changes can result in false negatives, requiring regular snapshot maintenance.
• Brittle Tests: Dynamic content like timestamps or random values requires frequent snapshot updates, leading to higher test maintenance and excessive failures.
• Lack of Semantic Understanding: Snapshots focus on output structure, missing subtle logic errors or incorrect behavior. Complement with unit or integration tests for better coverage.
• Snapshot Size and Performance: Large snapshots can slow test execution and make diff reviews difficult, especially with complex or data-heavy outputs.
• Maintaining Legacy Snapshots: Outdated snapshots can become irrelevant as the codebase evolves. Regular review and updates are needed to ensure they reflect current behavior.

To mitigate these limitations, use snapshot testing alongside other techniques like unit, integration, and manual testing for more comprehensive test coverage.

Best Practices for Snapshot Testing in Jest

Here are some best practices for snapshot testing in Jest:

1. Use Descriptive Test Names: Give your test cases meaningful and descriptive names that clearly indicate what is being tested. This helps in identifying the purpose of the test and makes it easier to understand failures.
2. Isolate Dependencies: Ensure that your snapshots are not affected by external factors or dependencies. Mock or stub any external dependencies to have full control over the test environment and maintain the stability of your snapshots.
3. Avoid Unnecessary Snapshots: Limit the use of snapshots to cases where they provide significant value. Not all components or functions require snapshot testing, especially when the output is simple or static. Use snapshots judiciously to focus on critical or complex parts of your codebase.
4. Regularly Review and Update Snapshots: As your code evolves, review and update your snapshots to reflect intentional changes. Relying on outdated snapshots can lead to false positives or missed regressions. Schedule regular reviews of your snapshots and update them as needed.
5. Avoid Snapshot Pollution: Ensure that your snapshots are concise and only capture the necessary information. Avoid including dynamic data, timestamps, or irrelevant details that can lead to unnecessary changes in the snapshots. This helps maintain stability and reduces noise in snapshot diffs.
6. Review Diffs Carefully: When a snapshot test fails, carefully review the difference between the expected and actual output. Understand the nature of the changes and evaluate whether they align with the expected behaviour. This helps in distinguishing intentional changes from unexpected regressions.
7. Use Inline Snapshots for Dynamic Output: Inline snapshots allow you to capture and update snapshots directly in your test cases. They are particularly useful for testing components or functions with dynamic output. Inline snapshots make it easier to capture the expected output in the test itself, reducing the need for separate snapshot files.
8. Utilise Snapshot Serialisation: Configure Jest’s snapshot serialisation to handle complex data structures or custom objects. Use appropriate serializers for libraries like React, Redux, or GraphQL to ensure accurate snapshot comparisons. Custom serializers can be created for specific scenarios where default serialisation is not sufficient.
9. Version Control Snapshots: Include your snapshot files in version control to track changes over time. This allows your team to collaborate and review changes to snapshots. Version control also helps identify when and why snapshots were updated, aiding in debugging and ensuring the stability of your tests.
10. Combine with Traditional Testing Techniques: Snapshot testing should complement, not replace, other testing techniques such as unit tests, integration tests, and manual testing. Use snapshot testing in conjunction with other testing methodologies to achieve comprehensive test coverage.

Conclusion

Snapshot testing is a valuable technique in software testing, commonly used in JavaScript projects with tools like Jest. It involves capturing and comparing the expected output of components or functions.

Snapshots serve as concise and readable tests, simplifying test maintenance by eliminating the need for manual assertion updates. They provide a fast feedback loop, detecting unintended changes and visual regressions in UI components.

To enhance Snapshot tests on Jest, you can perform them on real devices using tools like Percy by BrowserStack. You can access a vast real-device cloud of 3500+ device-browser combinations and maximize test coverage.

Try Percy for Free

Useful Resources for Jest

• How to Debug Jest Tests?
• Understanding Jest Mock Hook
• How to Configure Jest
• it.each function in Jest
• Snapshot Testing with Jest
• How to write Snapshot Tests for React Components with Jest?
• How to Run Jest Tests for a Specific File/Folder
• Jest Framework Tutorial: How to use it?
• Understanding Testing Library Jest DOM
• Understanding Jest-Globals
• Unit Testing of React Apps using JEST : Tutorial
• How to test React App using Jest
• Understanding Jest beforeEach Function
• Performing NodeJS Unit testing using Jest
• Jest vs Mocha: Comparing NodeJS Unit Testing Frameworks
• Jest vs Mocha vs Jasmine: Which JavaScript framework to choose?

Frequently Asked Questions

1. What is the difference between snapshot testing and unit testing?

Snapshot testing focuses on comparing the output of components or functions to stored reference snapshots to detect unintended changes. Unit testing, on the other hand, checks individual pieces of code for correctness, ensuring that specific functions or methods behave as expected.

2. What is snapshot vs screenshot testing?

Snapshot testing captures the output of a component and compares it to a saved reference to identify code changes, while screenshot testing captures visual representations of UI components to detect visual regressions, such as layout or styling issues.

3. What is the difference between snapshot testing and visual regression testing?

Snapshot testing compares the actual data or structure of an output (e.g., JSON or HTML) to a reference snapshot. Visual regression testing, however, compares visual aspects of the UI (such as pixels or elements) across different versions to detect unintended visual changes.