reactjs - automotriz - relay modern

Prueba de estrategia en Relay+React

Question

Estoy experimentando con React + Relay + Graphql estos días. Desafortunadamente, no puedo encontrar una manera fácil y conveniente de probar el componente React envuelto por Relay Container.

Básicamente, me gustaría lograr estos objetivos a lo largo de TDD,

1. Renderiza un contenedor y prueba su contenido,
2. Cambia las variables y prueba sus cambios en el contenido.

Comparado con React + Flux, React + Relay es más como una caja negra o declarativa.

Puedo ver a gente simulando a Relay.createContainer para eludir Relay y simplemente probar React Component. Deja la parte del Relé sin cubrir y no hay forma de conducir esta parte mediante la prueba. https://github.com/facebook/relay/issues/161

Además, leí los casos de prueba de Relay y es realmente tedioso renderizar un contenedor simulado. https://github.com/facebook/relay/blob/master/src/tools/mocks/RelayTestUtils.js

Estaré realmente agradecido si puede compartir su solución.

¡Gracias!

Answer 1

Escribí una publicación en el blog sobre cómo probar Relay utilizando Jest contra un backend GraphQL que funciona: https://medium.com/entria/relay-integration-test-with-jest-71236fb36d44#.an74bdopy

Este repositorio https://github.com/sibelius/relay-integration-test contiene ejemplos de pruebas que reaccionan a la web y reaccionan de forma nativa utilizando Relay

Answer 2

He estado intentando probar los contenedores de retransmisión como lo haría con los componentes en una aplicación Flux. Específicamente, quiero asegurarme de que rindan el contenido correcto para un estado y accesorios determinados y que llaman a métodos para cambiar datos en lugares apropiados; en Flux, esto es una llamada a un creador de acción, en Relay es una llamada a Relay.Store.update o this.props.relay.setVariables .

Mi primer intento fue construir un objeto RelayTestUtil con un método renderContainerIntoDocument . Lo https://github.com/facebook/relay/blob/master/src/tools/mocks/RelayTestUtils.js fuertemente en 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 , y las pruebas de Relay Container. Esto utilizó una burla mínima y fue excelente para probar la representación del contenedor, pero fue completamente inútil para probar cambios de datos. Intentar espiar las llamadas a Relay.Store.update y this.props.relay.setVariables , o para this.props.relay.setVariables cambios en los datos, se convirtió en un problema mayor de lo que valía.

__mocks__/react-relay.js agregar __mocks__/react-relay.js para __mocks__/react-relay.js completamente Relay y usar una versión más simple de RelayTestUtils.renderContainerIntoDocument para inyectar las propiedades de Relay en un contenedor. No estoy completamente satisfecho con esta solución, pero parece funcionar por ahora.

__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;

Las pruebas se parecen a esto, donde fragmentData coincide con la forma de la respuesta GraphQL:

it(''changes items'', () => {
const myContainer = RelayTestUtils.renderContainerIntoDocument(
<MyContainer { ...fragmentData }/>,
{ variables: { itemId: ''asdf'' } }
);
myContainer.changeItem();
expect(myContainer.props.relay.setVariables).toBeCalled();
});