如何在测试React组件时传递FlowRouter上下文
问题描述:
我正在测试一个有5个链接的反应组件。每条链路根据当前路由变为活动状态。我使用Meteor和Mantra来测试这些组件。如何在测试React组件时传递FlowRouter上下文
页脚部分:
import React from 'react';
class Footer extends React.Component{
render(){
let route = FlowRouter.current().route.name;
return(
<a className={route == 'hub page' ? 'some-class active' : 'some-class'}> . . . (x5)
)
}
}
测试
describe {shallow} from 'enzyme';
import Footer from '../core/components/footer';
describe('footer',() => {
it('should have 5 links',() => {
const fooWrapper = shallow(<Footer/>);
expect(fooWrapper.find('a')).to.have.length(5);
})
})
但是当我运行npm test
,它说,FlowRouter is not defined.
如何通过FlowRouter上下文中测试一个反应成分?在此先感谢
答
首先,遵守咒规范,你应该重写你的页脚部分是这样的:
import React from 'react';
const Footer = ({ route }) => (
<a className={
route == 'hub page' ? 'some-class active' : 'some-class'
}> ... (x5)
);
export default footer;
现在来测试你的页脚,你现在不需要FlowRouter可言:
为了使页脚被动重新呈现为FlowRouter.current()
的变化,你需要创建一个Mantra container来包装它要测试的容器,你可以嘲笑FlowRouter这样的:
it('should do something',() => {
const FlowRouter = { current:() => ({ route: { name: 'foo' } }) };
const container = footerContainer({ FlowRouter }, otherArguments);
...
})
由于咒直接使用mocha
包从NPM而不是practicalmeteor:mocha
或类似流星包运行测试,你不能(据我所知)负载流星包,如kadira:flow-router
在你的测试。
谢谢你的回答。然而,我遇到了一个错误。它说'找不到模块meteor/kadira:流量路由器@Waiski – Cyval
@Cyval你运行'meteor add kadira:flow-router'吗? – Waiski
是的,我有。但它似乎并没有工作,当我使用'进口'@Waiski – Cyval