如何使用React Testing Library为组件内部state填充mock数据开展测试？

安全阿岳

2026-9-26

测试方案

你不需要操作组件内部state，按照React Testing Library「从用户行为出发、测试对外表现」的设计原则，通过模拟接口返回 + 模拟用户操作的方式即可完成测试，具体实现逻辑如下：

核心步骤

Mock组件依赖的API请求，返回你预设的模拟列表数据，无需关心内部state的更新逻辑
模拟用户点击「add to list」按钮的真实操作，触发组件内部的请求和state更新
最后直接断言页面上是否渲染了模拟数据的内容，验证组件逻辑是否符合预期

完整测试代码示例

import { render, screen, fireEvent } from '@testing-library/react';
import ListComponent from './你的组件路径';

// 注意：原组件代码中按钮的onClick绑定有拼写错误：hanldeAddToList 应为 handleAddToList，建议先修正
describe('ListComponent 测试', () => {
  it('点击添加按钮后正确渲染接口返回的列表数据', async () => {
    // 1. 定义你需要的模拟列表数据
    const mockList = [
      { name: '测试项1' },
      { name: '测试项2' },
      { name: '测试项3' }
    ];

    // 2. Mock接口请求：如果你的请求用的是axios，直接mock对应axios方法即可，逻辑一致
    global.fetch = jest.fn(() =>
      Promise.resolve({
        ok: true,
        json: () => Promise.resolve(mockList)
      })
    );

    // 3. 渲染组件
    render(<ListComponent />);

    // 4. 模拟用户点击添加按钮
    const addBtn = screen.getByRole('button', { name: /add to list/i });
    fireEvent.click(addBtn);

    // 5. 断言接口被调用，且模拟数据已正确渲染到页面
    expect(global.fetch).toHaveBeenCalledTimes(1);
    for (const item of mockList) {
      expect(await screen.findByText(item.name)).toBeInTheDocument();
    }

    // 测试结束重置mock
    global.fetch.mockClear();
  });
});