테스트에서 FlowRouter 컨텍스트를 전달하는 방법 React 구성 요소

Question

5 개의 링크가있는 반응 구성 요소를 테스트하고 있습니다. 각 링크는 현재 경로를 기반으로 활성화됩니다. 나는이 성분들을 시험하기 위해 Mantra와 효소로 유성을 사용하고 있습니다.

바닥 글의 구성 요소 : 나는 npm test을 실행할 때

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); 
    }) 
}) 

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) 
     ) 
    } 

} 

테스트하지만, 그것은 FlowRouter is not defined.은 어떻게 테스트에서 반응 구성 요소에 FlowRouter 컨텍스트를 통과 않는 것을 말한다? 사전 만트라 규격을 준수하는 모든

Answer 1

첫째, 감사, 당신은이처럼 바닥 글의 구성 요소를 다시 작성해야합니다

import React from 'react'; 

const Footer = ({ route }) => (
    <a className={ 
    route == 'hub page' ? 'some-class active' : 'some-class' 
    }> ... (x5) 
); 

export default footer; 

가 이제 바닥 글을 테스트하기 위해, 당신은 지금 모든 FlowRouter 필요하지 않습니다 :

를

import { shallow } from 'enzyme'; 
import Footer from '../core/components/footer'; 

describe('footer',() => { 
    it('should have 5 links',() => { 
    const fooWrapper = shallow(<Footer route={'foo'}/>); 
    expect(fooWrapper.find('a')).to.have.length(5); 
    }) 
}) 

당신이 그것을 포장하는 Mantra container를 작성해야, 바닥 글 반응 적 FlowRouter.current()로 변경을 다시 렌더링 만들려면 컨테이너를 테스트하려면 다음과 같이 FlowRouter을 조롱 할 수 있습니다.

만트라 이후

it('should do something',() => { 
    const FlowRouter = { current:() => ({ route: { name: 'foo' } }) }; 

    const container = footerContainer({ FlowRouter }, otherArguments); 
    ... 
}) 

는 테스트를 실행하는 NPM 대신 practicalmeteor:mocha 또는 유사한 유성 패키지에서 직접 mocha 패키지를 사용하여 수행 할 수없는 부하 유성 패키지 (내 지식)과 같은 당신의 검사 결과에 kadira:flow-router있다.