如何使用React Testing Library测试API返回的渲染数据

一、核心测试目标 #

• 组件挂载后是否正确发起API请求
• API返回数据是否正确驱动UI渲染
• 异常场景（请求失败）下的UI表现是否符合预期

二、具体测试步骤 #

1. 模拟API请求（隔离真实网络依赖） #

通过jest.mock模拟API请求函数，返回预设的测试数据，避免真实网络请求影响测试稳定性：

// 假设你的API请求模块路径是../services/productApi
jest.mock('../services/productApi', () => ({
  getProducts: jest.fn().mockResolvedValue([
    { id: 1, title: "测试商品1", price: 29.99 },
    { id: 2, title: "测试商品2", price: 49.99 }
  ])
}));

2. 测试请求触发与数据渲染 #

import { render, screen, waitFor } from '@testing-library/react';
import Products from './Products';
import { getProducts } from '../services/productApi';

test('组件挂载后发起请求并渲染商品列表', async () => {
  render(<Products />);

  // 验证API请求是否被调用
  expect(getProducts).toHaveBeenCalledTimes(1);

  // 等待异步数据渲染完成，用waitFor处理异步更新
  await waitFor(() => {
    // 检查列表项数量是否匹配mock数据
    const productItems = screen.getAllByRole('listitem');
    expect(productItems).toHaveLength(2);
    // 检查具体商品内容是否渲染
    expect(screen.getByText('测试商品1')).toBeInTheDocument();
  });
});

3. 测试请求失败场景 #

test('API请求失败时显示错误提示', async () => {
  // 模拟请求失败
  getProducts.mockRejectedValue(new Error('商品数据加载失败'));

  render(<Products />);

  await waitFor(() => {
    expect(screen.getByText('商品数据加载失败')).toBeInTheDocument();
  });
});

三、关键测试建议 #

• 优先测试用户可见的UI：遵循React Testing Library的核心原则，不要直接断言状态变量，而是通过UI元素的存在、数量、内容反推状态是否正确更新。
• 处理异步逻辑的正确姿势：用waitFor或findBy*系列查询方法（如findByText）处理异步渲染，绝对不要用setTimeout，避免测试不稳定。
• 保持测试隔离：在每个测试前重置mock，避免测试间的相互影响：

beforeEach(() => {
  jest.clearAllMocks();
});

• 测试加载状态：补充测试组件挂载时的加载提示（如"加载中..."）是否显示，直到数据返回后消失。

四、现有测试的扩展方向 #

如果你已经实现了基础的渲染测试，可以在此基础上：

• 验证商品项的价格、描述等细节是否正确渲染
• 测试搜索、筛选等交互功能触发后，API请求参数是否正确，UI是否同步更新

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