Reactjs 继电器测试策略&x2B；反应

这几天我在试验React+Relay+Graphql。不幸的是，我找不到任何简单方便的方法来测试继电器容器包装的React组件

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

渲染容器并测试其内容

更改变量并在内容上测试其更改

与React+Flux相比，React+Relay更像是一个黑匣子，或者说是声明性的

我可以看到人们模拟Relay.createContainer来绕过继电器，只测试React组件。它使继电器部件裸露，无法通过测试驱动该部件。

此外，我还通读了继电器的测试用例，渲染一个模拟容器非常繁琐。

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

---

谢谢

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

Relay.Store.update

或

this.props.Relay.setVariables

的调用

我的第一次尝试是使用

renderContainerIntoDocument

方法构建一个

relayestutil

对象。我主要基于，和中继容器测试。这使用了非常少的模拟，对于测试容器渲染非常有用，但对于测试数据更改完全没有用处。试图监视对

Relay.Store.update

和

this.props.Relay.setVariables

的调用，或模拟数据更改，变得非常麻烦

我决定添加

\uuumocks\uuureact relay.js

以完全模拟中继，并使用更简单版本的

RelayTestUtils.renderContainerIntoDocument

将中继属性注入容器。我对这个解决方案并不完全满意，但它目前似乎有效

\uuuu mocks\uuuu\react relay.js

：

var继电器=require.requireActual（'react-Relay'）；
var React=要求（'React'）；
module.exports={
QL:Relay.QL，
突变：接力，突变，
路线：接力，路线，
商店：{
更新：jest.genMockFn（）
},
createContainer：（组件，containerSpec）=>{
const fragments=containerSpec.fragments | |{}；
//模拟静态容器方法
assign（组件，{getFragment：（fragmentName）=>fragments[fragmentName]}）；
返回组件；
}
};

RelayTestUtils.js

：

const React=require（'React'）；
const ReactDOM=require（'react-dom'）；
常数相对单位={
RenderContainerToDocument（容器元素、中继选项）{
relayOptions=relayOptions | |{}；
常数relaySpec={
forceFetch:jest.genMockFn（），
getPendingTransactions:jest.genMockFn（）.mockImplementation（（）=>relayOptions.pendingTransactions），
hasOptimisticUpdate:jest.genMockFn（）.mockImplementation（（）=>relayOptions.hasOptimisticUpdate），
路由：relayOptions.route | |{name:'MockRoute'，path:'/mock'}，
setVariables:jest.genMockFn（），
变量：relayOptions.variables | |{}
};
返回ReactDOM.render(
React.cloneElement（containerElement，{relay:relaySpec}），
document.createElement（'div'）
);
}
};
导出默认关系语句；

测试看起来像这样，其中

fragmentData

匹配GraphQL响应的形状：

it（'changes items'，（）=>{
const myContainer=relayestutils.renderContainerIntoDocument(
, 
{变量：{itemId:'asdf'}}
);
myContainer.changeItem（）；
expect（myContainer.props.relay.setVariables）.toBeCalled（）；
});

我写了一篇博客文章，介绍了如何在工作的GraphQL后端上使用Jest测试中继：

---

此repo包含使用中继测试react web和react native的示例

是否也可以“模拟”网络层？与invoker（）类似，relay实际上可以发送查询，但它不会与服务器对话，而是返回模拟数据。@agrauch，你能提供一个例子吗？我认为这是最好的主意：