How to test wrapped component with enzyme?
我的 React 组件被不同的 HOC(i18next、graphql 等)包裹着，不幸的是我无法用酶测试我的 WrappedComponents。
测试 WrappedComponents 的最佳实践是什么？
我不希望导出已package和未package的组件版本，我只想为我的应用程序逻辑导出已package的组件，并能够在package的组件中测试未package的组件。
感谢您阅读我！
- 正如其中一个答案所示，大多数精心设计的 HOC 都暴露了原始组件。这是导出和测试未package组件的好习惯，以防它们不公开。
- 我认为这取决于你如何组织你的 HoC。如果您倾向于只使用一个，即 connect 或 graphql，那么将package的组件公开为静态成员可能就足够了。但是，如果您使用像 recompose 这样的库，它更喜欢组合多个较小的 HoC，那么您最终可能会使用 HoC.WrappedComponent.WrappedComponent.WrappedComponent 等。在这种情况下，我认为导出”基础”组件也没有任何问题。
我倾向于采用与 Redux 对 connect 所采用的方法相同的方法，并将实际组件作为导出组件上的静态可用。
|
1
2 3 4 5 6 |
const MyComponent = (props) => ( … );
const ConnectedComponent = usingMyHoc(…)(MyComponent) ; export default ConnectedComponent; |
- 经过多次测试，您的答案似乎是最好的，因为它涵盖了您的组件被多个 HoC package的情况。谢谢！
我同意导出展开的组件感觉不自然——您想准确地测试组件在生产中的使用方式。
我的首选方法是创建一个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> )}; } |
- 感谢您的回答！
- 这也涵盖了多个 HOC。
来源：https://www.codenong.com/55403737/
