如何测试含useEffect异步调用的React Native Context？

• 用waitFor工具处理异步更新
  @testing-library/react-native提供的waitFor会自动处理act包裹逻辑，专门用来等待组件异步状态更新完成。直接在初始状态断言后添加异步等待即可：

  import { render, waitFor } from '@testing-library/react-native';
  
  test('验证异步更新后的状态', async () => {
    const { getByTestId } = render(<FontProvider><MyComponent /></FontProvider>);
    
    // 先验证初始状态
    expect(getByTestId('initial-status')).toHaveTextContent('未加载');
    
    // 等待useEffect内的异步操作完成、状态更新
    await waitFor(() => {
      expect(getByTestId('loaded-status')).toHaveTextContent('已加载');
    });
  });
  

• 确认mock的异步函数是立即resolved的
  确保你mock的异步操作没有额外延迟，比如：

  // 假设异步函数是fetchFonts
  jest.mock('../services/fontService', () => ({
    fetchFonts: jest.fn(() => Promise.resolve(['font1', 'font2']))
  }));
  

• 检查Provider的useEffect依赖
  确认FontProvider里的useEffect依赖数组设置正确，如果只需要组件挂载时执行一次，依赖数组应为空数组[]，避免因依赖异常导致不触发或重复触发异步操作。

• 不要手动用act包裹render
  @testing-library/react-native的render方法本身已经在act环境中执行，手动包裹反而会触发你遇到的“Can't access .root on unmounted test renderer”错误，完全没必要这么做。

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