New React context API adds new tag types

[lourd]

The new API for context, publicly released just a few hours ago in the React 16.3 alpha, adds new tag types for the Provider and Consumer components that are returned from the createContext function.

When updating my module to use the new API, I get an unknown node error from the ReactSixteenAdapter.js:

Enzyme Internal Error: unknown node with tag 13

I went in and took a stab at updating the adapter, and found that the Consumer prop has another new tag type, 12.

I added the following lines:

+ var ContextProvider = 13
+ var ContextConsumer = 12

and tried adding cases for both of those in the module's switch statement, but none of the existing case handling options worked to get my tests passing again.

Environment

API

• shallow
• mount
• render

Version

library	version
Enzyme	3.3.0
React	16.3.0-alpha.0

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper

[lourd]

Here's the relevant build output from my test and the source that its covering

[Anonyfox]

any news on this?

[ljharb]

Nobody's put up a PR yet - so no news yet.

[x3mka]

Guys, publish a new version with this fix, please. No way for npm install from git monorepo sub dir drives me crazy: npm/npm#2974

[diegohaz]

@x3mka in the meanwhile, I've copied the ReactSixteenAdapter contents and put it on my setup file: https://github.com/diegohaz/constate/blob/93b7b5b469be4521784b51380f49e6589c3e56b9/test/setup.js

The only difference from the file on master is the ensureKeyOrUndefined function that I needed to add to the file:
https://github.com/diegohaz/constate/blob/93b7b5b469be4521784b51380f49e6589c3e56b9/test/ReactSixteenAdapter.js

[x3mka]

@diegohaz Thanks!

[South-Paw]

Hi, just hit this issue with a repo we're working on, thanks to @diegohaz's solution though I've been able to solve it and continue working on things. I assume until #1553 is complete, this is the best way to solve the issue..?

Side note; thanks, for all the hard work you guys do! 👍❤️

[ryandrewjohnson]

If you're using jest I found that you can get decent results mocking out context with a utility function like so:

// ensure you're resetting modules before each test
beforeEach(() => {
  jest.resetModules();
});

const getComponentWithContext = context => {
  // mock out the context you're using in the component
  jest.doMock('./YourContext', () => {
    return {
      YourContext: {
        Consumer: (props) => props.children(context)
      }
    }
  });
  
  // you need to re-require after calling jest.doMock.
  // return the updated Component module that now includes the mocked context
  return require('./Component');
};

// then use it like so...
it('should return stuff', () => {
    const Component = getComponentWithContext({ data: 'here is some context data for test' });
    const wrapper = mount(<Component />);
    // now do your assertions
  });

For a more detailed explanation I did a quick write up Unit testing components using React’s new Context API

[icfantv]

@ryandrewjohnson Thanks for the example! I'm curious as to what the the Producer key looks like in the mocked context. I was unable to figure out the right syntax to make Jest happy.

[tipbruley]

@icfantv , I think it would be Provider:(props)=>props.children

[kysedate]

Following up with @ryandrewjohnson's example, this can be done with shallow as well if you add .dive() at the end of the call. i.e. const wrapper = shallow(<Component />).dive(); I ran into a scenario where I'm adding context to controls that already have extensive unit tests, and this was the only way to avoid major breakage.

[art-in]

So issue was fixed, but not published on npm yet (for 1.5 months)?

[shahkashani]

Please publish this, y'all.

[ChuckJonas]

Still no update on this one?

[ljharb]

Not yet, things are in progress. Please be patient.

[mspoerer]

Any news on this topic?

[ljharb]

The following packages are now released:

• enzyme v3.4.0
• enzyme-adapter-react-16 v1.2.0
• enzyme-adapter-react-16.3 v1.0.0
• enzyme-adapter-react-16.2 v1.0.0
• enzyme-adapter-react-16.1 v1.0.0
• enzyme-adapter-react-15 v1.0.6
• enzyme-adapter-react-15.4 v1.0.6
• enzyme-adapter-react-14 v1.0.6
• enzyme-adapter-react-13 v1.0.4
• enzyme-adapter-utils v1.5.0