Unit testing 如何用笑话测试React路由器？

我无法成功地使用

上下文进行测试。我正在使用


反应0.13.3
反应路由器0.13.3
笑话0.3.0
节点0.10.33

并尝试了以下方法：





有明确的例子吗？

中提到的（不使用Jest）的所有链接现在都已断开。当我能够查看该指南时，它只提供了上面列出的第一个链接以外的任何信息。
不确定这是否是您要查找的内容，但我通过创建一个帮助函数来解决这个问题，我在为依赖于路由器状态的组件编写jest测试时使用了该函数

//router-test-helper
var Router = require('react-router'),
    Route = Router.Route,
    TestLocation = require('react-router/lib/locations/TestLocation');

module.exports = function(React){
    TestUtils = React.addons.TestUtils;
    return {
        getRouterComponent: function(targetComponent, mockProps) {
            var component,
                div = document.createElement('div'),
                routes = [
                    React.createFactory(Route)({
                        name: '/',
                        handler: targetComponent
                    })
                ];

            location = new TestLocation('/');
            Router.run(routes, location, function (Handler) {
                var mainComponent = React.render(React.createFactory(Handler)(mockProps), div);
                component = TestUtils.findRenderedComponentWithType(mainComponent, targetComponent);
            });
            return component;
        }
    };
};

所有这些都不是我自己写的，我想大部分都是从你链接到的那本已经不存在的指南中提取出来的。如果我没记错的话。。。已经有一段时间了

在你有了这些之后，你可以在你的测试中使用这些

//test-example
jest.dontMock('../src/js/someComponent');
var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var routerHelper = require('../router-test-helper')(React);
var SomeComponent = require('../srcs/js/someComponent');

describe('Some Component', function(){
    it('should be testable', function(){
        var mockProps = {}; 
        var renderedComponent = routerHelper.getRouterComponent(SomeComponent, mockProps);
        // Test your component as usual from here.....
        ///////////////////////////////////////////////

        var inputs = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, 'input');
        //blah blah blah
    });
});

这假设在未修改的模块路径中有React和helper

如果你真的试图测试特定于某些路线的东西，或者在路线之间转换。。。我不确定这是否是一个好方法。可能最好使用更完整的测试-y，比如硒或其他东西。。也。。。一旦react路由器的1.0面世，这可能就行不通了。但测试“反应方式”（tm）可能更容易，因为所有的路由内容都将通过道具处理。至少这是我从书中读到的印象
 给那些碰巧遇到这个问题的人。
下面是我为上下文相关组件完成的设置（当然，为了简单起见，将其剥离）：

//dontmock.config.js包含jest.dontmock（'components/Breadcrumbs'）
//为避免进口操作人员的吊装问题，导致
//要忽略的jest.dontMock（）
从“dontmock.config.js”导入dontmock；
从“React”导入React；
从“react Router”导入{Router，createMemoryHistory}；
从“react addons test utils”导入TestUtils；
从“组件/面包屑”导入面包屑；
//创建要在非浏览器环境中使用的历史对象
const history=createMemoryHistory（“/products/product/12”）；
//设置路由配置。
//JSX也可以工作，但通过这种方式，指定自定义
//管线属性（排除、本地化标签等）。
常数路由=[{
路径：“/”，
组件：React.createClass({
render（）{return{this.props.children}；}
}),
儿童路线：[{
路径：“产品”，
组件：React.createClass({
render（）{return{this.props.children}；}
}),
儿童路线：[{
路径：“产品/：id”，
组件：React.createClass({
//使用上下文路由道具或任何其他需要的东西渲染组件
//如果需要测试不同的属性组合，请设置单独的路由配置。
render（）{return；}
}),
儿童路线：[]
}]
}]
}];
描述（“面包屑组件测试套件：”，（）=>{
beforeach（函数（）{
//使用指定路由上可用的面包屑呈现整个路由配置
this.component=TestUtils.renderIntoDocument（）；
this.componentNode=ReactDOM.findDOMNode（this.component）；
this.breadcrumbNode=ReactDOM.findDOMNode（this.component.querySelector（“.breadcrumbs”）；
});
它（“应该定义”，函数（）{
期望（this.breadcrumbNode）.toBeDefined（）；
});
/**
*现在测试你需要的任何东西
*/
谢谢，@ericf89。我利用你的建议走得更远了一些，但遇到了一些嘲弄的问题。在我继续之前，我意识到我不需要使用“上下文”我的错误是在v0.13.3标签上浏览GitHub存储库。我没有看到更新的升级指南，而是按照更新的指南进行操作。再次感谢您的帮助。现在可以在
// dontmock.config.js contains jest.dontMock('components/Breadcrumbs')
// to avoid issue with hoisting of import operators, which causes 
// jest.dontMock() to be ignored

import dontmock from 'dontmock.config.js';
import React from "react";
import { Router, createMemoryHistory } from "react-router";
import TestUtils from "react-addons-test-utils";

import Breadcrumbs from "components/Breadcrumbs";

// Create history object to operate with in non-browser environment
const history = createMemoryHistory("/products/product/12");

// Setup routes configuration.
// JSX would also work, but this way it's more convenient to specify custom 
// route properties (excludes, localized labels, etc..).
const routes = [{
  path: "/",
  component: React.createClass({
    render() { return <div>{this.props.children}</div>; }
  }),
  childRoutes: [{
    path: "products",
    component: React.createClass({
      render() { return <div>{this.props.children}</div>; }
    }),
    childRoutes: [{
      path: "product/:id",
      component: React.createClass({
        // Render your component with contextual route props or anything else you need
        // If you need to test different combinations of properties, then setup a separate route configuration.
        render() { return <Breadcrumbs routes={this.props.routes} />; }
      }),
      childRoutes: []
    }]
  }]
}];

describe("Breadcrumbs component test suite:", () => {
  beforeEach(function() {
    // Render the entire route configuration with Breadcrumbs available on a specified route
    this.component = TestUtils.renderIntoDocument(<Router routes={routes} history={history} />);
    this.componentNode = ReactDOM.findDOMNode(this.component);
    this.breadcrumbNode = ReactDOM.findDOMNode(this.component).querySelector(".breadcrumbs");
  });

  it("should be defined", function() {
    expect(this.breadcrumbNode).toBeDefined();
  });

  /**
   * Now test whatever you need to
   */