Reactjs 如何启动事件反应测试库

我在钩子中有一些代码，用于检测浏览器是否在线/离线：

export function useConnectivity() {
  const [isOnline, setNetwork] = useState(window.navigator.onLine);
  const updateNetwork = () => {
    setNetwork(window.navigator.onLine);
  };
  useEffect(() => {
    window.addEventListener('offline', updateNetwork);
    window.addEventListener('online', updateNetwork);
    return () => {
      window.removeEventListener('offline', updateNetwork);
      window.removeEventListener('online', updateNetwork);
    };
  });
  return isOnline;
}

我有一个基本的测试：

test('hook should detect offline state', () => {
  let internetState = jest.spyOn(window.navigator, 'onLine', 'get');
  internetState.mockReturnValue(false);

  const { result } = renderHook(() => useConnectivity());
  expect(result.current.valueOf()).toBe(false);
});

但是，我想运行一个测试，看看它在触发脱机事件时是否返回正确的值，而不仅仅是在渲染时模拟返回的值之后。最好的方法是什么？到目前为止，我得到的是：

test('hook should detect offline state then online state', async () => {
  const { result, waitForNextUpdate } = renderHook(() => useConnectivity());

  act(() => {
    const goOffline = new window.Event('offline');
    window.dispatchEvent(goOffline);
  });

  await waitForNextUpdate();
  
  expect(result.current).toBe(false);
});

---

我不确定“最佳”，但这是一种方法：在测试中途更改模拟响应，并调整一些异步代码：

测试“钩子应该先检测联机状态，然后检测脱机状态”，异步=>{ const onLineSpy=jest.spyOnwindow.navigator，“在线”，“获取”； //假设我们最初在线： onLineSpy.mockReturnValuetrue； const{result，waitForNextUpdate}=renderHook=>useConnectivity； 等待actasync=>{ const goOffline=新窗口。事件“脱机”； //假装我们离线： onLineSpy.mockReturnValuefalse； window.dispatchEventgoOffline； 等待waitForNextUpdate； }; expectresult.current.toBefalse； };

---

我不确定“最佳”，但这是一种方法：在测试中途更改模拟响应，并调整一些异步代码：

测试“钩子应该先检测联机状态，然后检测脱机状态”，异步=>{ const onLineSpy=jest.spyOnwindow.navigator，“在线”，“获取”； //假设我们最初在线： onLineSpy.mockReturnValuetrue； const{result，waitForNextUpdate}=renderHook=>useConnectivity； 等待actasync=>{ const goOffline=新窗口。事件“脱机”； //假装我们离线： onLineSpy.mockReturnValuefalse； window.dispatchEventgoOffline； 等待waitForNextUpdate； }; expectresult.current.toBefalse； };