Question

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

Here is my boilerplate project，但也许并不重要。我只想看一些反应路由单元测试工作示例。

Answer 1

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

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

编辑：回过头再看看你的样板，看到你的存根路由器是从同一个例子中借来的。抱歉。那么你到底在哪里被困？

EDIT-AGAIN：我没有使用Jest，所以这里是解决测试难题所需的其他部分：

如果您正在使用browserify，并且想要使用普通的摩卡测试（无需构建），那么您需要修改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";

然后，您可以通过存根路由器要求组件，并使用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

Answer 2

（在v4中可能是新的）这样做的方法是将您正在测试的组件包装在react-router提供的MemoryRouter中。

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

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

对“反应+反应路线”堆栈进行单元测试

2 个答案: