测试与重组组成的多个HOC

Question

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

正在使用的HOC；

WithPageWrapper， 随着加载， WithError

像这样组成：

compose(
    withPageWrapper,
    withLoading,
    withError
)(MainContainer)

测试这种逻辑非常困难。我正在从事的项目是使用react-test-renderer并使用浅层渲染方法。

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

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

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

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

正如我所期望的那样，由于加载属性为null或false，Loading HOC会简单地渲染主容器。

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

Answer 1

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

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

允许在快照中有效声明结果。

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