Snapshot Testing with Jest

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

This article will point you through the process of define upsnapshot testing in Jestto efficaciously track changes and keep the integrity of your components.

What is Snapshot Testing?

Snapshot testingis a technique where the rendered yield of a component, such as UI elements or datum structures, is captured and saved as a reference.

It allows developers to compare future outputs to ensure no unintended changes receive come, aid detect regressions quickly.

How Does Snapshot Testing Work?

Snapshot test in deeds by catch a part & # 8217; s interpret output and comparing it to a saved snapshot file.

• Test Setup: Configure the scheme or component for examine.
• Execution: Trigger the functionality you want to essay (e.g., rendering a component).
• Snapshot Capture: Capture the yield and salve it as a reference snapshot.
• Snapshot Storage: Store the snapshot and consort it with the examination case.
• Subsequent Test Runs: Compare the current output to the stored snapshot on next test runs.
• Snapshot Comparison: If outputs lucifer, the test passes; if not, the test fails, bespeak a potential change.
• Snapshot Update: If changes are intentional, update the snap to meditate the new output.

Snapshot testing help quick detectregressionsin 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 yield of a element or function remains logical over time.

When a snapshot test fails, Jest provides a diff between the expected snapshot and the real yield, making it easy to nail the changes that need tending. Snapshot try simplifies the process of testing complex components or functions, as you don & # 8217; t necessitate 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 yield, making it leisurely to catch unintended changes and prevent regressions in your codebase.

Prerequisites of Snapshot Testing

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

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 alternate 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 narration:

yarn add -- dev jest

3. Test Environment Setup:If you & # 8217; re testing React factor, make sure you have the necessary dependence installed for testing React. This typically includes react,react-dom, and @ testing-library/react. Install these dependencies as dev colony:

Using npm:

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

Using narration:

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

4. Babel Configuration (for JSX):If you & # 8217; re apply JSX syntax in your tests, control that you have the necessary Babel configuration set up. This is required to transpile JSX syntax into regular JavaScript code that can be fulfill by Jest. You can use Babel presets like@ babel/preset-reactfor JSX transmutation.

Install Babel habituation as dev dependence:

Using npm:

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

Using narration:

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

Create a .babelrcfile in the root directory of your project and add the following shape:

{'' presets '': [`` @ babel/preset-react '']}

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

Once you have these prerequisites set up, you & # 8217; re ready to start indite snapshot tests in Jest. You can create test files, signification Jest part, and write test case to capture and validate snapshots of your component or purpose yield.

Steps to Set Up Snapshot Testing in Jest

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

Step 1:Create a New Project& # 8211; Start by creating a new directory for your sample undertaking. Open your depot or command prompt and navigate to the trust fix. Then, use the following command to make a new project with apackage.json file:

mkdir sample-project cd sample-project npm init -y

This will make a new directory calledsample-projectand format it as an npm projection.

Step 2:Install Jest& # 8211; Next, you postulate to establish Jest, which is a popular JavaScript screen framework. Run the undermentioned command in your depot:

npm install jest -- save-dev

This install Jest as a development colony and adds it to thepackage.json file.

Step 3: Create a Test File& # 8211; Create a new file calledsample.test.jsin the project directory. This will be our test file where we & # 8217; ll write our snapshot test. Open the file in a text editor and add the following code:

examination ('should match snapshot ', () = & gt; {const data = {name: 'John ', age: 30, e-mail: 'privy @ example.com'}; expect (data) .toMatchSnapshot ();});

This test case create a sample data target and uses thetoMatchSnapshot () matchmaker provided by Jest to generate a snapshot. ThetoMatchSnapshot ()matcher is so used to liken the result with a stored snapshot. If the snap exist, Jest equate the result against it. If the shot doesn & # 8217; t exist, Jest creates a new snapshot file.

Step 4: Update package.json& # 8211; Open thepackage.jsonfile in your text editor and locate the & # 8220;scripts& # 8221; section. Add the undermentioned line to the & # 8220;scripts& # 8221; subdivision:

`` test '': `` jest ''

This contour set up a test script that can be run withnpm test command.

Step 5: Run Snapshot Tests-Now, you can run the snapshot examination. In your terminal, run the undermentioned bid:

npm test

Jest will mechanically look for files with the.test.js or .spec.jsextension and accomplish the trial. In our instance, it will findsample.test.jsand run the snapshot test defined within.

Step 6: Review Snapshot Output-When you run the snapshot tests for the first clip, Jest will generate a snapshot file for your examination. The snapshot file will have the like gens as your test file but with a.snapextension.

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

Open the sample.test.js.snapfile and you & # 8217; ll see a serialized representation of the data object. Jest relieve this snap as the baseline for future tests.

Step 7: Rerun Snapshot Tests& # 8211; Now, get a deliberate change to our codification to see how Jest handles it. Modify theemail holding of thedata object in sample.test.jsto a different value.

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

Save the file and run the tests again with npm examination. Jest will compare the modified shot with the previously saved snapshot. If the two snapshots match, the test surpass. 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 codification and ensuring it doesn & # 8217; t change unexpectedly. It & # 8217; s particularly effective for examine UI ingredient or complex information structure.

Creating Snapshots in Jest

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

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

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

signification {toMatchSnapshot} from 'jest-snapshot '; meaning {createSerializer} from 'jest-snapshot ';

2. Configure Snapshot Serializers (Optional):If you & # 8217; re working with complex data construction or usage target, you may need to configure Jest & # 8217; s snapshot serializers to properly serialise and liken the output. This step is usually optional, but it can be useful in sure scenario.

For example, if you & # 8217; re using React components, you can configure thereact-test-rendererserializer to handle component snap. Add the following codification to your test file:

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

This configures Jest to use thereact-test-rendererserializer in deep mode for snapshot serialization.

3. Write a Test:Write a test suit using the test or its function provided by Jest. Within the trial case, name the component or map you want to test and enamour the output using thetoMatchSnapshot ()matcher. For representative:

test ('renders MyComponent correctly ', () = & gt; {Const component = render (& lt; MyComponent / & gt;); look (element) .toMatchSnapshot ();});

In this example,render (& lt; MyComponent / & gt;)is called to interpret theMyComponentelement, and the result is captured in thecomponent variable.

4. Run the Test:Run the exam command cater by Jest (e.g.,jest or npm test). Jest action the test and compare the output against the stored shot. If the yield matches the snapshot, the test passes. If there are difference, Jest fails the test and cater a difference between the await and actual output.

On the inaugural tryout run, Jest will create a snapshot file (with the same name as your trial file and a.snapextension) and pass the tryout. On subsequent test runs, Jest compares the output with the stored shot.

5. Review and Commit Snapshots:After running the examination and validating the snapshot, review the generated snap in your project directory. The snapshots will be store in file with the.snappropagation. Review the snap to ensure they reflect the expected yield.

Once you are gratify with the generated snapshots, commit them to variant control. It & # 8217; s important to include the snapshots in version control so that they can be share with your squad and tracked over clip.

By following these steps, you can make and manage snapshots in Jest. The snapshot help you ensure that the yield 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 make intentional modification to your component or purpose, run your test suite that includes snapshot tests.

2. Detect Snapshot Differences:During the test execution, Jest liken the updated output with the stored snapshots. If there are differences between the new output and the survive snapshots, Jest will fail those specific snapshot tests and cater a diff between the look and genuine yield.

3. Decide Whether to Update Snapshots:Review the diff provided by Jest to determine if the alteration in the output are await. If the deviation reflect intentional changes, you can proceed to update the shot. 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 examination suite with the & # 8212;updateSnapshotor & # 8211;uflag. For example:

jest -- updateSnapshot

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

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

jest -u -i

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

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

6. Commit Updated Snapshots:Once you & # 8217; re fulfil with the updated snapshots, give the changes to version control. This ensures that the updated snapshots are preserved and partake with your team.

Remember to use caution when update snapshots and see that the changes are intentional. Regularly reviewing and updating shot helps sustain precise representations of the ask yield and fit measured changes in your codebase.

Inline Snapshots in Jest

Inline snapshotsin Jest allow you to store shot directly within your examination files, rather of in freestanding file. This makes tryout easier to maintain, as the snapshot data is right next to the tryout codification.

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

How to Use Inline Snapshots in Jest:

1. In your Jest test, use thetoMatchInlineSnapshot ()method rather oftoMatchSnapshot ().
2. Jest automatically generates and stores the snapshot within the trial file.

Example:

examination ('renders aright ', () = & gt; {const tree = renderer.create (& lt; MyComponent / & gt;) .toJSON (); expect (tree) .toMatchInlineSnapshot (` & lt; div & gt; & lt; h1 & gt; Welcome & lt; /h1 & gt; & lt; p & gt; This is a snapshot test & lt; /p & gt; & lt; /div & gt; `);});

With inline snap, the snapshot is stored within the test, make it easy to tail alteration straightaway in the test file.

Property Matchers in Snapshot Testing

Property matcherin snapshot testing allow you to selectively gibe certain properties of the output, do snapshot examination more pliable and focused.

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

How Property Matchers Work:

1. Use property matchers likeexpect.objectContaining (), expect.arrayContaining (), or expect.stringContaining ()to tally specific place in the snapshot output.
2. This assure that certain properties (like dynamic data) are not included in the snapshot comparison, get tests more stable and focused on crucial parts of the output.

Example:

test ('compares snap ignoring dynamical properties ', () = & gt; {const resolution = {id: '1234 ', gens: 'John ', timestamp: new Date () .toISOString ()}; wait (result) .toMatchSnapshot ({timestamp: expect.any (String) // Ignore dynamic timestamp});});

By employ property matchers, you can improve the stability of snapshot trial, making them more reliable and reducing mistaken positive due to active value.

Handling Jest Snapshot Failures

When snapshot tests fail in Jest, it indicates that the output of your component or mapping has vary since the snapshot were last updated. Handling snapshot failure typically involves reviewing the dispute and deciding whether the changes are expect or involve farther investigation.

Here are the steps to handle snapshot failures:

1. Review the Failure Message:When a snapshot test fails, Jest provides a detailed failure content that includes information about the failing trial case and a diff between the anticipate and actual yield. Pay attention to the failure message as it can ply valuable perceptivity into the nature of the change.
2. Evaluate the Changes:Examine the difference between the expected and literal yield to understand the specific differences. Evaluate whether the change reflect knowing updates to the component or purpose or if they designate a regression or unexpected behaviour. Consider factor such as late code changes, library updates, or environment differences that could have regulate the output.
3. Determine Expected Behaviour:Based on your valuation, determine the expected behaviour of the component or role. If the changes are intentional and align with the expected behaviour, you may need to update the snapshots to excogitate the new output. However, if the changes are unintended or unexpected, they might designate a bug or regression that requires farther investigation.
   After updating the shot, review the modified snapshot file and control that they accurately represent the updated yield.
4. Investigate Unexpected Changes:If the changes in the output are unexpected or indicate a fixation, farther investigation is necessary. Review the relevant code, late changes, and any dependance that might hold caused the issue. Debug the neglect test case and identify the root cause of the unexpected alteration. Fix any issues identified and rerun the exam to secure the shot are updated accordingly.
5. Commit Changes:Once you & # 8217; ve handled the snap failure, send any changes made to the snapshots or code to variant control. This ensures that the updated snapshots or bug fixes are properly dog and shared with your squad.

By cautiously reviewing and care snapshot failures, you can maintain precise and up-to-date snapshots that reflect the expected output of your components or functions. Regularly monitoring and addressing snapshot failure aid catch unintended changes and ensures the reliability of your tests.

Jest Interactive Snapshot Mode

The interactive snapshot style in Jest allows you to selectively update or delete case-by-case snap during the test execution. This fashion provides a convenient way to handle snapshot failures and handle your snapshots. Here & # 8217; s how to use the interactive snapshot mode:

1.Run Jest in Interactive Mode:Execute your test suite with the & # 8211;ior & # 8212;interactional flag:
This command launches Jest in interactive manner.

jest -i

2.Review Snapshot Differences:When Jest encounters a snapshot failure, it presents the diff between the expected and actual output. You & # 8217; ll see alternative to update or hop the snapshot for that specific trial case.

3.Choose an Action:Jest prompting you to choose an activity 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 cause.
• q:Quit the interactive mode and stop scat the tryout.

You can type the corresponding letter or use the arrow key to pilot and select an option.

4.Perform the Chosen Action:After choose an action, Jest utilise the chosen activity to the current snapshot and proceed with the test executing. If you choose to update the snapshot, Jest will update it to excogitate the new output. If you select to blue-pencil the shot, Jest will withdraw it from the snapshot file. If you choose to skip the action, Jest will keep the existing snap without do any changes.

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

6.Complete the Test Execution:After handling all the snapshot failures or quitting the synergistic manner, Jest completes the test execution and provides a sum-up of the effect.

7.Commit Snapshot Changes:Once you & # 8217; ve finish handling the snapshot failure, institutionalize the updated or deleted snap to version control. This see 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 nearly widely used testing fabric that cater built-in support for snapshot testing.

Jest offers potent snapshot functionality and is commonly used for snapshot examine in various JavaScript projects.

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

• React Testing Library:React Testing Library is a democratic testing usefulness for React coating. It provides atoMatchSnapshot ()function that works alongside Jest & # 8217; 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 examine React components.

• Enzyme:Enzyme is another testing usefulness for React coating. It supply atoJSON()method that can be employ in combination with Jest & # 8217; s snapshot examination. Enzyme offers a different attack to testing React components, focalize on component traversal and use. It can be utilise as an option or alongside React Testing Library.
• React-test-renderer:The react-test-renderer package is constituent of React & # 8217; s official examination utilities. It allows you to supply React components to a JSON-like structure, which can so be compared using Jest & # 8217; s snapshot testing. It provides a low-level API for essay components without the want for a entire DOM.
• Testing Library for other frameworks:Apart from React Testing Library, there are essay libraries available for other JavaScript framework like Vue.js (Vue Testing Library), Angular (Angular Testing Library), and Svelte (Svelte Testing Library). These libraries often provide snapshot screen capabilities that aline with the principle of their respective frameworks.

• Snapshot Diff:Snapshot Diff is a instrument that enhances the diffing experience when dealing with snapshot failures. It furnish a clearer and more readable diff between the expected and genuine yield, making it easier to read the changes and identify potential issues.
• Storybook:is a democratic tool for progress UI component libraries. It also includes snapshot try capabilities through add-ons like Storyshot. Story Shot let you to take snapshots of your Storybook storey, ensuring that part render consistently across different states and variations.

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

Talk to an Expert

How can BrowserStack Aid Snapshot Testing in Jest?

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

• Automated Optic Comparisons: Spot visual changes rapidly by automatically droop differences between shot and go in-depth pixel-level comparability.
• : With Percy, you can perform snapshot essay across multiple real-device and browser combinations. This way, you can ensure that the Jest snapshot are consistent across diverse devices and browser.
• Parallel Testing: Percy uses capacity to aid you execute snapshot tests across respective device 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, etc, along with creature like.

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 yield, making it leisurely to liken future results and get regressions early without manually updating test assertions.
• Readable and Concise Tests: Snapshots reduce boilerplate codification, making tests more perceivable and maintainable by acting as self-documenting test cases.
• Fast Feedback Loop: Snapshot tests provide quick feedback by comparing yield to stored shot, speeding up the development cycle.
• Detecting Ocular Changes: Ideal for UI components, snapshot tryout easily detect unintended visual modification like pixel transmutation, layout changes, or styling issues.
• Collaboration and Documentation: Snapshots serve as documentation, assisting in onboarding, code revaluation, and team collaboration, while providing a historic record of expected yield.
• Consistency Across Environments: Snapshot tests ensure consistent demeanor across different surroundings, get platform-specific issues or inconsistencies in the output.

Disadvantages of Snapshot Testing

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

• Circumscribed Contextual Information: Snapshots capture output at a specific instant, lacking particular about comment datum, user interaction, or conditions, making debugging harder.
• False Positives/Negatives: Changes in output not mull in shot can cause false positive, while missed changes can result in false negative, take veritable snapshot maintenance.
• Brittle Tests: Dynamic content like timestamps or random values requires frequent snapshot updates, conduct to high tryout care and excessive failures.
• Lack of Semantic Understanding: Snapshots focus on output construction, miss subtle logic errors or incorrect behavior. Complement with unit or integration tests for better reportage.
• Snapshot Size and Performance: Large snap can slow test execution and make diff reviews difficult, particularly with complex or data-heavy outputs.
• Maintaining Legacy Snapshots: Outdated snapshots can become irrelevant as the codebase evolves. Veritable revaluation and updates are needed to ensure they reflect current behaviour.

To mitigate these restriction, use snapshot testing alongside other techniques like,, and for more.

Best Practices for Snapshot Testing in Jest

Here are some best exercise for snapshot testing in Jest:

1. Use Descriptive Test Names:Give your examination cases meaningful and descriptive names that clearly indicate what is being tested. This aid in identifying the purpose of the test and makes it leisurely to read failures.
2. Isolate Dependencies:Ensure that your shot are not affected by external divisor or dependencies. Mock or stub any international dependencies to have full control over the test surroundings 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, specially when the output is simple or inactive. Use snapshots judiciously to focus on critical or complex parts of your codebase.
4. Regularly Review and Update Snapshots:As your codification evolves, review and update your snapshots to reflect intentional changes. Relying on superannuated snapshots can lead to mistaken positives or missed fixation. Schedule regular reviews of your snapshot and update them as needed.
5. Avoid Snapshot Pollution:Ensure that your snap are concise and alone capture the necessary information. Avoid including dynamic data, timestamps, or irrelevant details that can lead to unneeded alteration in the snapshots. This helps maintain stability and reduces noise in snapshot diffs.
6. Review Diffs Carefully:When a snapshot test fails, carefully reexamine the difference between the expected and actual output. Understand the nature of the changes and measure whether they align with the expected behaviour. This assist in secernate intentional alteration from unexpected regressions.
7. Use Inline Snapshots for Dynamic Output:Inline snapshots allow you to capture and update snapshots forthwith in your trial cases. They are particularly useful for testing ingredient or functions with dynamical output. Inline snapshots do it easier to capture the expected yield in the test itself, reducing the motive for separate snapshot file.
8. Utilise Snapshot Serialisation:Configure Jest & # 8217; s snapshot serialisation to handle complex data construction or custom-made target. Use appropriate serializers for libraries like React, Redux, or GraphQL to insure accurate snapshot comparisons. Custom serializers can be created for specific scenario where default serialisation is not sufficient.
9. Version Control Snapshots:Include your snapshot files in version control to track alteration over time. This grant your team to cooperate and review changes to snapshots. Version control also facilitate identify when and why snapshots were update, aiding in debug and guarantee the stability of your test.
10. Combine with Traditional Testing Techniques:Snapshot testing should complement, not replace, early testing techniques such as unit tests, desegregation tests, and manual examination. Use snapshot testing in conjunction with other testing methodologies to reach comprehensive test coverage.

Conclusion

Snapshot testing is a valuable proficiency in software testing, ordinarily 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 decipherable tests, simplifying test alimony by eliminating the need for manual assertion updates. They provide a fast feedback iteration, detecting unintended changes and ocular fixation in UI components.

To enhance Snapshot trial on Jest, you can perform them on real devices using puppet like Percy by BrowserStack. You can access a vast of 3500+ device-browser combinations and.

Useful Resources for Jest

Frequently Asked Questions

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

Snapshot testing focusing on comparing the yield of component or part to stored reference shot to detect unintended changes. Unit testing, on the other manus, tab individual part of code for rightness, ensuring that specific functions or methods behave as expect.

2. What is snapshot vs screenshot testing?

Snapshot prove captures the output of a ingredient and equate it to a salve reference to identify codification changes, while screenshot testing seizure visual representations of UI components to detect visual regression, such as layout or styling issues.

3. What is the difference between snapshot prove and visual fixation try?

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

Related Guides