1

我正在尝试使用 React 测试库，即不使用浅渲染，但我不确定在这种情况下如何（或是否可能）这样做。

我有一个Parent有 2 个孩子的组件。initialMount由 Redux 提供：

const Parent = ({ initialMount )} = () => {
    if (initialMount) {
        return <ChildOne />
    } else {
        return <ChildTwo />
    }
}

当应用程序加载initialMount时true返回ChildOne。这会读取 url 并根据值调度一些 Redux 操作。这些操作之一设置initialMount为 false，这会导致ChildOne卸载ChildTwo并由返回Parent。

我需要测试是否根据值返回了正确的孩子initialMount

如果我在没有 Redux 的情况下使用 Enyzme 的浅渲染Parent并模拟该appInitMount值，那么这很容易测试：

test("Shalow render appInitMount=true", () => {
  const wrapper = shallow(<ChooseIndex appInitMount={true} />);
  console.log(wrapper.debug());
  // Will show ChildOne is returned
});

test("Shalow render appInitMount=false", () => {
  const wrapper = shallow(<ChooseIndex appInitMount={false} />);
  console.log(wrapper.debug());
  // Will show ChildTwo is returned
});

但是我正在使用 React 测试库，因为我想避免浅渲染。因此，我需要将我的 Redux 存储传递给测试：

test("Full render", () => {
  const wrapper = render(
    <Provider store={store}>
      <Parent />
    </Provider>
  );
  wrapper.debug();
});

调试显示ChildTwo返回。我认为这实际上是正确的行为，因为ChildOne首先返回，它调度动作，然后卸载并ChildTwo返回。但是我该如何测试呢？

你能拦截 Redux 动作以停止appInitMount被改变吗？

4

0 回答 0