TypeError: Cannot read property 'contextTypes' of undefined when using shallow

[mcastrigno]

When I make a shallow copy of a component that is exported as: export default connect(mapStateToProps)(CompensationPlansDashboard);

I get the error TypeError: Cannot read property 'contextTypes' of undefined

  13 |     };
  14 |       
> 15 |     const sut = shallow(<CompensationPlansDashboard {...props} />);
     |                 ^
  16 | 
  17 |     expect(sut).toMatchSnapshot();
  18 |   });

If this export does not work for shallow, how can I fix it and still use Redux connect function? TIA

[ljharb]

What's the rest of the stack trace from the error?

[mcastrigno]

TypeError: Cannot read property 'contextTypes' of undefined

  13 |     };
  14 |       
> 15 |     const sut = shallow(<CompensationPlansDashboard {...props} />);
     |                 ^
  16 | 
  17 |     expect(sut).toMatchSnapshot();
  18 |   });

```

at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:626:27) at new ShallowWrapper (node_modules/enzyme/src/ShallowWrapper.js:397:7) at shallow (node_modules/enzyme/src/shallow.js:10:10) at Object. (compensationPlansDashboard/compensationPlansDashboard.test.tsx:15:17)``

[ljharb]

How are you importing CompensationPlansDashboard? Can you add a console.log(CompensationPlansDashboard) before the shallow call?

[mcastrigno]

import React from "react";
import { shallow } from "enzyme";
import CompensationPlansDashboard from "./CompensationPlansDashboard";

// Mock higher order components (HOCs)
jest.mock("./compensationPlans/CompensationPlans", () => "CompensationPlans");

describe("<CompensationPlansDashboard /> rendering", () => {
  it("matches snapshot", () => {
    const props = {
      compensationPlans: [],
      isFetching: true,
    };

    const sut = shallow(<CompensationPlansDashboard {...props} />);

    expect(sut).toMatchSnapshot();
  });
});

[ljharb]

Pretty sure your mock is broken. It needs to be this:

jest.mock("./compensationPlans/CompensationPlans", () => { default: "CompensationPlans" });

or something like that.

However, you shouldn't BE mocking HOCs. You should keep them, and do one .dive() per HOC.

[mcastrigno]

that is giving me an error "Declaration or statement expected.ts(1128)" under default

[ljharb]

What happens if you comment out/remove the mock?

[mcastrigno]

same error

[ljharb]

and the console.log(CompensationPlansDashboard)? does that log a component, or undefined?

[mcastrigno]

undefined

[mcastrigno]

some kind of import or export problem

[mcastrigno]

or both

[ljharb]

In that case, it’s not an enzyme problem - it’s something with your jest or transpilation setup.

[ljharb]

Happy to help you work through it here, I’m not just sure where else to look

[mcastrigno]

Yeah, not sure either. Don't have a lot experience with jest. I am modifying a existing test after refactoring a component that was much more complicated. The prior test mocked a long list of HOCs that I factored out of the component.