时间戳

首页 > 解决方案 > 如何使用计时器为 useEffect 编写 JEST 测试？

react-native - 如何使用计时器为 useEffect 编写 JEST 测试？

问题描述

我@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-nativejestjs

解决方案

您可以使用 jest fake timers 来控制时间：

在顶部使用

jest.useFakeTimers();

然后，当您需要提前一定数量的时间时，请使用：

jest.advanceTimersByTime(100);

推荐阅读