lundi 20 novembre 2017

Cannot read property 'contextTypes' of undefined react tesing

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