Enzyme: Cannot directly mount `Context.Consumer` without console error

[wchargin]

If Context is the result of React.createContext (React 16.3+), then
it appears that mount can handle Context.Consumers that appear in
the tree, but raises a console error if the root itself is a consumer
(despite appearing to otherwise behave correctly).

The same error occurs with the v16.3 adapter or the v16 adapter.

The error message is:

Warning: Failed prop type: Invalid prop `Component` supplied to `WrapperComponent`.
  in WrapperComponent

Here is a repro:

const React = require("react");

const Enzyme = require("enzyme");
const Adapter = require("enzyme-adapter-react-16.3");
Enzyme.configure({ adapter: new Adapter() });

const ColorContext = React.createContext("yellow");

beforeEach(() => {
  console.warn = jest.fn();
  console.error = jest.fn();
});
afterEach(() => {
  expect(console.warn).not.toHaveBeenCalled();
  expect(console.error).not.toHaveBeenCalled();
});

// This passes.
it("should mount a component that uses context", () => {
  class Demo extends React.Component {
    render() {
      return React.createElement(ColorContext.Consumer, {}, color =>
        React.createElement("span", {}, `${color} is a good color`)
      );
    }
  }
  const e = Enzyme.mount(React.createElement(Demo));
  expect(e.html()).toEqual("<span>yellow is a good color</span>");
});

// This fails.
it("should mount the consumer directly", () => {
  const e = Enzyme.mount(
    React.createElement(ColorContext.Consumer, {}, color =>
      React.createElement("span", {}, `${color} is a good color`)
    )
  );
  expect(e.html()).toEqual("<span>yellow is a good color</span>");
});

Reproduce by running yarn jest with the following package.json:

{
  "license": "MIT",
  "dependencies": {
    "enzyme": "3.4.1",
    "enzyme-adapter-react-16.3": "1.0.0",
    "jest": "23.5.0",
    "prettier": "^1.14.2",
    "react": "16.3.2",
    "react-dom": "16.3.3"
  }
}

Versions: node v8.9.4, npm v5.6.0, yarn v1.7.0, Mint 18.2 (Ubuntu 18.04)

[wchargin]

Closely related: #1737.

[ljharb]

We don't yet have proper support for React's new context. Thanks for the report.

[kyeotic]

This might be useful: https://github.com/kevingrandon/enzyme

[ljharb]

@tyrsius since enzyme v3.4 (and all the resulting adapters) have been released, I don't believe there's any functionality in that package that isn't in enzyme proper, and there's many more fixes included in actual enzyme.

[rimunroe]

I tried reproducing this error just now according to the included instructions, but both tests seem to pass just fine.

@wchargin Are you still seeing this bug? If so, would you mind upgrading to [email protected] & enzyme-adapter-react-16.[email protected] and letting me know if it's still a problem? I'm using the general adapter for react 16 (not 16.3), but upgrading to the latest version of enzyme and the adapter seems to have resolved #1737.

[wchargin]

I tried reproducing this error just now according to the included
instructions, but both tests seem to pass just fine.

@rimunroe: Strange, indeed. I can’t reproduce it, either. I don’t
currently have access to the computer on which I originally wrote this
issue (which was on GNU/Linux—I’m currently on macOS). When I get back
to that machine, I’ll see if I can determine what happened.

Are you still seeing this bug?

Unfortunately, I can’t answer the question: I’ve had to stop using
Context altogether because it is effectively unsupported by Enzyme.
In particular, issues like #1647 precluded shallow rendering where
context was involved last time I checked, which is an unacceptable
concession. I don’t have any more context than you do.

[ljharb]

This issue should definitely be addressed because of a propType fix in the mount wrapper, fwiw.

[wchargin]

The original repro was correct. However, enzyme-adapter-react-16.3
depends on enzyme-adapter-utils@^1.5.0. When I created the original
repro, this resolved to version 1.5.0. It now resolves to version 1.6.0,
which fixes the problem.

The following package.json explicitly pins the subdependency, and
enables reproducing the original failure (with the same test script
above). Again, put this into your package.json, put the test file in
(say) test.js, and run yarn && yarn jest:

{
  "license": "MIT",
  "dependencies": {
    "enzyme": "3.4.1",
    "enzyme-adapter-react-16.3": "1.0.0",
    "jest": "23.5.0",
    "prettier": "^1.14.2",
    "react": "16.3.2",
    "react-dom": "16.3.3"
  },
  "resolutions": {
    "enzyme-adapter-utils": "1.5.0"
  }
}

(Edited to remove valid but unnecessary dependency in package.json.)

The fact that the test passes on latest versions (without the explicitly
pinned subdependency) does indeed suggest to me that the issue has been
resolved. Thanks for the fix!