Question

我的React组件包装有不同的HOC（i18next，graphql等...），不幸的是我无法用酶测试我的包装组件。

测试包装组件的最佳实践是什么？

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

感谢您的阅读！

Answer 1

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

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

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

export default ConnectedComponent;

Answer 2

我同意导出未包装的组件是不自然的-您想准确测试组件在生产中的使用方式。

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

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

如何用酶测试包裹的成分？

2 个答案: