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

Question

My React components is wrapped with differents HOCs (i18next, graphql etc...), unfortunately I can't test my wrappedComponents with enzyme.

What is your best practice to test your wrappedComponents?

I do not wish to export wrapped and unwrapped components version, I would like to only export wrapped component for my application logic and be able to test unwrapped component inside my wrapped component.

Thanks for reading me!

Answer 1

I tend to favour the same approach that Redux takes with connect , and make the actual component available as a static on the exported component.

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

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

export default ConnectedComponent;

Answer 2

I agree that exporting unwrapped components feels unnatural -- you want to test your components exactly how they are used in production.

My preferred method is creating a wrapped render function to use in testing:

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