정의되지 않은 반응 라우터 테스트의 'contextTypes'속성을 읽을 수 없습니다.

Question

사용자 로그인 상태를 확인하는 데 사용되는 기능을 테스트하고 싶습니다. 그러나 나는 항상 라우터 반응, 페이지가 변경되었을 때 this.props.history 속성의 변화를 테스트하는 희망에 대한

TypeError: Cannot read property 'contextTypes' of undefined 

     at createMountWrapper (node_modules/enzyme-adapter-utils/build/createMountWrapper.js:147:37) 
     at Object.render (node_modules/enzyme-adapter-react-15/build/ReactFifteenAdapter.js:159:88) 
     at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:98:16) 
     at mount (node_modules/enzyme/build/mount.js:19:10) 
     at renderedMount (src/hoc/AuthenticationHOC.test.js:20:32) 
     at Object.it (src/hoc/AuthenticationHOC.test.js:25:21) 
      at new Promise (<anonymous>) 
     at Promise.resolve.then.el (node_modules/p-map/index.js:46:16) 
      at <anonymous> 
     at process._tickCallback (internal/process/next_tick.js:188:7) 

는 사실 내가 가짜 소품을 구축하는 createRouterContext를 사용하는 오류가 발생합니다. 다음은 사용자 로그인 상태를 확인하는 데 사용되는 기능입니다. 여기

export function authenticationRequired(WrappedComponent) { 
    return class extends React.Component { 
    componentWillReceiveProps(nextProps) { 
     // if the user has no 'user_id' attribute, assume the user is logged out 
     if (!nextProps.user_id) { 
     this.props.history.replace('/login') 
     } 
    } 

    render() { 
     // return the given component as is 
     return <WrappedComponent {...this.props} /> 
    } 
    } 
} 

그리고

내가

import React from 'react' 
import { shallow, mount } from "enzyme" 
import { MemoryRouter, withRouter } from 'react-router-dom' 
import { authenticationRequired } from './AuthenticationHOC' 
import createRouterContext from 'react-router-test-context' 
import sinon from 'sinon' 

// dummy component to be wrapped during tests 
class WrappedComponent extends React.Component { 
    render() { 
    return <div>WrappedComponent</div> 
    } 
} 

describe('AuthenticationHOC',() => { 
    describe('authenticationRequired',() => { 
    let props; 
    const context = createRouterContext(); 
    const renderedMount =() => { 
     return mount(authenticationRequired(<WrappedComponent {...props} />), { context }) 
    } 
    const spy = sinon.spy(authenticationRequired(<WrappedComponent {...props} />).prototype, 'componentWillReceiveProps'); 

    it('renders the wrapped component',() => { 
     let wrapper = renderedMount() 
     expect(wrapper.contains(<WrappedComponent {...props} />)).toBe(true) 
    }) 

    describe("when user_id doesn't exist",() => { 
    beforeEach(() => { 
     props = { 
     user_id: '' 
     } 
    }); 
    it('should go to the login page',() => { 
     //how to test the method componentWillReceiveProps 
     let wrapper = renderedMount(); 
     wrapper.setProps({ 
     user_id: '' 
     }); 
     //expect(wrapper.instance().props().history).toBe(1) 
     expect(context.router.history.location.pathname).toBe('/login'); 
    }) 
    }) 

내가 놓친 게 있나

을 만들어 현재 테스트 파일입니다? 누구든지이 테스트 문제를 해결할 수 있습니까?

Answer 1

당신의 테스트 구성 요소가 here 설명 된대로 또한, 시험 전에에 고정 contextTypes 속성을 추가 선언해야 네이티브 react-router 구성 요소가 아니기 때문에 :

const context = createRouterContext(); 
const childContextTypes = { 
    router: React.PropTypes.object 
} 
const renderedMount =() => { 
    return mount(authenticationRequired(<WrappedComponent {...props} />), { context, childContextTypes }) 
} 

가