apollo-mocknetworkinterface

apollo-mocknetworkinterface

Supports both Apollo 1 & Apollo 2

• Apollo 1: https://github.com/siteone/apollo-mocknetworkinterface/tree/v1.0.0
• Apollo 2: https://github.com/siteone/apollo-mocknetworkinterface/tree/v2.0.0

Installation

To install the stable version:

npm install --save apollo-mocknetworkinterface@^1.0

What is the purpose of the package?

Please read https://medium.com/p/ef0bbd17e686

Example

import React from 'react';
import { ApolloClient, ApolloProvider, graphql } from 'react-apollo';
import renderer from 'react-test-renderer';
import MockNetworkInterface from 'apollo-mocknetworkinterface';
import query from './query.graphql';

const TestComponent = (props) => {
  if (props.data.loading) {
    return (<div>loading ... {JSON.stringify(props)}</div>);
  }
  return (<div>got data ... {JSON.stringify(props)}</div>);
};
const TestComponentWithApollo = graphql(query, {
  options: props => ({
    variables: { url: props.url },
  }),
})(TestComponent);

const createResponse = (request) => { // pure function returning data
  console.log('creating mocked response for request:', request); // eslint-disable-line no-console
  // will log: creating mocked response for request: { query: { kind: 'Document' ...
  return {
    data: {
      component: {
        id: 1,
        name: 'foo',
      },
    },
  };
};
const mockedNetworkFetch = createMockedNetworkFetch(createResponse, { timeout: 100 }); // you can simulate network latency
const client = new ApolloClient({
  link: createHttpLink({ uri: 'http://localhost:3000', fetch: mockedNetworkFetch }),
  cache: new InMemoryCache(),
});

it('should render without exploding', (done) => {
  const component = renderer.create((
    <ApolloProvider client={client}>
      <div>
        <TestComponentWithApollo />
      </div>
    </ApolloProvider>
  ));
})