使用Apollo的MockedProvider为什么组件的props不会被结果填充?

时间:2017-05-01 22:40:01

标签: reactjs graphql react-apollo apollo-client

根据this Gist的一些想法,我无法按预期进行组件测试。

除了props从未在响应中填充data之外,所有内容似乎都有效。

为什么这不符合我预期的原因?

这是我可以基于现有组件制作的最简单的现实示例:

// 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] } }

0 个答案:

没有答案