React js unit tests for connected components - mocha

Question

I have a smart component, trying to write unit test (DOM tests) - getting the following error: Not sure why I am getting this error even though I am passing props in the test..?

Invariant Violation: Could not find "store" in either the context or props of "Connect(myComponent)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(myComponent)".

Updated New error: TypeError: Cannot read property 'mainData' of undefined at mapStateToProps

test code:

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import { renderComponent, expect } from '../../test_helper';
import myComponent from '../../../src/containers/myComponent';


describe('myComponent', () => {
  const mockStore = configureMockStore();
  let connectedApp,
    store,
    initialItems;
  let component;
  let componentRender;

  beforeEach(() => {
    const DataMock = [1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 
      0, 1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 1, 
      2, 0, 0, 0, 0, 0];

    const props = {
      mainData: DataMock,
      abc: 'def',
      subData: {
        test: '1',
        testing: 12,
      },
      userID: '1',
      Date: 'jan11',
    };

    initialItems = ['one'];
    const initialState = {
      items: initialItems
    };

    store = mockStore(initialState);

    component = TestUtils.renderIntoDocument(
      <Provider store={store}><myComponent {...props} /></Provider>);

    componentRender = ReactDOM.findDOMNode(component);
  });

  it('loads', () => {
    expect(component).to.exist;
  });
});

this myComponent is a child of a dumb component

myComponent code:

import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions/component_actions';

class myComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      someString: 'abc',
      someotherstring: 'def',
    };
  }

  componentDidMount() {
    const { test1, test2, test3 } = this.props;
    this.props.fetchEntriesDefault(test1, test2, test3);
    this.props.fetchAnalyticsMainView(test1, test2, test3);
  }

render() {
    return (
      <div className="container">
     </div>
   );
  }
 }


    function mapStateToProps(state) {
      return {
        mainData: state.reducerName.mainData,
        subDataData: state.reducerName.subDataData,
      };
    }
    myComponent.propTypes = {
      mainData: PropTypes.array,
      abc: PropTypes.string,
      subDataData: PropTypes.object,
      userID: PropTypes.string,
      actioncreatorfuncone: PropTypes.func,
      actioncreatorfunctwo: PropTypes.func,
      date: PropTypes.string,
    };

    export default connect(mapStateToProps, actions)(myComponent);

Answer 1

The error clearly states that, the MyComponent is connected to the store using connect from redux. Hence when you use the TestUtils.renderIntoDocument(<myComponent {...props} />);

The component tries to use redux to fetch the store that needs to be supplied. You need to create a test store in order for your connected component to receive reducer.

Example:

import React from 'react';
import ReactDOM from 'react-dom';

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

import TestUtils from 'react-addons-test-utils';
import { renderComponent, expect } from '../../test_helper';
import MyComponent from '../../../src/containers/myComponent';    

describe('myComponent', () => {
  var mockStore = configureMockStore();
  var connectedApp, store, initialItems;
  let component;
  let componentRender;

  beforeEach(() => {
    const DataMock = [1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 
      0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 
      0, 1, 2, 0, 0, 0, 0, 0
    ];

    const initialState = {
      mainData: DataMock,
      userID: '1'
    };

    store = mockStore(initialState);
  });

  describe('state provided by the store', function() {
    beforeEach(function() {

      component = TestUtils.renderIntoDocument(
        <Provider store={store}><MyComponent /></Provider>);

      componentRender = ReactDOM.findDOMNode(component);
    });

    it('loads', () => {
      expect(component).to.exist;
    });
  });
});

In this way, you need to add the provider with the store for a connected component with redux.

Update The Actions may not have an undefined "type" property is due to the fact that, in myComponent the connect method is not getting actions. Could you please post your entire code for myComponent? The actions that needs to be added? The actions should be a dictionary like:

Something like this example:

import { connect } from 'react-redux'
import { login } from '../actions/creators/userActionCreators'

function mapStateToProps(state) {
  return {
    mainData: state.reducerName.mainData,
    subDataData: state.reducerName.subDataData,
  };
}

const mapDispatchToProps = (dispatch) => {
   return {
      onSubmitLogin: (id, pass) => dispatch(login(id, pass))
   }
};

// `LoginForm` is being passed, so it would be the "container"
// component in this scenario
export default connect(mapStateToProps, mapDispatchToProps)(myComponent);

Answer 2

One of the way I am doing is exporting the component separately just for testing as below.

export class MyComponent extends Component {
  // your stuff here
} 

export default connect(mapStateToProps, actions)(MyComponent);

Here we will import component without redux wrapper for testing as

import { MyComponent } from '../../../src/containers/myComponent'; 

For reference Testing Redux Component

Note: we will have to pass required props to the component.