如何为React条件渲染的Home组件编写Jest快照测试

要覆盖Home组件的三个渲染分支，首先得调整组件代码——原组件里的apiStausCode（注意拼写错误，应该是apiStatusCode）和apiError是硬编码的常量，没法在测试里动态切换状态，所以先改成props传入：

const Home = ({ apiStatusCode = 200, apiError = "" }) => {
  if (apiStatusCode === 200) {
    return <h1>title</h1>;
  } else if (apiError) {
    return <LoadingError />;
  } else {
    return <Spinner />;
  }
};

export default Home;

测试准备 #

先确认项目里装了jest和@testing-library/react，没装的话跑这个命令：

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

编写快照测试 #

在和Home组件同目录下创建Home.test.jsx（或.js）文件，写入以下测试代码：

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

// 模拟子组件，避免依赖它们的具体实现
jest.mock('./LoadingError', () => () => <div data-testid="loading-error" />);
jest.mock('./Spinner', () => () => <div data-testid="spinner" />);

describe('Home Component Snapshots', () => {
  // 分支1：接口状态码200时渲染标题
  it('renders title when apiStatusCode is 200', () => {
    const { asFragment } = render(<Home apiStatusCode={200} />);
    expect(asFragment()).toMatchSnapshot();
  });

  // 分支2：状态码非200且有错误时渲染LoadingError
  it('renders LoadingError when apiStatusCode is not 200 and apiError exists', () => {
    const { asFragment } = render(<Home apiStatusCode={500} apiError="加载失败" />);
    expect(asFragment()).toMatchSnapshot();
  });

  // 分支3：状态码非200且无错误时渲染Spinner
  it('renders Spinner when apiStatusCode is not 200 and no apiError', () => {
    const { asFragment } = render(<Home apiStatusCode={404} apiError="" />);
    expect(asFragment()).toMatchSnapshot();
  });
});

关键说明 #

• 模拟子组件：用jest.mock把LoadingError和Spinner换成简单的占位组件，测试只关注Home的分支逻辑，不关心子组件内部实现。
• 生成快照：asFragment()会捕获组件的完整DOM结构，Jest会把这个结构存成快照文件（自动生成__snapshots__目录），后续测试会对比当前渲染结果和快照是否一致。
• 全分支覆盖：三个测试用例刚好对应组件里的三个if/else分支，确保每种渲染场景都被测试到。

运行测试 #

执行命令跑测试：

npm test

第一次运行会生成快照，之后修改组件代码时，Jest会提示快照不一致，你可以选择更新快照（确认修改是预期的）或者修复代码。

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