React-apollo: Black box integration testing of Apollo container

[tomitrescak]

Hi, do you have any hint on how can I do intergration testing for apollo containers?

I desire to test against live server.
I have set up everything I needed, my test:

1. spins of new server instance with graphql
2. initialises client apollo provider and then tries to mount the container within

The problem is that I only see the initial data, I do not know how to wait for data transfer to be complete. I tried very silly things, such as those below.

do you have any pointer on how can I wait for the completion of data transfer from apollo server?

// very lame code
const context = initContext();
      const component = (
        <ApolloProvider store={context.Store} client={apolloClient}>
          <NoficiationsContainer /> // my container which holds several queries
        </ApolloProvider>
      );

      //try {
      const wrapper = mount(component);
      const not = wrapper.find('Notifications');

      for (var i=0; i<100; i++) {
        if (not.prop('scheduleData').loading == false) break; // never happens
        await sleep(200);
      }

[stubailo]

Hmm, you could check for the loading state for all queries at once by iterating over store.getState().queries. That way you don't have to specify which components have queries on them.

[tomitrescak]

So you reckon that the approach with setTimeout and for loop is ok? Is it possible to hook on some promise in the store?

[stubailo]

You could do it on every store change perhaps!

const store = context.Store;
store.subscribe(() => {
  const queryIds = Object.keys(store.apollo.queries);
  if (queryIds.every(id => !store.apollo.queries[id].loading)) {
   console.log('done loading!!');
  }
});

[tomitrescak]

That's a great idea! Will explore. Thanks.
Meanwhile I'm getting a really weird error, do you have any idea where "fetch" is coming from?

try {
  const result = await apolloClient.query({
    query: gql`
  query Schedules {
    schedules {
      name
      description
    }
  }
`});
  console.log(result);
} catch (ex) {
  console.log(ex); // here I catch "networkError: [ReferenceError: fetch is not defined]"
}

exception

at new ApolloError (/Users/tomi/Github/apps/Clara-Apollo/node_modules/apollo-client/errors.js:14:22)
at /Users/tomi/Github/apps/Clara-Apollo/node_modules/apollo-client/QueryManager.js:131:39
at /Users/tomi/Github/apps/Clara-Apollo/node_modules/apollo-client/QueryManager.js:631:21
at Array.forEach (native)
at /Users/tomi/Github/apps/Clara-Apollo/node_modules/apollo-client/QueryManager.js:628:23
at /Users/tomi/Github/apps/Clara-Apollo/node_modules/lodash.forown/index.js:161:11
at baseForOwn (/Users/tomi/Github/apps/Clara-Apollo/node_modules/lodash.forown/index.js:122:20)
at forOwn (/Users/tomi/Github/apps/Clara-Apollo/node_modules/lodash.forown/index.js:447:20)
at QueryManager.broadcastQueries (/Users/tomi/Github/apps/Clara-Apollo/node_modules/apollo-client/QueryManager.js:627:9)
at QueryManager.broadcastNewStore (/Users/tomi/Github/apps/Clara-Apollo/node_modules/apollo-client/QueryManager.js:57:14)',​​​​​
​​​​​     message: 'Network error: fetch is not defined',​​​​​

[stubailo]

I'd prefer opening new issues for stuff like that, but if this is being run on the server you probably want to use isomorphic-fetch: https://github.com/matthew-andrews/isomorphic-fetch

[tomitrescak]

Sashko, yes, it is run on server, how can I plug it in into Apollo? I promise I'll open the new issue with my findings for future users.

[stubailo]

It's a global polyfill so you just need to install and import it, and it makes global fetch appear.

[tomitrescak]

Awesome! I'll soon put together a small giude for black box testing. Thanks a lot! Very much appreciated!

[carlows]

@tomitrescak did you ever put out that guide? I'm struggling trying to do integration testing with react-apollo, documentation isn't clear at all 🙁

[tomitrescak]

This has changes several times for me already. Currently am using apollo-test-tools. Check it out. Works like charm.

[Didericis]

@Carlows Not sure what version of apollo you're using, but apollo-test-tools doesn't work with 2.0, at least not when I tried it. I've just finished a blog post explaining how to do this type of testing against an imported schema with 2.0: http://blog.dideric.is/2018/03/18/Testing-apollo-containers/.