Relay + React的测试策略

Question

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

基本上,我想沿着TDD实现这些目标,

1. 渲染容器并测试其内容,
2. 更改变量并测试其对内容的更改.

与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应用程序中的组件一样测试Relay容器.具体来说,我想确保它们为给定的状态和道具呈现正确的内容,并且他们调用方法来在适当的位置更改数据; 在Flux中,这是对动作创建者的调用,在Relay中,这是对Relay.Store.update或的调用this.props.relay.setVariables.

我的第一次尝试是RelayTestUtil用renderContainerIntoDocument方法构建一个对象.我根据它在很大程度上对https://github.com/facebook/relay/blob/master/src/tools/ 嘲笑 /RelayTestUtils.js,https://github.com/facebook/relay/blob/master/src/legacy/store/mocks /GraphQLStoreQueryResolver.js和Relay Container测试.这使用非常小的模拟,非常适合测试容器渲染,但对于测试数据更改完全没用.试图监视调用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();
});