Reactjs 如何使用react apollo组件进行单元测试？_Reactjs_Mocha.js_Graphql_Jsdom_React Apollo

Reactjs 如何使用react apollo组件进行单元测试？

reactjs graphql

Reactjs 如何使用react apollo组件进行单元测试？,reactjs,mocha.js,graphql,jsdom,react-apollo,Reactjs,Mocha.js,Graphql,Jsdom,React Apollo,我想用摩卡咖啡、jsdom柴和酶做单元测试。我已经做了一些单元测试，它们工作得很好然而，连接到阿波罗商店的组件不工作。。。我有个错误这是一个测试，组件连接到apollo store： import React from 'react'; import { expect } from 'chai'; import { shallow } from 'enzyme'; import sinon from 'sinon'; import ReviewList from '../../src/c

我想用摩卡咖啡、jsdom柴和酶做单元测试。我已经做了一些单元测试，它们工作得很好

然而，连接到阿波罗商店的组件不工作。。。我有个错误

这是一个测试，组件连接到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}/>
    );
  });
});

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>
        )
      }
    }
    )
);

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

从“React”导入React；
从“chai”导入{expect}；
从“酶”导入{shall}；
从“sinon”进口sinon；
从“../../src/components/tibco/review list/review list”导入ReviewList；
从“../../src/components/tibco/review list/NewReview”导入NewReview；
常数数据={
加载：false，
所有代码审查：{
边缘：{
节点：{
id:“Q29kZVJldmlld05vZGU6MQ=”，
参考号：4545，
评论员：“约翰”，
修订日期：“2016-11-25”，
redmineUrl:“http://url.4545.com",
流量：{
id:“Rmxvd05vZGU6MQ==”，
姓名：“富”
}
}
}
},
诱惑者：{
边缘：{
节点：{
用户名：“John”
}
}
},
所有流量：{
边缘：{
节点：{
姓名:"富",，
id:“Rmxvd05vZGU6MQ==”
}
}
}
};
var selectRowProp={
模式：“复选框”，
单击选择：true，
背景颜色：“rgb（238193213）”
};
描述（“”，（）=>{
它（'Foo test…'，（）=>{
常数包装=浅(
);
});
});

这是组件评审列表：

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

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> ) } } ) );

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

const ReviewList=graphql（allCodeReviews）（React.createClass({ 道具类型：{ 数据：PropTypes.shape({ 加载：需要PropTypes.bool.isRequired， allCodeReviews:PropTypes.object， allFlows:PropTypes.object，诱惑者：PropTypes.object }).需要 }, render（）{ if（this.props.data.load==true）{ 返回等待。。。 } 返回( ) } } ) );
当我运行npm测试时，我有以下跟踪日志：

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

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> ) } } ) );

> 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.
tibco-frontend@0.1.0测试D:\Outils dev\\u项目\u pycharm\tibco\u反应 >mocha——编译器js:babel register tests/index.js 警告：失败的上下文类型：“Apollo（ReviewList）”中未指定所需的上下文“store”。在《阿波罗》中（评论列表）警告：失败的上下文类型：“Apollo（ReviewList）”中未指定所需的上下文“client”。在《阿波罗》中（评论列表） 1） Foo测试。。。 0通过（44毫秒） 1失败 1） Foo测试…：不变冲突：在“Apollo（ReviewList）”上下文中找不到“client”。将根组件包装在 at不变量（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\react apollo\node\u modules\invariant\invariant .js:42:15）在新的GraphQL上（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\react apollo\GraphQL.js:138:17）位于D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\react\lib\ReactCompositeComponent.js:294:18 在measureLifeCyclePerf（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\react\lib\ReactCompositeComponent）。（js:74:12）在[object object].ReactCompositeComponentMixin.\u constructComponentWithoutOwner（D:\Outils dev\\u projet\u pycharm\tib co\u react\node\u modules\react\lib\ReactCompositeComponent.js:293:16）位于[object object].ReactCompositeComponentMixin.mountComponent（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u mod ules\react\lib\ReactCompositeComponent.js:187:21）在Object.ReactReconciler.mountComponent（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\react\lib\ReactRe 礼宾员：47:35）在[object object].reactShallowRender.\u render（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\react\lib\ reactestutils.js:402:21）在batchedRender（D:\Outils dev\\项目开发\项目魅力\ tibco\u react\node\u modules\react\lib\reactestutils.js:383:12）在ReactDefaultBatchingStrategyTransaction.Mixin.perform（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\r\n eact\lib\Transaction.js:138:20）在Object.ReactDefaultBatchingStrategy.BatchedUpdate（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\reac t\lib\ReactDefaultBatchingStrategy.js:63:19）在Object.batchedUpdate（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\react\lib\ReactUpdates.js:98:20）在[object object].ReactShallWrinder.render（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\react\lib\R eactestutils.js:376:16）在[object object].render（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\enzyme\build\react compat.js:146 :39) 在新ShallowRapper（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\enzyme\build\shallowRapper.js:81:21 ) 在浅层（D:\Outils dev\\项目开发\ pycharm\tibco\反应\节点\模块\酶\构建\浅层.js:21:10）在上下文中。（审查清单，规范js:52:21）在callFn（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\mocha\lib\runnable.js:315:21）在Test.Runnable.run（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\mocha\lib\Runnable.js:308:7）在Runner.runTest（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\mocha\lib\Runner.js:422:10）位于D:\Outils dev\\项目开发\项目管理\ tibco\u react\node\u modules\mocha\lib\runner.js:533:12 下一步（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\mocha\lib\runner.js:342:14）位于D:\Outils dev\\项目开发\项目管理\ tibco\反应\节点\模块\mocha\lib\runner.js:352:7 下一步（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\mocha\lib\runner.js:284:14）立即。立即（D:\Outils dev\\u projet\u pycharm\tibco\u react\node\u modules\mocha\lib\runner.js:320:5） npm错误！测试失败。请参见上文了解更多详细信息。
是否有方法仅为单元测试而断开此组件
首先，您可以在Apollo的
graphql（）
HOC中分离组件的定义和包装。然后，您可以继续导出Apollo-ized组件的默认值，但可以导出裸组件