Enable Unit Tests for Components using Redux

When migrating to redux we need to ensure that each component that relies on redux has access to the redux store. To do that we use the <Provider> component. We can use that in each individual unit test or in some kind of wrapper.

This lesson demonstrates both approaches and ends with creating our own version or @testing-library/reacts render method, that will automatically wrap all components in a <Provider> with our redux store.

More information about this approach can be found here: https://redux.js.org/recipes/writing-tests#connected-components

If you're using Enzyme you may find the mountWithStore utility from enzyme-redux serves a similar purpose.

Note:

The reduxRender function shown in this lesson actually includes a typo, based on where the options are spread. The correct version should look like:

const reduxRender = (ui, options) =>
  render(ui, { wrapper: ReduxProvider, ...options });