Accepted answer

I created a helper function to wrap my components with redux.

import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import initialState from '../store/initialState';

const mockStore = (state = initialState) => configureMockStore()(state);

export const testableComponent = (component, state) =>
  (<Provider store={mockStore(state)}>{component}</Provider>);

And then you can call it just like this, passing your state

testableComponent(<YourComponent />, {yourUpdatedMockedState})


The official Writing Tests doc from Redux recommends this approach:

But sometimes you want to test just the rendering of the component, without a Redux store.

In order to be able to test the...component itself without having to deal with the decorator, we recommend you to also export the undecorated component

In other words...export NavBar as a named export so you can access it in your tests.

Then you can test it directly as a simple UI component that just renders based on the props you give it.

Related Query

More Query from same tag