Using Apollo's MockedProvider why don't the component's props get populated with result?

问题

Following some ideas from this Gist, I am unable to get a component test to work as expected.

Everything seems to work except the props never get populated with the data from the response.

Any reason why this isn't working as I expect it to?

Here is the simplest real-world example I could make based on an existing component:

// test-component.js
import React from 'react';
import { graphql } from 'react-apollo';
import userQuery from './userQuery.graphql';

function TestComponent (props) {
    console.log('props from component', props); // eslint-disable-line
    return <div>The component...</div>;
}

export default graphql(userQuery)(TestComponent);

// userQuery.graphql
query userQuery {
    user {
        items {
            firstName
            id
            lastName
        }
    }
}

// test-component-test.js
import React from 'react';
import { MockedProvider } from 'react-apollo/lib/test-utils';
import { mount } from 'enzyme';
import toJson from 'enzyme-to-json';
import userQuery from '../userQuery.graphql';
import { TestComponent } from '../';

const mockedData = {
    user: {
        items: [
            {
                firstName: 'userF',
                id: 'hhhh-gggg-iiii',
                lastName: 'userL',
            }
        ]
    }
};

describe('<TestComponent />', () => {
    describe('Markup should stay consistent', () => {
        const component = (
            <MockedProvider
                mocks={[
                    {
                        request: {
                            query: userQuery
                        },
                        result: { data: mockedData }
                    },
                ]}
                store={{
                    getState: () => {},
                    dispatch: () => {},
                    subscribe: () => {},
                }}
            >
                <TestComponent />
            </MockedProvider>
        );

        const mountedComponent = mount(component);

        it('should not have any changes without a new snapshot', () => {
            const tree = toJson(mountedComponent);
            expect(tree).toMatchSnapshot();
        });
    });
});

// console.log output during lifecycle
props from component { data:
 { variables: { offset: null, limit: null },
   refetch: [Function: bound ],
   fetchMore: [Function: bound ],
   updateQuery: [Function: bound ],
   startPolling: [Function: bound ],
   stopPolling: [Function: bound ],
   subscribeToMore: [Function: bound ],
   loading: true,
   networkStatus: 1,
   error: [Getter] } }

props from component { data:
 { variables: { offset: null, limit: null },
   refetch: [Function: bound ],
   fetchMore: [Function: bound ],
   updateQuery: [Function: bound ],
   startPolling: [Function: bound ],
   stopPolling: [Function: bound ],
   subscribeToMore: [Function: bound ],
   loading: false,
   networkStatus: 8,
   error: [Getter] } }

来源：https://stackoverflow.com/questions/43727517/using-apollos-mockedprovider-why-dont-the-components-props-get-populated-with

标签

reactjs

graphql

react-apollo

apollo-client