Unit testing 用链路测试反应路由器

我正在做一个噩梦，为测试React路由器链路找到一个好的解决方案。它正在传递“正确渲染类别”，但是零链接正在通过测试，我尝试了很多不同的东西，但仍然一无所获

以下是我试图测试的内容：

组成部分

import React from 'react';
import { Link } from 'react-router';

class Categories extends React.Component {

constructor(props, context){
    super(props);
    context.router
}

render() {
    return (
        <nav className="categories">
          <ul>
              <li><Link to="devices">Devices</Link></li>
              <li><Link to="cases">Cases</Link></li>
              <li><Link to="layouts">Layouts</Link></li>
              <li><Link to="designs">Designs</Link></li>
          </ul>
        </nav>
    );
  }
}

Categories.contextTypes = {
 router: React.PropTypes.func.isRequired
};

export default Categories;

从“React”导入React；
从“反应路由器”导入{Link}；
类类别扩展了React.Component{
构造函数（道具、上下文）{
超级（道具）；
上下文路由器
}
render（）{
返回(

装置
案例
布局
设计

);
}
}
Categories.contextTypes={
路由器：React.PropTypes.func.isRequired
};
导出默认类别；

StubRouterContext

import React from 'react';
import objectAssign from 'object-assign';

var stubRouterContext = (Component, props, stubs) => {
function RouterStub() { }

objectAssign(RouterStub, {
  makePath () {},
  makeHref () {},
  transitionTo () {},
  replaceWith () {},
  goBack () {},
  getCurrentPath () {},
  getCurrentRoutes () {},
  getCurrentPathname () {},
  getCurrentParams () {},
  getCurrentQuery () {},
  isActive () {},
  getRouteAtDepth() {},
  setRouteComponentAtDepth() {}
 }, stubs)

return React.createClass({
childContextTypes: {
    router: React.PropTypes.func,
    routeDepth: React.PropTypes.number
},

getChildContext () {
    console.log('blah');
  return {
    router: RouterStub,
    routeDepth: 0
  };
},

render () {
  return <Component {...props} />
}
});
};

export default stubRouterContext;

从“React”导入React；
从“对象分配”导入对象分配；
var stubRouterContext=（组件、道具、存根）=>{
函数RouterStub（）{}
objectAssign（RouterStub{
makePath（）{}，
makeHref（）{}，
转换到（）{}，
替换为（）{}，
戈巴克（）{}，
getCurrentPath（）{}，
getCurrentRoutes（）{}，
getCurrentPathname（）{}，
getCurrentParams（）{}，
getCurrentQuery（）{}，
isActive（）{}，
getRouteAtDepth（）{}，
setRouteComponentAtDepth（）{}
}，存根）
返回React.createClass({
childContextTypes：{
路由器：React.PropTypes.func，
路由深度：React.PropTypes.number
},
getChildContext（）{
console.log（'blah'）；
返回{
路由器：RouterStub，
路由深度：0
};
},
渲染（）{
返回
}
});
};
导出默认的stubRouterContext；

组件测试

var expect = require('chai').expect;

var React = require('react/addons');
var Categories = require('../app/src/js/components/Categories.React.js');
var stubRouterContext = require('../test-utils/stubRouterContext.js');
var TestUtils = React.addons.TestUtils;

describe('Categories', function() {
  var categoriesWithContext = stubRouterContext(Categories);

  it('renders Categories properly', function() {
  var categories = TestUtils.renderIntoDocument(<categoriesWithContext />, {});
});

it('renders 4 links', function() {
  var catLinks = TestUtils.scryRenderedDOMComponentsWithTag(categoriesWithContext, 'a');
  expect(catLinks).to.have.length(4);
});
});

var expect=require（'chai'）。expect；
var React=require（'React/addons'）；
var Categories=require（'../app/src/js/components/Categories.React.js'）；
var stubRouterContext=require（'../test-utils/stubRouterContext.js'）；
var TestUtils=React.addons.TestUtils；
描述（'Categories'，function（））{
var categoriesWithContext=stubRouterContext（类别）；
它（'正确呈现类别'，函数（）{
var categories=TestUtils.renderIntoDocument（，{}）；
});
它（'呈现4个链接'，函数（）{
var catLinks=TestUtils.scryrrendereddomcomponentswithtag（categoriesWithContext，'a'）；
期望（catLinks）.to.have.length（4）；
});
});

我注意到的第一件事是，在第二次测试中没有重新呈现“categoriesWithContext”

it（'renders 4 links'，function（）{
var categories=TestUtils.renderIntoDocument（，{}）；
var catLinks=TestUtils.scryrenderdomcomponentswithtag（categories，'a'）；
期望（catLinks）.to.have.length（4）；
});

虽然我没有亲自运行您的代码，但我注意到的下一件事是您获取链接的方式。在我的测试中，我必须手动挖掘层次结构

试试这个

it（'renders 4 links'，function（）{
var categories=TestUtils.renderIntoDocument（，{}）；
var ul=TestUtils.findenderedomcomponentwithtag（类别“ul”）；
var lis=TestUtils.scryrenderdomponentswithtag（ul，'li'）；
lis.forEach（功能（li）{
//如果找不到，则应抛出此项
var a=TestUtils.findenderedomcomponentwithtag（li，'a'）；
//但是无论如何，写一个明确的期望
预期（a）；
});
});

我也有同样的问题。在最新版本的react router中，渲染链接元素不需要上下文，因此这不是问题。但是，如果您像我一样仍停留在API 1.0之前的版本上，那么stubRouterContext方法工作得很好

OP和我发现包装器呈现为空的唯一原因是使用了camelCase组件名

var categoriesWithContext=stubRouterContext（类别）变为
var CategoriesWithContext=stubRouterContext（Categories）

因此
var categories=TestUtils.renderIntoDocument（，{}）变成
var categories=TestUtils.renderIntoDocument（，{}）

对这种方法的解释如下-