high performance solution for test apollo use enzym on react-native

package.json

{
  "jest": {
    "preset": "react-native",
    "snapshotSerializers": [
      "<rootDir>/node_modules/enzyme-to-json/serializer"
    ]
  }
}

react-apollo.js

/* eslint no-shadow: ["error", { "allow": ["client"] }] */

import React, { PropTypes } from 'react';
import { ApolloProvider, ApolloClient } from 'react-apollo';
import { mockNetworkInterface } from 'react-apollo/lib/test-utils';

export { mockNetworkInterface } from 'react-apollo/lib/test-utils';
export { addTypenameToDocument } from 'apollo-client';

export * from 'react-apollo';

export const query = jest.fn(() => Promise.resolve());
export const fetch = jest.fn(() => Promise.resolve());
export const client = {
  query: (...request) => query(...request),
  fetch: (...request) => fetch(...request),
};

export class MockedProvider extends React.Component {

  static propTypes = {
    client: PropTypes.shape(),
    store: PropTypes.shape(),
    mocks: PropTypes.arrayOf(PropTypes.shape()),
    children: PropTypes.node.isRequired,
  }

  static defaultProps = {
    client: null,
    store: null,
    mocks: [],
  }

  constructor(props, context) {
    super(props, context);

    const { client, mocks } = this.props;

    if (client) return;

    const networkInterface = mockNetworkInterface(...mocks);
    this.client = new ApolloClient({ networkInterface, addTypename: false });
  }

  render() {
    const { client, children, store } = this.props;

    return (
      <ApolloProvider client={this.client || client} store={store}>
        {children}
      </ApolloProvider>
    );
  }
}

team.test.js

import _ from 'lodash';
import React from 'react';
import { Text } from 'react-native';
import { MockedProvider } from 'react-apollo';
import { shallow, mount } from 'enzyme';
import MyTeam, { Component, query } from '../MyTeam';

_.assign(global, _.pick(jsdom.jsdom().defaultView, ['document', 'navigator']));

jest.useFakeTimers();

describe('My Teams page', () => {
  it('renders correctly', async () => {
    const data = {
      me: {
        maxTeams: 5,
        teams: _.map([{
          id: 1,
          title: 'My Team A',
          slogan: 'Saepe nesciunt magnam quasi necessitatibus qui quidem.',
        }, {
          id: 2,
          title: 'My Team B',
          slogan: 'Exercitationem aut cumque qui qui quia illum sint ut.',
        }, {
          id: 3,
          title: 'My Team C',
          slogan: 'Aliquid molestiae aut voluptas et cupiditate recusandae officiis occaecati.',
        }], (team) => ({
          ...team,
          approved: false,
          users: _.map([9, 10], (id) => ({ id, avator: '' })),
        })),
      },
    };

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

    jest.runOnlyPendingTimers();
    await new Promise(setImmediate);

    expect(wrapper).toMatchSnapshot();
    expect(wrapper.containsMatchingElement(<Text>你可以再成立或參加 2 個團</Text>)).toBe(true);
  });
});