Writing tests for React and Apollo - reactjs

Question

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

Answer 1

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