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

[emptyOne322]

Hi, I added enzyme into my test and tried to do some simple test
describe('Component: SliderField', () =>{

const minProps = {
    input: {
        name:"name",
        value:0,
        onChange: ()=>{},
        meta: {

        },
        min: 0,
        max: 100
    },
};

it('renders', () => {
    const wrapper = shallow(<SliderField {...minProps}/>)
    expect(wrapper.length).toEqual(1);
});

})
but it returned TypeError: Cannot read property "contextTypes" of undefined. I'm using mocha, webpack to build tests and webpack-dev-server to runing them in browser . So can someone help me or give some advices what can be wrong here?

[blainekasten]

I'm guessing your SliderField is expecting some context to be defined on it. You can pass context into a renderer via the second argument. See the documentation here: https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md#shallownode-options--shallowwrapper

shallow(<SliderField {...minProps} />, { context: {...} });

[blainekasten]

I'm going to close this out as it is not an issue with Enzyme itself. Feel free to keep discussing though if you need more support.

[emptyOne322]

So can u give me qiuck explanation what context should be like?

[jskeate]

Going to leave a note here in case others come across this issue in a search. This error seems to happen if you
import {Component} from '<path>';
when you should have
import Component from '<path>';

[ljharb]

If you use eslint-plugin-import (which the airbnb eslint config uses) then you'd get a linting error if you imported the wrong thing ;-)

[jskeate]

import/named and import/default are off in the airbnb eslint config, it seems.

[ljharb]

Touché :-) they'll be turned on eventually.

[ruthmpardee]

Thank you so much @jskeate that saved me so much time

[docunext]

Ja! Thank you @jskeate - much appreciated.

[AKNiazi]

@jskeate Thanks.

[lucasdeassis]

@jskeate some heroes don't use cape!

[luciomartinez]

In my case was similar but the error was on trying to access the wrapped component when it wasn't wrapped at all.

To make the point even clearer, test for components using the connect() HOC looks like this:

import _MyComponent from './MyComponent';
const MyComponent = _MyComponent.WrappedComponent;
// then used such as <MyComponent ...props />

This time the tested component was not using the HOC and not wrapped. So I changed the usage to be:

import MyComponent from './MyComponent';
// then used such as <MyComponent ...props />

[errawn]

@jskeate danke! <3

[gecersiznick]

Going to leave a note here in case others come across this issue in a search. This error seems to happen if you
import {Component} from '<path>';
when you should have
import Component from '<path>';

If this doesn't solve the issue, make sure that you're actually exporting the component that you are trying to import.