React/Jest中Mock Fetch并等待componentDidMount重渲染的测试问题

嘿，我来帮你搞定这个快照测试的问题！这种带API请求的组件测试，核心就是通过模拟API函数来控制数据返回时机，从而分别捕获组件的不同状态快照。下面是具体的实现步骤和代码示例：

第一步：模拟API函数 #

首先我们要把todo.js里的fetchTodoItems函数用Jest mock掉，这样测试时不会真的发起网络请求，而是用我们预设的假数据来控制流程。

import React from 'react';
import { render, waitFor, findByText } from '@testing-library/react';
import Todo from './Todo';
import { fetchTodoItems } from './todo.js';

// 全局mock fetchTodoItems函数
jest.mock('./todo.js', () => ({
  fetchTodoItems: jest.fn()
}));

第二步：测试「加载中」状态的快照 #

组件在componentDidMount调用API后，等待响应的阶段会显示提示信息，我们需要捕获这个状态的快照：

test('Todo组件加载中显示提示信息', () => {
  // 让mock函数处于pending状态（不立即resolve）
  fetchTodoItems.mockImplementation(() => new Promise(() => {}));
  
  const { asFragment } = render(<Todo />);
  
  // 生成加载状态的快照
  expect(asFragment()).toMatchSnapshot();
});

第三步：测试「数据加载完成」状态的快照 #

接下来要模拟API返回成功的情况，等待组件完成重渲染后，捕获展示内容的快照：

test('Todo组件加载完成后展示Todo列表', async () => {
  // 预设模拟的Todo数据
  const mockTodoList = [
    { id: 1, content: '完成React学习' },
    { id: 2, content: '掌握Jest快照测试' }
  ];
  
  // 让mock函数resolve预设数据
  fetchTodoItems.mockResolvedValue(mockTodoList);
  
  const { asFragment } = render(<Todo />);
  
  // 等待组件渲染出数据对应的内容（确保重渲染完成）
  await findByText('完成React学习');
  
  // 生成数据加载完成后的快照
  expect(asFragment()).toMatchSnapshot();
});

关键说明 #

• 用jest.mock替换真实的API函数，完全控制数据返回的时机和内容
• 测试加载状态时，让mock函数处于pending状态，确保组件停留在加载提示阶段
• 测试成功状态时，用await findByText()（或waitFor）等待组件完成重渲染，避免拿到未更新的快照

这样就能完美覆盖你的组件两种关键状态的快照测试啦！

内容的提问来源于stack exchange，提问作者John K Doe