Jest React组件快照测试原理及toMatchSnapshot()函数作用答疑

Hey there! Let's break down your questions about Jest snapshot testing for React components—this stuff can feel tricky at first, but it's actually pretty straightforward once you get the hang of it.

Snapshot testing is all about "freezing" the expected output of your component (or any piece of code) at a specific point in time, then verifying it stays consistent across test runs. Here's the play-by-play:

• First test run: When you execute a snapshot test for the first time, Jest renders your component, converts its full output (DOM structure, props, text content, etc.) into a human-readable JSON file called a snapshot. This file gets saved in an auto-generated __snapshots__ folder right next to your test file.
• Subsequent runs: Every time you run the test after that, Jest re-renders the component and compares the new output to the saved snapshot.
  • If they match exactly, the test passes—meaning your component hasn't changed in an unexpected way.
  • If they don't match, Jest flags a failure. This could be because you intentionally updated the component (so you'd want to update the snapshot) or because there's an unintended bug you need to fix in your code.

toMatchSnapshot() is the core Jest matcher that powers snapshot testing for React components. Here's exactly what it does:

• When you call it on a rendered component (usually using tools like React Testing Library's render function), it captures a serialized version of the component's output—think of it as a detailed blueprint of what the component renders, including HTML tags, class names, text, and even inline styles.
• On the first run, it writes this serialized output to the snapshot file we mentioned earlier.
• On every test run after, it compares the current rendered output against the saved snapshot. If there's any difference, it shows you a clear diff (like a code comparison tool) highlighting what changed, so you can decide if the update is intentional or a mistake.
• You can also pass optional configs (like custom serializers) to tweak how specific parts of your component are saved in the snapshot (for example, ignoring dynamic values like timestamps).

Let's walk through a concrete example to make this tangible.

First, here's your simple component (Paragraph.js):

import React from 'react';

const Paragraph = ({ text }) => {
  return <p className="body-text">{text}</p>;
};

export default Paragraph;

Now, your test file (Paragraph.test.js):

import React from 'react';
import { render } from '@testing-library/react';
import Paragraph from './Paragraph';

test('renders paragraph with correct text and styling', () => {
  const { container } = render(<Paragraph text="Hello, snapshot testing!" />);
  expect(container.firstChild).toMatchSnapshot();
});

Step 1: First test run #

When you run npm test (or your project's test command), Jest will:

1. Render the Paragraph component with the prop text="Hello, snapshot testing!".
2. Capture the component's HTML output, which looks like:

   <p class="body-text">Hello, snapshot testing!</p>
   

3. Create a __snapshots__/Paragraph.test.js.snap file that stores this output as a snapshot. The file will look something like this:

   // Jest Snapshot v1, https://goo.gl/fbAQLP
   
   exports[`renders paragraph with correct text and styling 1`] = `
   <p
     class="body-text"
   >
     Hello, snapshot testing!
   </p>
   `;
   

Step 2: Subsequent test runs #

• If you leave the component and test untouched, Jest will compare the new rendered output to the saved snapshot. They match, so the test passes.
• If you update the component—say, change the className to highlight-text—running the test again will trigger a failure with a clear diff:

  - <p class="body-text">
  + <p class="highlight-text">
      Hello, snapshot testing!
    </p>
  

  Now you have two options:
  1. If the change was intentional, run npm test -- -u (the -u flag stands for "update") to overwrite the old snapshot with the new one.
  2. If the change was unintended, fix your component code to match the original snapshot.

内容的提问来源于stack exchange，提问作者pranami