Jest: How to Update Snapshots (The Right Way)

Jest’s snapshot testing is a powerful feature that helps you track changes in your application’s output over time. But what happens when your component or function changes intentionally?

That’s when you need to update your snapshots.

In this guide, we’ll cover how to update Jest snapshots, when to do it, and best practices to follow.

🧠 What is a Snapshot in Jest?

A snapshot is a saved reference of a component or function output — like a React component render or an object’s structure. Jest compares current output to the stored snapshot and flags any differences.

If the changes are expected and valid, you should update the snapshot.

🛠️ How to Update Snapshots in Jest

✅ Option 1: Use -u or --updateSnapshot CLI Flag

jest -u

or

jest --updateSnapshot

This command tells Jest to re-run tests and update all outdated snapshots with the new output.

💡 Best used when you've made intentional changes to UI or return values.

✅ Option 2: Use Interactive Snapshot Update

If you're running tests in watch mode:

jest --watch

Jest will prompt:

› Press u to update failing snapshots

Just press u to update the snapshots one by one.

✅ Option 3: VS Code / IDE Integration

If you're using an IDE like VS Code with the Jest plugin:

  • Look for test run output with snapshot diffs.
  • Click the “Update snapshot” button or use the provided UI option.

📁 Where Are Snapshots Stored?

Snapshots are stored in:

__snapshots__/

Each test file gets a .snap file that contains the serialized snapshot data.

Example:

MyComponent.test.js
__snapshots__/MyComponent.test.js.snap

🚨 When Not to Update Snapshots

  • ❌ Don’t blindly update snapshots if tests fail.
  • ❌ Review the diff first — unexpected changes might mean a bug.
  • ❌ Never commit updated snapshots without reviewing them.

💡 Pro Tips

  • Use toMatchSnapshot() for simple snapshots.
  • Use toMatchInlineSnapshot() to store snapshots inside the test file.
  • For dynamic content (e.g., dates, IDs), mock them or use expect.any() to avoid flaky tests.

🔄 Example: Updating a Snapshot

// MyComponent.test.js
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders correctly', () => {
  const { container } = render(<MyComponent />);
  expect(container).toMatchSnapshot();
});

If this fails due to a UI change, run:

jest -u

Boom — snapshot updated.

📌 Conclusion

Updating Jest snapshots is a simple but important step in snapshot testing. Always review changes, use jest -u or press u in watch mode, and commit with confidence when the updates are intentional.