Redux Container Unit Testing - Unable to access props for wrapped component

Question

Following the React v6 upgrade, my existing test cases for the component are failing.

Here is my component container code TodoContainer.jsx:

import { connect } from 'react-redux';

import Todo from './Todo';
import { initialLoadExecuted } from '../../actions/LoadActions';

const mapStateToProps = state => ({
  isCollapsed: true,
  pinnedTiles: false,
});

const mapDispatchToProps = dispatch => ({
  dispatchInitialLoadExecuted: (tiles) => {
    dispatch(initialLoadExecuted(tiles));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(Todo);

Here is my test code TodoContainer.test.jsx:

    import React from 'react';
    import configureStore from 'redux-mock-store';
    import {Provider} from 'react-redux';
    import TodoContainer from '../../../../src/todo-component/components/Todo/TodoContainer';
    import { initialLoadExecuted } from '../../../../src/todo-component/actions/LoadActions';

    const mockStore = configureStore();
    let store;

    describe('Todo Container', () => {
      beforeEach(() => {
        store = mockStore({
        });

      it('maps state props correctly', () => {
        const wrapper = shallow(<TodoContainer store={store}/>);
        wrapper.prop('dispatchInitialLoadExecuted')('Test String);
        // Expect statements
      });
    });

The error i am getting is :

Invariant Violation: Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: . You may also pass a {context : MyContext} option to connect.

Is there a way to to pass store through provider while accessing the props, the same way?

I guess this should be work => const wrapper = shallow(<Provider store={store}><TodoContainer/></Provider>); — Rafael Lima
Negative! props are empty object. mapStateToProps is not assigning the props. — BILAL AHMAD

Rick Pearce Rick Pearce · Accepted Answer · 2019-01-13T17:57:43

It appears that react-redux v6.0.0 now supports the new Context API added to React v 16.4.0 (and also requires that verson of react now).

I was able to resolve the issue and keep the mockStore pattern by installing [email protected] and [email protected] (before they introduced the Context API).

Further testing: I can use [email protected] as long as I use [email protected]

There's an ongoing discussion on the react-redux github issues tab: https://github.com/reduxjs/react-redux/issues/1161

Not a long term solution as I'd be stuck at this version of React, but it does pass the test and I was able to get my 100% code coverage.

Redux Container Unit Testing - Unable to access props for wrapped component

1 Answers