測試由重構組成的多個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功能的影響。