reactjs / jest：无法使用 MockedProvider 用数据填充 react-apollo 组件？

Question

我编写了简单的 react-apollo 组件，它使用 graphql 查询从模式中检索数据。在执行组件上工作正常，但是，当我使用 jest 框架和 MockedProvider（即 react-apollo/test-utils 的组件）为这个组件编写测试用例时。我无法用数据填充组件。我在 MockedProvider 上参考过这篇文章：https://paradite.com/2017/11/16/test-react-apollo-components-enzyme-examples/

我的组件和测试脚本如下：

//MyComponent.js
import React, { Component } from "react";
import { gql, graphql, compose } from "react-apollo";

export class MyComp extends Component {

render() {
  console.log("data",this.props);
  return (
    <div>Hello  welcome {this.props.msg}
      {!this.props.data.loading && this.props.data.person.edges.map((person,i)=>(
        <p key={i}>{person.node.name}</p>
      )
    )}
    </div>
  );
 }
}

export const PERSON_QUERY = gql`query Info {
person{
 edges{
   node{
    id
    name
    __typename
   }
  __typename
 }
 __typename
 }
}`;

export default compose(graphql(PERSON_QUERY,{}))(MyComp);

//MyComponent.test.js

import React from 'react';
import { configure, mount } from 'enzyme';
import toJSON from 'enzyme-to-json';
import { MockedProvider } from 'react-apollo/test-utils';
import { addTypenameToDocument } from 'apollo-client';
import { gql, graphql, compose } from "react-apollo";
import MyComponent,{MyComp, PERSON_QUERY} from 'components/MyComponent';
import Adapter from 'enzyme-adapter-react-15';
import {store} from "stores/store";

configure({adapter: new Adapter()});

const data1 = {
  person: {
   edges: [
    {
      node: {
        id: "00000000-0002-972",
        name: "Magic Mad",
        __typename: "Person"
      },
      __typename: "PersonEdge"
    },
    {
      node: {
        id: "000-0001-972",
        name: "Donald Durm",
        __typename: "Person"
      },
      __typename: "PersonEdge"
    },
    {
      node: {
        id: "00-0000-fccd3",
        name: "Peter Hogwarts",
        __typename: "Person"
      },
      __typename: "PersonEdge"
    }
  ],
  __typename: "PersonConnection"
  }
};

describe("MockedProvider",()=>{
 test("Load with data",()=>{
  const wrap = mount(<MockedProvider mocks={[
   {
    request: {
      query: addTypenameToDocument(PERSON_QUERY)
    },
    result: { data: data1 }
   }
    ]}>
   <MyComponent msg={"2018"}/>
  </MockedProvider>);
 console.log("Mock",wrap.props());
 console.log("html",wrap.html());
 wrap.update();
});
});

Answer 1

这里是帖子的作者。

我可以很容易地看到一些问题：

result: { data: data2 }

data2 没有定义，我想你的意思是data1。

另外，你的模拟数据data1有一个data属性，这是错误的，因为结果对象已经有一个data属性，你应该从data1中删除它并直接暴露person属性：

const data1 = {
  person: {
   edges: [
    {
      node: {
        id: "00000000-0002-972",
        name: "Magic Mad",
        __typename: "Person"
      },
      __typename: "PersonEdge"
    },
    {
      node: {
        id: "000-0001-972",
        name: "Donald Durm",
        __typename: "Person"
      },
      __typename: "PersonEdge"
    },
    {
      node: {
        id: "00-0000-fccd3",
        name: "Peter Hogwarts",
        __typename: "Person"
      },
      __typename: "PersonEdge"
    }
  ],
  __typename: "PersonConnection"
  }
};

如果这仍然不能解决您的问题，您可能应该知道的另一件事是，您可以记录 wrap 变量以查看模拟并检查它们是否符合您的要求：

console.log(wrap);

你可以尝试从那里调试。