如何使用计时器为 useEffect 编写 JEST 测试？答案

【问题标题】：How to write a JEST test for a useEffect with timers?如何使用计时器为 useEffect 编写 JEST 测试？
【发布时间】：2021-05-26 21:05:30
【问题描述】：

我正在使用@react-native-community/netinfo 检测应用程序连接状态并在连接丢失时显示一条消息。如何为 useEffect 中的以下代码编写测试以确保消息正在显示/隐藏并且清理工作有效？

  const { isConnected } = useContext(ConnectionContext); 
  ...
  useEffect(() => {
    const snack = setTimeout(() => {
      if (!isConnected) {
        showMessage({
          autoHide: false,
          message: 'Please try again later',
        });
      }
    }, 10000);
    const hideSnack = setTimeout(() => {
      if (isConnected) hideMessage();
    }, 5000);

    return () => {
      clearTimeout(snack);
      clearTimeout(hideSnack);
    };
  }, [isConnected]);

我尝试过这样的方法来检查应用是否已连接

jest.mock('@react-native-community/netinfo', () => ({
  ...jest.requireActual('@react-native-community/netinfo'),
  useNetInfo: () => ({
    isConnected: true,
  })
}));

【问题讨论】：

标签： react-native jestjs

【解决方案1】：

您可以使用开玩笑的假计时器来控制时间：

在顶部使用

jest.useFakeTimers();

然后当你需要提前一定的时间使用：

jest.advanceTimersByTime(100);

【讨论】：