1

モカ、jsdom チャイ、酵素で単体テストをしたいです。私はすでにいくつかの単体テストを行っており、うまく機能しています。

しかし、apollo store に接続されているコンポーネントが動作しません... エラーが発生しました。

これは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}/>
    );
  });
});

そして、これはコンポーネント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>
        )
      }
    }
    )
);

npm テストを実行すると、次のトレース ログが表示されます。

> 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.

単体テストのためだけにこのコンポーネントを切断する方法はありますか?

4

2 に答える 2

7

まず、コンポーネントの定義を Apollo のgraphql()HOC でのラッピングから分離できます。export default次に、 Apollo 化されたコンポーネントに進むことができますがexport、ベア コンポーネントを名前付きエクスポートとして行うことができます。

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

export default graphql(allCodeReviews)(ReviewList);

...通常のコードで、Apollo 経由で接続する場合は、次のようにデフォルトをインポートし続けます。

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

...しかし、単体テスト コードでは、次のように名前付きインポートを使用していました。

import { ReviewList } from 'components/tibco/review-list/review-list';
于 2016-12-12T22:41:22.877 に答える