根据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] } }