I want to test my function which is used to verify the user login status. But I always get the error
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)
Actually I used createRouterContext to build a fake props for react-routers, and hope to test the change of this.props.history property when the page was changed. Here is the function that used to verify the user login status.
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} />
}
}
}
And here is the current test file I created
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');
})
})
Did I miss anything? Can anyone help me solve this testing issue?
Aucun commentaire:
Enregistrer un commentaire