CODEWITHSUNDEEP
javascriptreactjsjestjsenzyme
areuseriouus.eth
areuseriouus.eth

Reputation: 413

How to test wrapped component with enzyme?

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!

Upvotes: 1

Views: 1380

Answers (2)

Dave Salomon
Dave Salomon

Reputation: 3297

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;

Upvotes: 3

Eran Goldin
Eran Goldin

Reputation: 979

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>
    )};
}

Upvotes: 2

Related Questions