React-apollo: Error: "No more mocked responses for the query" when using 'cache-and-network'

[carlows]

I'm trying to do testing of the Apollo-client containers that wrap my components, but I got into this issue that I think it might be a bug.

Intended outcome:

Using fetchPolicy: 'cache-and-network' seems to be causing an issue the mockNetworkInterface:

export default graphql(PublicationsQuery, {
  options: () => ({
    fetchPolicy: 'cache-and-network',
    pollInterval: 20000
  })
})(PublicationList);

This is how i'm setting up my mock queries:

const queryMocks = [
  {
    request: {
      query: UserProfileQuery,
      variables: {}
    },
    result: {
      data: {
        current_user: UserMock
      }
    }
  },
  {
    request: {
      query: PublicationsQuery
    },
    result: {
      data: {
        publications: {
          edges: [
            {
              node: {
                 id: 123,
                 title: 'Hello!',
                 description: 'Hello World!',
                 amount: 100,
                 currency: 'BTC'
              }
            }
          ]
        }
      }
    }
  }
];

This is how I'm setting up the mockNetworkInterface:

const setupTests = () => {
  const networkInterface = mockNetworkInterface.apply(null, queryMocks);
  const client = new ApolloClient({ networkInterface, addTypename: false });

  const store = setupStore(jest.fn());
  const wrapper = mount(
    <ApolloProvider client={client} store={store}>
      <MemoryRouter initialEntries={['/profile']} initialIndex={1}>
        <App />
      </MemoryRouter>
    </ApolloProvider>
  );

  return {
    store,
    wrapper
  };
};

And a test:

  test('Profile view should render User details', done => {
    const { wrapper, store } = setupTests();

    const btn = wrapper.find("a[href='/profile']");

    btn.simulate('click', { button: 0 });

    setTimeout(() => {
      const tag = wrapper.find('.profile-username');
      console.log(tag.debug());
      expect(tag.text()).toEqual('Foo Bar');
      done();
    }, 10);
  });

The PublicationsQuery query looks like this:

export const PublicationsQuery = gql`
  query allPublications {
    publications {
      edges {
        node {
          id
          title
          description
          amount
          currency
        }
      }
    }
  }
`;

What I expect is that the mockNetworkInterface uses my mocked query.

Actual outcome:

Instead, I'm getting this error:

Error: Network error: No more mocked responses for the query: query allPublications {
  publications {
    edges {
      node {
        id
        title
        description
        amount
        currency
      }
    }
  }
}

This is only happening with the publications query when I set the fetch policy to 'cache-and-network', if I set it to 'cache' I see the mocked data in my tests when running tag.debug();.

It isn't happening with the UserProfileQuery even with 'cache-and-network', so I think this is an unexpected behaviour.

How to reproduce the issue:

I haven't had the time to use the template provided for issues, but the code I posted above can be run from this repo: https://github.com/Carlows/localbitcoins-apollo

You will see a failing test on profile.js when running yarn test. If you change the fetchPolicy at the bottom of PublicationList.js the test should be passing.

You can check how the redux store is being setup here: https://github.com/Carlows/localbitcoins-apollo/blob/master/src/store.js

Version

• [email protected]
• [email protected]

[TheMightyPenguin]

Hey I'm also developing an app with apollo and been having issues with testing aswell, I'm not really sure how should I write integrations tests, I think the apollo docs for testing could be improved a lot

[carlows]

Besides this, there are a couple of things that concern me:

1. My redux store is creating a different client (not mocked) than in my tests, how would you use the same store here https://github.com/Carlows/localbitcoins-apollo/blob/master/src/store.js?
2. Documentation for testing is unexistent, there aren't any resources for this, I've had to get into the react-apollo tests to see any possible approaches, but nothing is clear.
3. Is there a better way to wait for the component to have the data available? right now I'm using setTimeout, but I don't like that at all

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as no recent activyt. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to React Apollo!