Question

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

基本上，我想沿着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

如果你能与我分享解决方案，我将非常感激。

谢谢！

Answer 1

我一直在尝试像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();
});

Answer 2

我写了一篇关于如何使用Jest针对正在运行的GraphQL后端测试Relay的博客文章：https://medium.com/entria/relay-integration-test-with-jest-71236fb36d44#.an74bdopy

此repo https://github.com/sibelius/relay-integration-test包含测试反应网并使用Relay

进行原生反应的示例

Relay + React的测试策略

2 个答案: