diff --git a/test/react-web/client/graphql/client-option.test.tsx b/test/react-web/client/graphql/client-option.test.tsx
new file mode 100644
index 0000000000..12add8c7db
--- /dev/null
+++ b/test/react-web/client/graphql/client-option.test.tsx
@@ -0,0 +1,81 @@
+///
+
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import * as ReactDOM from 'react-dom';
+import * as renderer from 'react-test-renderer';
+import { mount, shallow } from 'enzyme';
+import gql from 'graphql-tag';
+import ApolloClient, { ApolloError, ObservableQuery } from 'apollo-client';
+import { mockNetworkInterface } from '../../../../src/test-utils';
+import { ApolloProvider, graphql} from '../../../../src';
+
+describe('client option', () => {
+
+ it('renders with client from options', () => {
+ 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, addTypename: false });
+ const config = {
+ options: {
+ client,
+ }
+ };
+ const ContainerWithData = graphql(query, config)((props) => null);
+ shallow();
+ });
+
+ it('ignores client from context if client from options is present', (done) => {
+ const query = gql`query people { allPeople(first: 1) { people { name } } }`;
+ const dataProvider = { allPeople: { people: [ { name: 'Leia Organa Solo' } ] } };
+ const networkInterfaceProvider = mockNetworkInterface({ request: { query }, result: { data: dataProvider } });
+ const clientProvider = new ApolloClient({ networkInterface: networkInterfaceProvider, addTypename: false });
+ const dataOptions = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
+ const networkInterfaceOptions = mockNetworkInterface({ request: { query }, result: { data: dataOptions } });
+ const clientOptions = new ApolloClient({ networkInterface: networkInterfaceOptions, addTypename: false });
+
+ const config = {
+ options: {
+ client: clientOptions,
+ }
+ };
+
+ class Container extends React.Component {
+ componentWillReceiveProps({ data }) { // tslint:disable-line
+ expect(data.loading).toBe(false); // first data
+ expect(data.allPeople).toMatchObject({ people: [ { name: 'Luke Skywalker' } ] });
+ done();
+ }
+ render() {
+ return null;
+ }
+ };
+ const ContainerWithData = graphql(query, config)(Container);
+ renderer.create();
+
+ });
+ it('exposes refetch as part of the props api', (done) => {
+ const query = gql`query people($first: Int) { allPeople(first: $first) { people { name } } }`;
+ const variables = { first: 1 };
+ const data1 = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
+ const networkInterface = mockNetworkInterface(
+ { request: { query, variables }, result: { data: data1 } },
+ );
+ const client = new ApolloClient({ networkInterface, addTypename: false });
+
+ let hasRefetched, count = 0;
+ @graphql(query)
+ class Container extends React.Component {
+ componentWillReceiveProps({ data }) { // tslint:disable-line
+ expect(data.loading).toBe(false); // first data
+ done();
+ }
+ render() {
+ return null;
+ }
+ };
+
+ renderer.create();
+ });
+});