Learn Jest - Snapshot Testing

#Introduction

Sometimes you don't care about the exact value of an output — you only want to know that it hasn't changed accidentally. That's exactly the need Jest addresses with snapshot testing: recording the serialized result of a value, then comparing it on every subsequent run.

Episode 7 covers the concept of snapshot testing, using toMatchSnapshot(), updating snapshots safely through version control, and applying it to React components and serialized output. Snapshots are one of Jest's signature features, but also among the most misunderstood — this episode will clear that up.

#Snapshot Testing Concepts

#How Snapshots Work

The first time a test calls toMatchSnapshot(), Jest stores a text representation of the received value in a snapshot file. On subsequent runs, Jest compares the new value against the stored one. If they differ, the test fails and Jest shows a diff between the old and new snapshot.

A snapshot is not a replacement for regular assertions. It's a safety net against unwanted changes: ideal for UI output, configuration structures, error messages, and serializable data representations. For business logic, explicit matchers like toEqual remain the better choice.

#Benefits and Risks

• Benefits: catches unexpected changes in complex output, writes them once, and compares them automatically.
• Risks: snapshots can become a habit of "accepting" without reviewing the contents, producing tests that merely record bugs.

The key is reviewing every snapshot change through code review. Snapshots stored in Git can be diffed like normal code — this is what makes review possible.

#Using toMatchSnapshot

#Basic Example

Snapshot of a simple value

test("konfigurasi aplikasi stabil", () => {
  const konfigurasi = {
    nama: "aplikasi",
    port: 8080,
    fitur: ["login", "analitik"],
  };
  expect(konfigurasi).toMatchSnapshot();
});

expect(konfigurasi).toMatchSnapshot() stores the object representation on the first run. If a developer adds a new feature to the fitur array, this test will fail until the snapshot is updated — exactly the behavior we want.

#Where Snapshots Live

Snapshots are stored in a __snapshots__ directory next to the test file, with a .snap extension. This directory must be committed to Git so the whole team compares against the same snapshots. Don't add it to .gitignore.

src/
  konfigurasi.test.js
  __snapshots__/
    konfigurasi.test.js.snap

#Updating Snapshots & Version Control

#Updating Snapshots Safely

When a change is intentional, you update the snapshot with --updateSnapshot:

npx jest --updateSnapshot

The command npx jest --updateSnapshot overwrites all failing snapshots with new values. The shorthand -u does the same thing. Golden rule: run this command only after you've confirmed the change is correct, then review the snapshot diff in Git before committing.

#Review via Code Review

Never accept a snapshot without looking at its contents. In a pull request, always read the .snap file diff — does it only add the expected field, or is there a hidden regression? Snapshots that render a giant object are better split into smaller, focused snapshots that are easy to review.

#Inline Snapshots

Besides separate files, Jest supports inline snapshots with toMatchInlineSnapshot(). The snapshot value is written directly into the test file. This is great for small snapshots you want to see in place, but it makes diffs noisier.

#Snapshot Testing for React Components

#Capturing Component Structure

Snapshots are most popularly used for React components. With the help of a serializer such as @testing-library/jest-dom or a suitable renderer, you can record the DOM structure a component produces:

Snapshot of a React component

function Tombol({ label }) {
  return <button>{label}</button>;
}
 
test("Tombol merender label dengan benar", () => {
  expect(renderToSnapshot(<Tombol label="Simpan" />)).toMatchSnapshot();
});

In episode 8 we'll use React Testing Library for real rendering. For now, understand that a component snapshot captures the output structure — if a class or DOM structure changes accidentally, the test fires immediately.

#Testing Other Serialized Output

Snapshots are also useful for serialized output beyond the DOM: configuration, JSON responses, error messages, or large object representations. The key is that the value must be serializable consistently so the comparison stays stable.

#Wrap Up

Episode 7 explained snapshot testing as a safety net for changes: storing serialized output, comparing it every time the test runs, and updating it only after an intentional change is verified through code review.

Key takeaways:

• Snapshots store serialized output and compare it on subsequent runs.
• toMatchSnapshot() creates a .snap file on the first run.
• The __snapshots__ directory must be committed to Git.
• Update snapshots with npx jest --updateSnapshot, then review the diff.
• Snapshots suit complex output; explicit matchers for business logic.
• Inline snapshots write the value directly in the test file for small snapshots.

In the next episode, episode 8, we'll dive into testing React & UI components — integration with React Testing Library, rendering components and inspecting the DOM, testing events, props, state changes, and async UI, plus combining snapshot testing in React. Make sure your React fundamentals are ready.