测试由重构组成的多个HOC

Question

我有一个设置，我有一个主容器，使用重构组成多个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的组成？

Answer 1

所有正在使用的HOC函数都可以通过一些基本实现来模拟

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

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

可以在专用测试中测试原始HOC功能的影响。