如何在測試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上下文

回答

相關問題