reactjs / jest : unable to populate react-apollo component with data using MockedProvider?

Question

I have written simple react-apollo component which uses graphql query to retrieve data from schema. On execution component works fine but, when I am writing test case for this component using jest framework together with MockedProvider(i.e. component of react-apollo/test-utils). I am unable to populate component with data. I had refered this article on MockedProvider: https://paradite.com/2017/11/16/test-react-apollo-components-enzyme-examples/

my component and test script is as below:

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

paradite · Accepted Answer · 2018-01-09 15:48:09Z

0

Author of the post here.

A number of issues that I can see quite easily:

result: { data: data2 }

where data2 is not defined, I think you mean data1.

Also, your mock data data1 has a data property, which is wrong, because the result object already has a data property, you should remove it from data1 and expose person property directly:

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

Another thing you should probably know, in case this still does not solve your issue, is that you can log the wrap variable to see the mocks and check if they match what you want:

console.log(wrap);

You can try to debug from there.

answered Jan 9, 2018 at 15:48

paradite

6,4464 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pramod Jadhav Over a year ago

yes , @paradite I mean data1, I had done with your suggested changes but still not getting mocked data as response

Pramod Jadhav Over a year ago

when I print html() of wrapper I get something like this: <div>Hello welcome 2018

Pramod Jadhav Over a year ago

But I want to get result like: <div>Hello welcome 2018<p>Marcus</p><p>Durms</p><p>Witchcraft</p></div>

paradite Over a year ago

your org.node.name is not even defined anyway. please make sure you don't have any syntax errors.

Pramod Jadhav Over a year ago

yes, it should be person.node.name. @paradite I had given try to apollo-mocknetworkinterface lib and my problem is solved. But I couldn't make it out with MockedProvider.

Collectives™ on Stack Overflow

reactjs / jest : unable to populate react-apollo component with data using MockedProvider?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related