Relay + React的测试策略

Question

这几天我正在尝试React + Relay + Graphql。不幸的是，我找不到任何简单方便的方法来测试由Relay Container包装的React组件。

基本上，我希望通过TDD来实现这些目标，

1. 呈现容器并测试其内容，
2. 更改变量并测试其对内容的更改。

与React + Flux相比，React + Relay更像是黑盒，或者说是声明性的。

我可以看到人们模仿Relay.createContainer来绕过中继，而仅仅是测试React组件。它没有覆盖继电器部分，也没有办法通过测试来驱动这一部分。https://github.com/facebook/relay/issues/161

此外，我通读了Relay的测试用例，呈现一个模拟容器真的很乏味。https://github.com/facebook/relay/blob/master/src/tools//RelayTestUtils.js

如果你能分享你的解决方案，我将不胜感激。

谢谢!

Answer 1

我一直在尝试测试Relay容器，就像测试Flux应用程序中的组件一样。具体地说，我希望确保它们为给定的状态和属性呈现正确的内容，并且它们调用方法在适当的位置更改数据；在Flux中，这是对操作创建者的调用，在Relay中，这是对Relay.Store.update或this.props.relay.setVariables的调用。

我的第一个尝试是使用renderContainerIntoDocument方法构建一个RelayTestUtil对象。我在很大程度上基于https://github.com/facebook/relay/blob/master/src/tools//RelayTestUtils.js、https://github.com/facebook/relay/blob/master/src/legacy/store//GraphQLStoreQueryResolver.js和中继容器测试。这使用了非常少的模拟，对于测试容器渲染非常有用，但对于测试数据更改完全没有用。试图监视对Relay.Store.update和this.props.relay.setVariables的调用，或者模拟数据更改，变得比它值得的麻烦更多。

我决定将__mocks__\react-relay.js添加到完全模拟的中继中，并使用简单版本的RelayTestUtils.renderContainerIntoDocument将中继属性注入到容器中。我对这个解决方案并不完全满意，但目前它似乎是有效的。

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

Answer 2

我写了一篇关于如何使用Jest在一个工作的GraphQL后端上测试中继的博客：https://medium.com/entria/relay-integration-test-with-jest-71236fb36d44#.an74bdopy

此repo https://github.com/sibelius/relay-integration-test包含使用中继测试react web和react本机的示例