我梦a以求的是找到一个测试React Router链接的好的解决方案。它正在正确传递“渲染器类别”,但是零链接正在传递到测试,我尝试了很多不同的方法,但仍然无济于事。
以下是我要测试的内容:
零件
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;
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;
组件测试
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);
});
});
最佳答案
我有完全一样的问题。在最新版本的react-router中,您不需要上下文即可呈现链接元素,因此这不是问题。但是,如果您仍然停留在API 1.0之前的版本中,则stubRouterContext方法效果很好。
OP和我发现包装器显示为空的唯一原因是使用camelCase组件名称。var categoriesWithContext = stubRouterContext(Categories);
变为var CategoriesWithContext = stubRouterContext(Categories);
。
因此var categories = TestUtils.renderIntoDocument(<categoriesWithContext />,{});
变为var categories = TestUtils.renderIntoDocument(<CategoriesWithContext />,{});
。
此方法的说明在此处-https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad。
关于unit-testing - 使用链接测试React Router,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29624666/