Question

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

我有一个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的情况下对Parent使用Enyzme的浅层渲染并模拟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 Testing Library是为了避免浅渲染。因此，我需要将Redux存储传递给测试：

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

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

您可以拦截Redux动作来停止更改appInitMount吗？

如何使用React Testing Library在安装后立即测试要卸载的组件？

0 个答案: