如何用酶测试包裹的组件？答案

【问题标题】：How to test wrapped component with enzyme?如何用酶测试包裹的组件？
【发布时间】：2019-03-28 17:33:49
【问题描述】：

我的 React 组件被不同的 HOC（i18next、graphql 等）包裹，不幸的是我无法用酶测试我的 WrappedComponents。

测试 WrappedComponents 的最佳做法是什么？

我不希望导出已包装和未包装的组件版本，我只想为我的应用程序逻辑导出已包装的组件，并能够在已包装的组件中测试未包装的组件。

感谢您阅读我！

【问题讨论】：

大多数精心设计的 HOC 都暴露了原始组件，如答案之一所示。这是导出和测试解包组件以防它们不暴露的好习惯。
我认为这取决于您如何组织您的 HoC。如果您倾向于只使用一个，即connect 或graphql，那么将包装的组件公开为静态成员可能就足够了。但是，如果您使用像 recompose 这样的库，它更喜欢组合多个较小的 HoC，那么您最终可能会得到 HoC.WrappedComponent.WrappedComponent.WrappedComponent 等。在这种情况下，我认为导出“基础”组件也没有问题。

标签： javascript reactjs jestjs enzyme

【解决方案1】：

我倾向于支持 Redux 采用 connect 的相同方法，并将实际组件作为导出组件上的静态可用。

const MyComponent = (props) => ( ... );

const ConnectedComponent = usingMyHoc(...)(MyComponent) ;
ConnectedComponent.WrappedComponent = MyComponent;

export default ConnectedComponent;

【讨论】：

经过多次测试，您的答案似乎是最好的，因为它涵盖了您的组件被多个 HoC 包装的情况。谢谢！

【解决方案2】：

我同意导出展开的组件感觉不自然——您想准确测试组件在生产中的使用方式。

我首选的方法是创建一个封装的渲染函数以用于测试：

function renderWithProviders(componentTree, options = {}) {
    const {initialState} = options;
    const store = initializeStore(initialState);
    return {
        ...render(
    <Provider store={store}>
        <SnackbarProvider>{componentTree}</SnackbarProvider>
    </Provider>
    )};
}

【讨论】：

感谢您的回答！
这也涵盖了多个 HOC。