Question

我有以下挂钩，它将获取网络状态并设置状态布尔值。

export default () => {
  const [isConnectedToNetwork, setConnection] = useState<boolean>(false);

  useEffect(() => {
    console.log('useEffect');
    NetInfo.fetch('wifi').then(() => {
      console.log('Network fetched');
      setConnection(true);
    });
  }, []);

  return {
    isConnectedToNetwork
  };
};

我正在尝试使用以下情况测试该钩子

describe('useWifiListener', () => {
  it('should be connected', () => {
    const { result } = renderHook(() => useWifiListener());
    expect(result.current.isConnectedToNetwork).toBeFalsy();

    act(() => {
      expect(result.current.isConnectedToNetwork).toBeTruthy();
    });
  });
});

运行测试时，我可以看到所有console.logs。

但是，它失败并显示以下内容：

    Received: false

      14 | 
      15 |     act(() => {
    > 16 |       expect(result.current.isConnectedToNetwork).toBeTruthy();
         |                                                   ^
      17 |     });
      18 |   });
      19 | });

我还在终端-Warning: An update to TestHook inside a test was not wrapped in act(...).

中收到以下警告

无论我投入代码中有多少act(() => {})，我仍然会收到上述警告。

Answer 1

假设NetInfo.fetch('wifi')返回一个承诺，您可能需要等待钩子更新，然后才能使用async utils之一运行声明：

describe('useWifiListener', () => {
  it('should be connected', async () => {
    const { result, waitForNextUpdate } = renderHook(() => useWifiListener());
    expect(result.current.isConnectedToNetwork).toBeFalsy();

    await waitForNextUpdate()

    expect(result.current.isConnectedToNetwork).toBeTruthy();
  });
});

上例中的

waitForNextUpdate为您处理了act，因此您无需自己担心。

无法测试React钩子

1 个答案: