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();
});