Enzyme/React/Redux - Invariant Violation.

Question

Have some legacy code that I wrote without unit tests (I know, I know, bad engi, no cookie), but we were in a rush and literally needed the site to go up in a matter of days.

Now I'm trying to pay off the technical debt. Most of it's easy, but I still have to test the react components. Trying to do so using JSDom and enzyme, but often get this error:

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

So my question is: What's causing this error, and how should I approach this? I'm sure I'll have more questions, but this is the big blocker for now.

So, here's the setup for the test:

import React from 'react';
import chai from 'chai';
const expect = chai.expect;
import { shallow, mount } from 'enzyme';

import ThankYou from '../src/frontend/js/containers/ThankYou';

describe('<ThankYou />', () => {
  it('is trying to get React testing to work', () => {
    const wrapper = shallow(<ThankYou />);
    //(I know this test *will* fail, but it's failing in the wrong way.)
    expect(wrapper).to.eql({}); 
  });
});

Here's the component itself.

class ThankYou extends Component {
  constructor(props){
    super(props);
  }

  render () {
    return (
      <Paper zDepth={1} >
        <div>
          {thankYou.map((pgraph, i) => (<div key={"pg" + i}>
            {pgraph[this.props.language]}
          </div>))}
        </div>
        <Social />
      </Paper>
    );
  }
}

// reduxify is a library I wrote which maps 
// state, actions, and dispatch to props. 
// source: https://github.com/brianboyko/reduxify/blob/master/reduxify.js
export default reduxify(actions, ['language'], ThankYou);

Ashley 'CptLemming' Wilson Ashley 'CptLemming' Wilson · Accepted Answer · 2016-10-18T10:29:08

You are importing the class wrapped in reduxify into your tests. This component expects to be passed the redux store via context, so the error you are seeing is warning you this is not the case.

You could mock the context to provide a dummy store, or import the component without the reduxify wrapper and instead test that component:

// Export the class before it becomes wrapped
export class ThankYou extends Component {
  ...
}

export default reduxify(actions, ['language'], ThankYou);


// Update the test to import the basic class
import { ThankYou } from '../src/frontend/js/containers/ThankYou';

describe('<ThankYou />', () => {
  it('is trying to get React testing to work', () => {
    const wrapper = shallow(<ThankYou />);
    expect(wrapper).to.eql({}); 
  });
});

Hope this helps.

Enzyme/React/Redux - Invariant Violation.

1 Answers