如何在测试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上下文中测试一个反应成分？在此先感谢

来源

2016-08-12 Cyval

首先，遵守咒规范，你应该重写你的页脚部分是这样的：

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在你的测试。

来源

2016-08-12 10:48:38 Waiski

谢谢你的回答。然而，我遇到了一个错误。它说'找不到模块meteor/kadira：流量路由器@Waiski – Cyval

@Cyval你运行'meteor add kadira：flow-router'吗？ – Waiski

是的，我有。但它似乎并没有工作，当我使用'进口'@Waiski – Cyval

如何在测试React组件时传递FlowRouter上下文

回答

相关问题