测试用 recompose 组成的多个 HOC答案

【问题标题】：testing multiple HOC composed with recompose测试用 recompose 组成的多个 HOC
【发布时间】：2019-09-06 06:05:02
【问题描述】：

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

使用的 HOC 是；

使用PageWrapper，随着加载，有错误

这样组成：

compose(
    withPageWrapper,
    withLoading,
    withError
)(MainContainer)

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

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

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：