测试使用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>

正如我所期望的那样，当加载属性为null或false时，加载HOC会简单地呈现主容器。

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

Answer 1

使用中的所有临时函数都可以用一些基本实现来模拟，比如

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

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

可以在专门的测试中测试原始HOC函数的效果。