React Mocha-chai test not recognizing store from prop

Question

I have a Mocha-chai test on a Redux connected React component. In order to pass the Redux store to the test component, I create it in the test file and pass it as a prop, but the test throws the following error:

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

Here is the test:

import React from 'react';
import ReactDOM from 'react-dom';
import { 
  renderIntoDocument,
  scryRenderedComponentsWithType
} from 'react-dom/test-utils';
import Project from '../../src/components/Project';
import { expect } from 'chai';
import { createStore } from 'redux';
import reducer from '../../src/reducers/reducers';

const store = createStore(reducer);

const component = renderIntoDocument(
  <Project 
    store={ store } 
    project={
      {
        "name": "MyName",
        "img": "path.jpg",
        "img_alt": "alt desc",
        "description": "lorem ipsum",
        "github": "repository",
        "link": "website.com"
      }
    } />
);

describe('Project', () => {

  // tests ...

});

This is the React component:

import React from 'react';
import ProjectImage from './ProjectImage';
import ProjectText from './ProjectText';
import { connect } from 'react-redux';
import * as actions from '../actions/actions';

export const Project = React.createClass({

  getProject: function() {
    return this.props.project || {};
  },

  handleClick: function(event) {
    this.props.dispatch(actions.showModal(true));
    this.props.dispatch(
      actions.setModalContent(this.getProject())
    );
  },

  render: function() {
    return (
      <div className="project">

        <ProjectImage 
          img={ this.getProject().img } 
          imgAlt={ this.getProject().img_alt }
          link={ this.getProject().link } />

        <ProjectText 
          projectName={ this.getProject().name } 
          tagline={ this.getProject().tagline } 
          description={ this.getProject.description }
          github={ this.getProject().github }
          webLink={ this.getProject().link } 
          openModal={ this.handleClick } />

      </div>
    );
  }

});

export default connect()(Project);

<Provider store = {store}><Project ...otherprops /></Provider> — Anurag Awasthi
Yes, I did try adding the Provider and passing the store. Same error. — mhatch
Are any of your tests passing? What line in the test file does the error happen on? You should be creating your stores and components using the beforeEach() hook inside your describe section. — Derek

Tawanike Tawanike · Accepted Answer · 2017-09-05T03:16:53

To resolve this issue you can do the following;

Install a library called redux-mock-store npm install redux-mock-store

Set up the store like this:

import configureStore from 'redux-mock-store';

const middlewares = [];
const mockStore = configureStore(middlewares);

Add any middlewares you want included in the store, eg. redux-thunk, redux-sagas etc.

Define your initial state, and and create your store as follow:

initialState = {}
const store = mockStore(initialState);

Then connect your new store to the component you are testing:

const component = renderIntoDocument(
  <Project 
    store={ store } 
    project={
      {
        "name": "MyName",
        "img": "path.jpg",
        "img_alt": "alt desc",
        "description": "lorem ipsum",
        "github": "repository",
        "link": "website.com"
      }
    } />
);

describe('Project', () => {

  // tests ...

});

React Mocha-chai test not recognizing store from prop

2 Answers