关于javascript：如何用酶测试包裹的组件？


How to test wrapped component with enzyme?

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

测试 WrappedComponents 的最佳实践是什么？

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

感谢您阅读我！

相关讨论

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

1
2
3
4
5
6
const MyComponent = (props) => ( ... );

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

export default ConnectedComponent;
相关讨论

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

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

1
2
3
4
5
6
7
8
9
10
function renderWithProviders(componentTree, options = {}) {
    const {initialState} = options;
    const store = initializeStore(initialState);
    return {
        ...render(
    <Provider store={store}>
        <SnackbarProvider>{componentTree}</SnackbarProvider>
    </Provider>
    )};
}
相关讨论