Question

我有一个React组件，当用户离线时显示一条消息，然后在用户再次在线时显示另一条消息。在线/离线状态由代码库的另一部分处理，并且值存储在Redux存储中。

该组件使用useSelector挂钩来获取离线状态，如下所示：

const isOffline = useSelector(deviceSelectors.isOffline);

并且我正在使用useEffect钩子来更新状态并显示不同的DOM，如下所示：

  useEffect(() => {
    if (isOffline) {
      setUserHasBeenOffline(true);

      if (userWentOnline) {
        setUserWentOnline(false);
      }
    }

    if (userHasBeenOffline && !isOffline) {
      setUserWentOnline(true);
      setUserHasBeenOffline(false);
    }
  }, [isOffline, userHasBeenOffline, userWentOnline]);

现在，我正在尝试在用户脱机然后使其重新联机时测试代码路径。

对于初始代码路径，我已经有了一个完美的工作测试：

  const setupMount = setupWithProvider({
    render: () => <NetworkStatus />,
    [[deviceSelectors.isOffline, false]],
    initialState: {
      device: {
        offline: false,
      },
    },
  });

  it('should render the network status alert for when the user has gone offline', () => {
    const { wrapper } = setupMount({
      selectors: [[deviceSelectors.isOffline, true]],
    });
    expect(wrapper.find('...').exists()).toBeTruthy();
  });

我的问题是，安装后如何更新选择器的值？我看了很多东西，似乎不太容易在Internet上访问此信息。

我尝试过的事情：

我也尝试过分解dispatch并分派我需要间接更新选择器返回值的操作，但是setupWithProvider的{{1}}是一个模拟函数。而且我找不到与此有关的工作方法。
我检查了包装是否有属性作为更新它的道具，但没有。

测试useSelector值更改后安装

0 个答案: