“react + react-route”堆栈的单元测试答案

【问题标题】：Unit testing on "react + react-route" stack“react + react-route”堆栈的单元测试
【发布时间】：2015-04-15 13:49:09
【问题描述】：

我已经阅读了许多关于如何通过 react-router 组件渲染路由的建议，但我仍然无法使其工作。我尝试使用 github 代码库搜索找到它，但仍然没有运气。在这一点上，我只需要一个工作示例。

Here is my boilerplate project，但也许这并不重要。我只是想看看一些 react-route 单元测试工作示例。

【问题讨论】：

你到底卡在哪里了？
检查我的，虽然我使用 alt 作为通量的通量实现，但 alt 可以引导 react-router 历史并将其映射到服务器上。 github.com/syarul/isoblog

标签： javascript unit-testing testing tdd reactjs

【解决方案1】：

找到super-secret hidden react-router testing guide后，我开始工作了。

我没有使用 Object.assign 创建路由器存根，而是使用 sinon.js，这样我可以创建更好的存根函数，为我的测试返回适当的值。

编辑：回去再次查看您的样板文件，发现您的存根路由器是从同一个示例中借用的。对不起。那么你到底卡在哪里了？

再次编辑：我没有使用 Jest，所以这里是解决测试难题所需的其他部分：

如果您使用的是 browserify，并且想在纯 mocha 中进行测试（无需构建），您需要破解 require 来为您编译 jsx：

    var fs = require("fs");
    var reactTools = require("react-tools");

    require.extensions[".jsx"] = function(module, filename) {
      var jsxContent = fs.readFileSync(filename).toString();
      var jsContent = reactTools.transform(jsxContent);
      return module._compile(jsContent, filename);
    };

你需要一个假的 DOM。 JSDOM 简直太糟糕了。我改用domino 让它工作。

    var domino = require("domino");

    global.window = domino.createWindow();
    global.document = global.window.document;

     //Set the NODE_ENV so we can call `render`.
     //Otherwise we get an error from react about server rendering. :(

    process.env.NODE_ENV = "test";

然后您可以通过 stub-router 请求您的组件，并使用 React.render() 将您的组件渲染到 DOM 节点：

      var MyComponent = fakeRouter(require("./MyComponent.jsx"));
      var component = React.render( 
        < MyComponent / > ,
        document.body
      );
      node = component.getDOMNode();
       //I used `zepto-node` and `chai-jq` to assert against my components

【讨论】：

【解决方案2】：

执行此操作的（可能是 v4 中的新功能）方法是将您正在测试的组件包装在 react-router 提供的 MemoryRouter 中。

import {MemoryRouter} from 'react-router-dom';
import {render} from 'react-dom';

render(<MemoryRouter>
  <YourComponent>
</MemoryRouter>, node, () => {});

【讨论】：