reactjs - 测试用 recompose 组成的多个 HOC

Question

我有一个设置，我有一个使用 recompose 由多个 HOC 组成的主容器。

使用的 HOC 是：

WithPageWrapper、WithLoading、WithError

组成如下：

compose(
    withPageWrapper,
    withLoading,
    withError
)(MainContainer)

测试这个逻辑被证明是困难的。我正在做的项目是使用 react-test-renderer 并利用浅渲染方法。

因此，在测试快照以确保错误状态正在加载快照时，仅测试一层深度（由于浅渲染）并始终返回：

<PageWrapper>
    <LoadingContainer>
    </LoadingContainer>
</PageWrapper>

相反，我想在快照中看到的是：

<PageWrapper>
    <ErrorContainer>
    </ErrorContainer>
</PageWrapper>

正如我所期望的那样，加载 HOC 会简单地渲染主容器，因为加载道具是 null 或 false。

进行完整渲染而不是浅渲染只会使快照几乎不可读。有没有办法在 react-test-renderer 中使用浅渲染并测试多个 HOC 的组合？

score 0 · Accepted Answer

所有使用中的 HOC 函数都可以通过一些基本实现来模拟，例如

jest.fn().mockImplementation(Comp => props => (
  <div data-testid="FooHOC"><Comp ...props/></div>
));

这允许在快照中有效地断言结果。

可以在专门的测试中测试原始 HOC 功能的效果。

1 回答 1