Стратегия тестирования Relay + React

В настоящее время я экспериментирую с React + Relay + Graphql. К сожалению, я не могу найти простой и удобный способ протестировать компонент React, упакованный в Relay Container.

В принципе, я хотел бы достичь этих целей по TDD,

Предоставить контейнер и проверить его содержимое,
Измените переменные и протестируйте их изменения в контенте.

По сравнению с React + Flux, React + Relay больше похож на черный ящик или декларативный.

Я вижу, как люди мошенничают Relay.createContainer, чтобы обходить Relay и просто тестировать React Component. Он не раскрывает часть реле и нет возможности управлять этой частью путем тестирования. https://github.com/facebook/relay/issues/161

Кроме того, я прочитал тестовые примеры Relay и действительно утомительно, чтобы сделать макет контейнера. https://github.com/facebook/relay/blob/master/src/tools/ mocks/RelayTestUtils.js

Я буду очень благодарен, если вы сможете поделиться своим решением.

Спасибо!

Ответ 1

Я пытаюсь протестировать контейнеры Relay, как я хотел бы использовать компоненты в приложении Flux. В частности, я хочу убедиться, что они отображают правильный контент для определенного состояния и реквизита и что они называют методы для изменения данных в соответствующих местах; в Flux это призыв к создателю действия, в Relay это вызов Relay.Store.update или this.props.relay.setVariables.

Моя первая попытка состояла в создании объекта RelayTestUtil с помощью метода renderContainerIntoDocument. Я основывал его на 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, и испытания контейнера реле. Это использовало очень минимальное издевательство и отлично справлялось с тестированием контейнеров, но было совершенно бесполезно для тестирования изменений данных. Попытка следить за вызовами Relay.Store.update и this.props.relay.setVariables, или издеваться над изменениями данных, стала больше проблем, чем стоило.

Я решил добавить __mocks__\react-relay.js, чтобы полностью издеваться над Relay и использовать более простую версию RelayTestUtils.renderContainerIntoDocument, чтобы внедрить свойства Relay в контейнер. Я не полностью удовлетворен этим решением, но, похоже, он работает сейчас.

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

Тесты выглядят примерно так: fragmentData соответствует форме ответа GraphQL:

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

Ответ 2

Я написал сообщение в блоге о том, как тестировать ретрансляцию с помощью Jest против рабочего сервера GraphQL: https://medium.com/entria/relay-integration-test-with-jest-71236fb36d44#.an74bdopy

Это repo https://github.com/sibelius/relay-integration-test содержит примеры тестирования реакции сети и реакции нативного с использованием Relay