如何测试useEffect中异步API调用后执行setState的React Native组件

问题根因 #

你遇到的测试失败和警告由两个核心错误导致：

1. Mock返回值和组件取值逻辑不匹配
   你在组件中调用clientLibrary.getData()后，是从result.data中提取列表数据，但你的mock直接返回了测试数组本身，导致组件内拿到的result.data为undefined，ListComponent拿到空数据自然不会渲染任何子项。
2. 用同步查询方法获取异步渲染内容
   queryAllByTestId是同步方法，调用时useEffect里的异步请求还未完成、状态还未更新，自然查不到列表项；同时状态更新在测试逻辑之外触发，就会抛出act警告。你手动包裹act不生效的原因是无法精准控制异步请求的执行时机，不能匹配状态更新的节奏。

修复方案 #

按照如下逻辑修改测试代码即可正常运行：

// components/TestComponent.test.js
it('should render 10 list item', async () => {
  const mockList = new Array(10).fill({}).map((v, idx) => ({
      id: `v_${idx}`,
    }));

  const req = jest.spyOn(clientLibrary, 'getData').mockResolvedValue({
    // 返回结构和组件取值逻辑对齐，包裹一层data
    data: mockList
  });

  const { findByTestId, findAllByTestId } = render(<TestComponent />);

  expect(await findByTestId('comp')).toBeTruthy();
  // 使用findAllByTestId异步查询，自动等待状态更新完成，内部已封装act逻辑不会触发警告
  expect((await findAllByTestId('item')).length).toEqual(10);

  // 可选：清理mock避免影响其他测试用例
  req.mockRestore();
});

补充说明 #

• 所有find开头的查询方法都是异步的，内部已经封装了act和等待逻辑，专门用来处理异步渲染场景，不需要你手动包裹act，完全符合你不测试实现细节、只验证最终渲染结果的需求。
• 你贴的组件代码里ListComponent的data={data})多写了一个右括号，实际运行会触发语法错误，记得删除。

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