Eigenschaft 'contextTypes' von nicht definiertem Reagent-Router-Test kann nicht gelesen werden

Question

Ich möchte meine Funktion testen, mit der der Benutzeranmeldestatus überprüft wird. Aber ich bekomme immer die Fehler

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) 

Eigentlich habe ich createRouterContext eine gefälschte Requisiten zu bauen für reagieren-Router, und hoffen, dass die Änderung der this.props.history Eigenschaft zu testen, wenn die Seite geändert wurde. Hier ist die Funktion, mit der der Benutzeranmeldestatus überprüft wurde.

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

Und hier ist der aktuelle Testdatei I

erstellt

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

Habe ich etwas verpasst? Kann mir jemand helfen, dieses Testproblem zu lösen?

Answer 1

Da Ihr Test Komponente keine native react-router Komponente ist, sollten Sie auch eine statische contextTypes Eigenschaft, um es vor dem Test hinzufügen erklären, wie here erklärt:

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