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

Posted 2023-02-21

【中文标题】reactjs / jest：无法使用 MockedProvider 用数据填充 react-apollo 组件？

【英文标题】：reactjs / jest : unable to populate react-apollo component with data using MockedProvider?

【发布时间】：2018-06-17 02:01:49

【问题描述】：

我编写了简单的 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();
);
);

【参考方案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);

你可以尝试从那里调试。

【讨论】：

是的，@paradite 我的意思是 data1，我已经完成了你建议的更改，但仍然没有得到模拟数据作为响应

当我打印包装器的 html() 时，我得到如下信息： Hello welcome 2018

但我想得到如下结果： Hello Welcome 2018

你的org.node.name 无论如何都没有定义。请确保您没有任何语法错误。

是的，应该是person.node.name。 @paradite 我尝试了 apollo-mocknetworkinterface lib，我的问题得到了解决。但我无法使用 MockedProvider。