测试useSelector值更改后安装

编程问答 2022-11-06

问题描述

我有一个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上访问此信息。

我尝试过的事情：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-hooksreact-reduxreactjsreactjsreduxreduxreduxuse-effect