Basic React Tests Failing after Implementing Redux

Question

I am trying to practice using Redux/testing React, and have a simple app set up with the Facebook Create-React Kit.

I have a basic test that is just supposed to make sure an element renders:

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render( < Companies / > , div);
});

It was passing until I implemented Redux in that element, like so:

function select(state) {
  return {companies: state};
}

export default connect(select)(Companies);

Now, despite the element certainly rendering in the browser, and the redux implementation working just fine, I am getting this message in the test results:

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

I thought I had done this in my routes with this:

let store = createStore(companyApp);

ReactDOM.render(
  <Provider store={store}>
   <Router history={browserHistory}>
      <Route path="/" component={App}>
        <Route path="/companies" component={Companies}>
            <Route path=":id" component={Company}/>
        </Route>
     < /Route>
   </Router>
 </Provider>, document.getElementById('root'));

but I must be missing something.

Answer 1

This happens because the Companies component is a connected component. When you try to render the connected component in the test, it warns you that there is no store present. To solve this you can either wrap the Companies component in a Provider with a store specifically made for the test, or, if you just want to test the rendering of the component without worrying about the redux store you can explicitly export the raw component like so:

export class Companies {
  ...
}

export default connect(select)(Companies);

and in your test

import { Companies } from ./Companies

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render( < Companies companies={[]} / > , div);
});

Testing connected components is described in more detail here http://redux.js.org/docs/recipes/WritingTests.html#connected-components