How make unit test with react apollo component?

Question

I want to make unit test with mocha, jsdom chai and enzyme. I have already make some unit test and they work well.

However, components which are connect to apollo store doesn't work... I have an error.

This is a test with a component connected to apollo store:

import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';

import ReviewList from '../../src/components/tibco/review-list/review-list';
import NewReview from '../../src/components/tibco/review-list/new-review';

const data = {
  loading: false,
  allCodeReviews: {
    edges: {
      node: {
        id: "Q29kZVJldmlld05vZGU6MQ==",
        reference: 4545,
        reviewer: "John",
        revisionDate: "2016-11-25",
        redmineUrl: "http://url.4545.com",
        flow: {
          id: "Rmxvd05vZGU6MQ==",
          name: "foo"
        }
      }
    }
  },
  allUsers: {
    edges: {
      node: {
        username: "John"
      }
    }
  },
  allFlows: {
    edges: {
      node: {
        name: "Foo",
        id: "Rmxvd05vZGU6MQ=="
      }
    }
  }
};
var selectRowProp = {
  mode: "checkbox",
  clickToSelect: true,
  bgColor: "rgb(238, 193, 213)"
};

describe('<ReviewList />', () => {
  it('Foo test...', () => {
    const wrapper = shallow(
        <ReviewList data={data} selectRowProp={selectRowProp}/>
    );
  });
});

And this is the component ReviewList:

const ReviewList = graphql(allCodeReviews)(React.createClass({
      propTypes: {
        data: PropTypes.shape({
          loading: PropTypes.bool.isRequired,
          allCodeReviews: PropTypes.object,
          allFlows: PropTypes.object,
          allUsers: PropTypes.object
        }).isRequired
      },

      render() {
        if (this.props.data.loading == true) {
          return <center>Waiting...</center>
        }
        return (
          <div></div>
        )
      }
    }
    )
);

When I run npm test, I have this trace log:

> tibco-frontend@0.1.0 test D:\Outils dev\_projet_pycharm\tibco_react
> mocha --compilers js:babel-register tests/index.js



  <ReviewList />
Warning: Failed context type: Required context `store` was not specified in `Apollo(ReviewList)`.
    in Apollo(ReviewList)
Warning: Failed context type: Required context `client` was not specified in `Apollo(ReviewList)`.
    in Apollo(ReviewList)
    1) Foo test...


  0 passing (44ms)
  1 failing

  1) <ReviewList /> Foo test...:
     Invariant Violation: Could not find "client" in the context of "Apollo(ReviewList)". Wrap the root component in an
<ApolloProvider>
      at invariant (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\react-apollo\node_modules\invariant\invariant
.js:42:15)
      at new GraphQL (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\react-apollo\graphql.js:138:17)
      at D:\Outils dev\_projet_pycharm\tibco_react\node_modules\react\lib\ReactCompositeComponent.js:294:18
      at measureLifeCyclePerf (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\react\lib\ReactCompositeComponent.
js:74:12)
      at [object Object].ReactCompositeComponentMixin._constructComponentWithoutOwner (D:\Outils dev\_projet_pycharm\tib
co_react\node_modules\react\lib\ReactCompositeComponent.js:293:16)
      at [object Object].ReactCompositeComponentMixin.mountComponent (D:\Outils dev\_projet_pycharm\tibco_react\node_mod
ules\react\lib\ReactCompositeComponent.js:187:21)
      at Object.ReactReconciler.mountComponent (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\react\lib\ReactRe
conciler.js:47:35)
      at [object Object].ReactShallowRenderer._render (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\react\lib\
ReactTestUtils.js:402:21)
      at _batchedRender (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\react\lib\ReactTestUtils.js:383:12)
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\r
eact\lib\Transaction.js:138:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\reac
t\lib\ReactDefaultBatchingStrategy.js:63:19)
      at Object.batchedUpdates (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\react\lib\ReactUpdates.js:98:20)
      at [object Object].ReactShallowRenderer.render (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\react\lib\R
eactTestUtils.js:376:16)
      at [object Object].render (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\enzyme\build\react-compat.js:146
:39)
      at new ShallowWrapper (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\enzyme\build\ShallowWrapper.js:81:21
)
      at shallow (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\enzyme\build\shallow.js:21:10)
      at Context.<anonymous> (review-list.spec.js:52:21)
      at callFn (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\mocha\lib\runnable.js:315:21)
      at Test.Runnable.run (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\mocha\lib\runnable.js:308:7)
      at Runner.runTest (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\mocha\lib\runner.js:422:10)
      at D:\Outils dev\_projet_pycharm\tibco_react\node_modules\mocha\lib\runner.js:533:12
      at next (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\mocha\lib\runner.js:342:14)
      at D:\Outils dev\_projet_pycharm\tibco_react\node_modules\mocha\lib\runner.js:352:7
      at next (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\mocha\lib\runner.js:284:14)
      at Immediate._onImmediate (D:\Outils dev\_projet_pycharm\tibco_react\node_modules\mocha\lib\runner.js:320:5)



npm ERR! Test failed.  See above for more details.

Is there a way to disconnect this component just for unit test?

Answer 1

You should put your component into a "MockedProvider" in your unit tests.

<MockedProvider mocks={mocks} addTypename={false}>
  <ReviewList/>
</MockedProvider>

The mocks array here takes objects with specific GraphQL requests and their results.

const mocks = [
  {
    request: {
      query: GET_ALL_CODE_REVIEWS
    },
    result: {
      data: {
        [...put your data here],
      },
    },
  },
];

Here you can find more explanation.

Answer 2

First, you can separate the definition of your component from the wrapping of it in Apollo's graphql() HOC. Then, you can continue to export default the Apollo-ized component, but you can export the bare component as a named export:

export const ReviewList = React.createClass({
  // ...
});

export default graphql(allCodeReviews)(ReviewList);

...in your normal code, where you want it to be connected through Apollo, you'd continue to import the default like this:

import ReviewList from 'components/tibco/review-list/review-list';

...but in your unit test code, you'd used the named import like this:

import { ReviewList } from 'components/tibco/review-list/review-list';