Enzyme: TypeError: Cannot read property 'contextTypes' of undefined

[footcandles]

I have installed enzyme with jest and running test cases as following

describe("Home", () => {
    it("should render correctly", () => {
        const component = shallow(<Home/>);
    });
});

error is:
● Home › should render correctly

TypeError: Cannot read property 'contextTypes' of undefined

   5 | describe("Home", () => {
   6 |     it("should render correctly", () => {
>  7 |         const component = shallow(<Home/>);
     |                           ^
   8 |     });
   9 |
  10 | });

  at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:633:54)
  at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:411:22)
  at shallow (node_modules/enzyme/src/shallow.js:10:10)
  at Object.it (src/home/Home.test.js:7:27)

[ljharb]

Are you sure Home isn’t undefined? What’s console.log(typeof Home) print out?

[catnuxer]

Hi Ijharb,
I'm not sure is the problem because connect with provider react-redux, and the component use connect(....)(Component), let say I used redux. But when I put pure html code, it's work

This one is success test case code & debugging with condition does not use Provider from react-redux

import * as React from 'react'
import { Provider } from 'react-redux'
import configureStore from '../store'
import { shallow, mount, render } from 'enzyme'
import Footer from '../component/Footer'
import { withStyles } from '@material-ui/core/styles'
const store = configureStore()

function setup() {
    const props = {
        showLoginButton: jest.fn(),
        setStateRegistration: jest.fn()
    }

    const wrapper = shallow(
        <div class='f_class' {...props}>
            <h1>Footer</h1>
            <span>Child link</span>
        </div>
    );

    return {
        props,
        wrapper
    }
}

describe('Footer', () => {
    console.log('Footer', Footer)
    it('shoudl render self and subcomponents', () => {
        const { wrapper } = setup()
        expect(wrapper.find('h1').text()).toEqual('Footer');
    })
})

PASS src/__test__/Footer.test.js
Footer
✓ shoudl render self and subcomponents (16ms)

console.log src/__test__/Footer.test.js:28
Footer { '$$typeof': Symbol(react.memo),
type: [Function: ConnectFunction],
compare: null,
WrappedComponent:
{ [Function: Footer]
propTypes:
{ showLoginButton: [Function: bound checkType],
setStateRegistration: [Function: bound checkType] } },
displayName: 'Connect(Footer)' }

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.927s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

This one is failed test case

import * as React from 'react'
import { Provider } from 'react-redux'
import configureStore from '../store'
import { shallow, mount, render } from 'enzyme'
import Footer from '../component/Footer'
import { withStyles } from '@material-ui/core/styles'
const store = configureStore()

function setup() {
    const props = {
        showLoginButton: jest.fn(),
        setStateRegistration: jest.fn()
    }

    const wrapper = shallow(
        <Provider store={store}>
            <Footer {...props} />
        </Provider>
    );

    return {
        props,
        wrapper
    }
}

describe('Footer', () => {
    console.log('Footer', Footer)
    it('shoudl render self and subcomponents', () => {
        const { wrapper } = setup()
        expect(wrapper.find('h1').text()).toEqual('Footer');
    })
})

console.log src/__test__/Footer.test.js:28
Footer { '$$typeof': Symbol(react.memo),
type: [Function: ConnectFunction],
compare: null,
WrappedComponent:
{ [Function: Footer]
propTypes:
{ showLoginButton: [Function: bound checkType],
setStateRegistration: [Function: bound checkType] } },
displayName: 'Connect(Footer)' }

FAIL src/__test__/Footer.test.js
Footer
✕ shoudl render self and subcomponents (54ms)

● Footer › shoudl render self and subcomponents

Method “text” is meant to be run on 1 node. 0 found instead.

  29 |     it('shoudl render self and subcomponents', () => {
  30 |         const { wrapper } = setup()
> 31 |         expect(wrapper.find('h1').text()).toEqual('Footer');
     |                                   ^
  32 |     })
  33 | })

  at ShallowWrapper.single (node_modules/enzyme/src/ShallowWrapper.js:1652:13)
  at ShallowWrapper.text (node_modules/enzyme/src/ShallowWrapper.js:1093:17)
  at Object.it (src/__test__/Footer.test.js:31:35)

Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 2.71s, estimated 3s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

[catnuxer]

Sorry after I back to test my component the problem is use

Are you sure Home isn’t undefined? What’s console.log(typeof Home) print out?

@Ijharb
I got the clue, it's because undefined the children of props doesn't exist. And got a reference from another one here https://github.com/enzymejs/enzyme/issues/1002#issuecomment-476516984

After all, doesn't have any issue

import * as React from 'react'
import { Provider } from 'react-redux'
import configureStore from '../store'
import Footer from '../component/Footer'
import { mount } from 'enzyme'

const reduxStore = configureStore()

/**
 * Test case footer component will show
 * login button or render footer it self
 * @param {Object} input 
 */
export const mountWithProvider = children => (store = reduxStore) => mount(
    <Provider store={store}>{children}</Provider>
)

/**
 * Test case footer component :
 * 1. Should render text footer if the props
 * showLoginButton equal false
 * 
 * 2. Shoudl render button login if the props
 * showLoginButton equal true
 */
describe('Footer', () => {

    // test case 1
    it('<Footer /> should render text Footer', () => {
        const props = {
            showLoginButton: false,
            hideLoginButtonRegistration: jest.fn()
        }
        const wrapper = mountWithProvider(<Footer {...props}/>)();
        expect (wrapper.exists()).toBe(true);
        expect (wrapper.find('h1').text()).toEqual('Footer');
    })

    // test case 2
    it('<Footer /> should render button login', () => {
        const props = {
            showLoginButton: true,
            hideLoginButtonRegistration: jest.fn()
        }
        const wrapper = mountWithProvider(<Footer {...props} />)();
        expect (wrapper.exists()).toBe(true);
        expect (wrapper.props().children.props.showLoginButton).toEqual(true);
        expect (wrapper.find(Footer).render().find('.MuiButton-label')).toBeTruthy();
    })
})

[ljharb]

@catnuxer so is your issue resolved? it's not very clear to me if it is or not. If not, let's please move all these comments to a new issue.

[catnuxer]

@ljharb Yes dude, its solve, you right its props undefined, so need to mountWithProvide in the first step. Ya I think this issued should closed, thanks.

[ljharb]

Closing pending more info from @hasannaqi9.

[zhenyu0519]

I have installed enzyme with jest and running test cases as following

describe("Home", () => {
    it("should render correctly", () => {
        const component = shallow(<Home/>);
    });
});

error is:
● Home › should render correctly

TypeError: Cannot read property 'contextTypes' of undefined

   5 | describe("Home", () => {
   6 |     it("should render correctly", () => {
>  7 |         const component = shallow(<Home/>);
     |                           ^
   8 |     });
   9 |
  10 | });

  at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:633:54)
  at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:411:22)
  at shallow (node_modules/enzyme/src/shallow.js:10:10)
  at Object.it (src/home/Home.test.js:7:27)

You need export your component properly, please check your component export. How do you export it?

[meirankri]

thks @zhenyu0519 i had a import { component} for a export default