반응 라우터를 효소로 테스트하는 방법

Question

효소 + 모카 + 차이이를 사용하여 반응 반응식 프로젝트를 테스트하고 있습니다. 효소는 구성 요소의 행동을 테스트하기 위해 얕은 역할을합니다. 하지만 라우터를 테스트 할 방법을 찾지 못했습니다. 나는 반응 라우터를 사용하고 다음과 같이

<Router history={browserHistory}> 
    ... 
     <Route path="nurse/authorization" component{NurseAuthorization}/> 
    ... 
    </Route> 

내가 nurse/authorization이 NurseAuthorization 구성 요소를 참조하십시오이 경로를 테스트 할. 어떻게 reactjs 프로젝트에서 그것을 테스트 할 수 있습니까?

EDIT1

나는 라우터 프레임 워크로 react-router을 사용하고 있습니다.

Answer 1

라우터를 구성 요소 안에 포장하여 테스트 할 수 있습니다.

Routes.jsx

export default props => (
    <Router history={browserHistory}> 
    ... 
    <Route path="nurse/authorization" component{NurseAuthorization}/> 
    ... 
    </Route> 
) 

하는 index.js 그런

import Routes from './Routes.jsx'; 
... 

ReactDOM.render(<Routes />, document.getElementById('root')); 

당신이 얕은에있는 당신의 Routes 구성 요소를 렌더링, 당신은을 확인하는 오브젝트 맵을 만들 수 있습니다 경로와 관련된 구성 요소 간의 일치도.

Routes.test.js

import { shallow } from 'enzyme'; 
import { Route } from 'react-router'; 
import Routes from './Routes.jsx'; 
import NurseAuthorization from './NurseAuthorization.jsx'; 

it('renders correct routes',() => { 
    const wrapper = shallow(<Routes />); 
    const pathMap = wrapper.find(Route).reduce((pathMap, route) => { 
    const routeProps = route.props(); 
    pathMap[routeProps.path] = routeProps.component; 
    return pathMap; 
    }, {}); 
    // { 'nurse/authorization' : NurseAuthorization, ... } 

    expect(pathMap['nurse/authorization']).toBe(NurseAuthorization); 
}); 

Answer 2

내 경로가 동적 라우터에 대한 또 다른 파일에 정의했다, 그래서 나는 또한 내가 경로로 렌더링하고 모든 경로 내 경로에 정의되어 있는지 테스트입니다 .js 상수 :

it('Routes should only have paths declared in src/routing/paths.js',() => { 
    const isDeclaredInPaths = (element, index, array) => { 
    return pathsDefined.indexOf(array[index]) >= 0; 
    } 
    expect(routesDefined.every(isDeclaredInPaths)).to.be.true; 
});