Tôi đã cố gắng kiểm tra các bộ chứa Relay giống như các thành phần trong ứng dụng Flux. Cụ thể, tôi muốn đảm bảo rằng chúng hiển thị đúng nội dung cho một trạng thái và đạo cụ nhất định và chúng gọi các phương thức để thay đổi dữ liệu ở những nơi thích hợp; trong thông tin này, đây là cuộc gọi tới người tạo hành động, trong Rơ-le, hãy gọi tới số Relay.Store.update hoặc this.props.relay.setVariables.
Nỗ lực đầu tiên của tôi là tạo đối tượng RelayTestUtil với phương thức renderContainerIntoDocument. Tôi dựa rất nhiều vào https://github.com/facebook/relay/blob/master/src/tools/mocks/RelayTestUtils.js, https://github.com/facebook/relay/blob/master/src/legacy/store/mocks/GraphQLStoreQueryResolver.js và kiểm tra Vùng chứa chuyển tiếp. Điều này sử dụng chế nhạo rất tối thiểu và rất tuyệt vời để thử nghiệm việc kết xuất vùng chứa nhưng hoàn toàn vô dụng khi kiểm tra các thay đổi dữ liệu. Cố gắng theo dõi các cuộc gọi đến Relay.Store.update và this.props.relay.setVariables hoặc để thay đổi dữ liệu giả tạo, trở nên rắc rối hơn so với giá trị.
Tôi đã quyết định thêm __mocks__\react-relay.js để hoàn toàn thử chuyển tiếp và sử dụng phiên bản đơn giản của RelayTestUtils.renderContainerIntoDocument để đưa thuộc tính Relay vào vùng chứa. Tôi không hoàn toàn hài lòng với giải pháp này, nhưng có vẻ như nó đang hoạt động.
__mocks__\react-relay.js:
var Relay = require.requireActual('react-relay');
var React = require('react');
module.exports = {
QL: Relay.QL,
Mutation: Relay.Mutation,
Route: Relay.Route,
Store: {
update: jest.genMockFn()
},
createContainer: (component, containerSpec) => {
const fragments = containerSpec.fragments || {};
// mock the static container methods
Object.assign(component, { getFragment: (fragmentName) => fragments[fragmentName] });
return component;
}
};
RelayTestUtils.js:
const React = require('react');
const ReactDOM = require('react-dom');
const RelayTestUtils = {
renderContainerIntoDocument(containerElement, relayOptions) {
relayOptions = relayOptions || {};
const relaySpec = {
forceFetch: jest.genMockFn(),
getPendingTransactions: jest.genMockFn().mockImplementation(() => relayOptions.pendingTransactions),
hasOptimisticUpdate: jest.genMockFn().mockImplementation(() => relayOptions.hasOptimisticUpdate),
route: relayOptions.route || { name: 'MockRoute', path: '/mock' },
setVariables: jest.genMockFn(),
variables: relayOptions.variables || {}
};
return ReactDOM.render(
React.cloneElement(containerElement, { relay: relaySpec }),
document.createElement('div')
);
}
};
export default RelayTestUtils;
thử nghiệm giống như thế này, nơi fragmentData phù hợp với hình dạng của các phản ứng GraphQL:
it('changes items',() => {
const myContainer = RelayTestUtils.renderContainerIntoDocument(
<MyContainer { ...fragmentData }/>,
{ variables: { itemId: 'asdf' } }
);
myContainer.changeItem();
expect(myContainer.props.relay.setVariables).toBeCalled();
});
Tôi nghĩ rằng đây là ý tưởng tốt nhất: http://stackoverflow.com/questions/38327428/integration-testing- của-relay-container-với-jest-chống-một-working-graphql-back –