CODEWITHSUNDEEP
reactjsgraphqlapolloreact-apolloapollo-client
Adam
Adam

Reputation: 209

Writing tests for React and Apollo

I'm trying to write a unit test from React with Apollo.

I found an example from https://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead

When trying that out I’m getting an error:

Error:

Uncaught (in react-apollo) Error: Network error: No more mocked responses for the query: query people {
      allPeople(first: 1) {
        people {
          name
          __typename
        }
        __typename
      }
    }

Test:

it('executes a query', (done) => {

  const query = gql` query people { allPeople(first: 1) { people { name } } }`;
  const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
  const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
  const client = new ApolloClient({ networkInterface });

  const withGraphQL = graphql(query);

  class Container extends Component {
    componentWillReceiveProps(props) {
      expect(props.data.loading).to.be.false;
      expect(props.data.allPeople).to.deep.equal(data.allPeople);
      done();
    }
    render() {
      return null;
    }
  };

  const ContainerWithData = withGraphQL(Container);

  mount(<ApolloProvider client={client}><ContainerWithData /></ApolloProvider>);

});

Upvotes: 0

Views: 1484

Answers (1)

michauwilliam
michauwilliam

Reputation: 845

I know this is an old question, but maybe somebody gets here like I did :) These __typename fields were most likely your problem, the query ended up looking differently than the query you were passing to you mock interface. The error basically meant that it couldn't find any matching mocks for that query.

Anyway, here is a working example of this test, updated to work in Apollo 2.

it('executes a query', (done) => {
  const query = gql` query people { allPeople(first: 1) { people { name } } }`;
  const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };

  const withGraphQL = graphql(query);

  class Container extends React.Component {
    componentWillReceiveProps(props) {
      expect(props.data.loading).toBeFalsy();
      expect(props.data.error).toBeUndefined();
      expect(props.data.allPeople.people[0].name).toEqual(data.allPeople.people[0].name);
      done();
    }
    render() {
      return null;
    }
  };

  const ContainerWithData = withGraphQL(Container);

  mount(<MockedProvider removeTypename mocks={[ { request: { query },   result: { data } } ]}><ContainerWithData /></MockedProvider>);

});

Upvotes: 1

Related Questions