React Native Jest测试超时：useInternetConnectivity钩子状态未更新

以下是针对你遇到问题的排查方向和解决方案：

1. 检查NetInfo的Mock是否完整正确 #

很多时候mock不完整会导致钩子逻辑无法正常执行：

• 如果你在钩子中同时用了fetch和addEventListener，必须mock这两个方法，否则监听逻辑会报错中断执行
• 确保用mockResolvedValue处理异步返回值，而非同步的mockReturnValue

示例mock代码：

jest.mock('@react-native-community/netinfo', () => ({
  fetch: jest.fn().mockResolvedValue({ isConnected: true }),
  addEventListener: jest.fn().mockReturnValue(jest.fn()) // mock unsubscribe函数
}));

2. 验证钩子内部的初始化逻辑 #

确认你的钩子在组件挂载时确实调用了checkConnectivity：

• 检查useEffect的依赖数组是否为空（确保初始化时执行一次）
• 给checkConnectivity添加错误捕获，避免静默失败导致状态不更新

钩子示例：

export function useInternetConnectivity() {
  const [isConnected, setIsConnected] = useState(null);

  const checkConnectivity = async () => {
    try {
      const networkInfo = await NetInfo.fetch();
      setIsConnected(networkInfo.isConnected);
    } catch (error) {
      console.error('Connectivity check failed:', error);
      setIsConnected(false);
    }
  };

  useEffect(() => {
    checkConnectivity();
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsConnected(state.isConnected);
    });
    return () => unsubscribe();
  }, []); // 空依赖确保初始化触发

  return { isConnected };
}

3. 调整测试中的等待逻辑 #

放弃依赖waitForNextUpdate，改用更灵活的waitFor配合断言，同时验证mock方法是否被调用：

测试示例：

import { renderHook, waitFor } from '@testing-library/react';
import { useInternetConnectivity } from './useInternetConnectivity';
import NetInfo from '@react-native-community/netinfo';

jest.mock('@react-native-community/netinfo', () => ({
  fetch: jest.fn().mockResolvedValue({ isConnected: true }),
  addEventListener: jest.fn().mockReturnValue(jest.fn())
}));

test('should update isConnected to true on initial load', async () => {
  const { result } = renderHook(() => useInternetConnectivity());

  // 初始状态应为null
  expect(result.current.isConnected).toBeNull();

  // 等待状态更新并断言
  await waitFor(() => {
    expect(result.current.isConnected).toBe(true);
  });

  // 确认fetch方法被调用，证明checkConnectivity执行了
  expect(NetInfo.fetch).toHaveBeenCalledTimes(1);
});

4. 排查其他潜在问题 #

• 检查React Testing Library版本：旧版@testing-library/react-hooks可能存在waitForNextUpdate的兼容性问题，建议升级到最新版
• 测试时打印调试信息：在钩子的checkConnectivity中添加console.log，确认函数是否被执行，是否拿到了mock的返回值

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