New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New React context API adds new tag types #1509

Closed
lourd opened this Issue Feb 3, 2018 · 46 comments

Comments

Projects
@lourd
Copy link

lourd commented Feb 3, 2018

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 added a commit to lourd/react-google-api that referenced this issue Feb 3, 2018

Swaps out react-broadcast for react alpha with new context API
Tests are failing because of new node types within enzyme. Filed an
issue here airbnb/enzyme#1509
@lourd

This comment has been minimized.

Copy link

lourd commented Feb 3, 2018

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

@Anonyfox

This comment has been minimized.

Copy link

Anonyfox commented Mar 15, 2018

any news on this?

@ljharb

This comment has been minimized.

Copy link
Member

ljharb commented Mar 16, 2018

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

@ljharb ljharb referenced this issue Mar 16, 2018

Open

Complete React 16 support #1553

18 of 38 tasks complete

@diegohaz diegohaz referenced this issue Mar 30, 2018

Closed

Enzyme Internal Error: unknown node with tag 13 #1598

2 of 10 tasks complete

@aweary aweary closed this in e21b7b5 Mar 30, 2018

aweary added a commit that referenced this issue Mar 30, 2018

Merge pull request #1513 from jquense/context
Add support for react context element types, fixes #1509
@x3mka

This comment has been minimized.

Copy link

x3mka commented Mar 31, 2018

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

This comment has been minimized.

Copy link

diegohaz commented Mar 31, 2018

@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

This comment has been minimized.

Copy link

x3mka commented Apr 1, 2018

@diegohaz Thanks!

@South-Paw

This comment has been minimized.

Copy link

South-Paw commented Apr 2, 2018

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

This comment has been minimized.

Copy link

ryandrewjohnson commented Apr 17, 2018

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

This comment has been minimized.

Copy link

icfantv commented Apr 25, 2018

@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

This comment has been minimized.

Copy link

tipbruley commented May 8, 2018

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

@kysedate

This comment has been minimized.

Copy link

kysedate commented May 9, 2018

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.

@artin-phares

This comment has been minimized.

Copy link

artin-phares commented May 14, 2018

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

@shahkashani

This comment has been minimized.

Copy link

shahkashani commented May 16, 2018

Please publish this, y'all.

@ChuckJonas

This comment has been minimized.

Copy link

ChuckJonas commented Jul 24, 2018

Still no update on this one?

@ljharb

This comment has been minimized.

Copy link
Member

ljharb commented Jul 24, 2018

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

@akaFTS akaFTS referenced this issue Jul 26, 2018

Merged

Feature/address container revamp #104

1 of 4 tasks complete

billyvg added a commit to getsentry/sentry that referenced this issue Jul 26, 2018

chore(js): Upgrade enzyme to 3.3.0 (#9192)
This adds support for serializing React.Context in snapshots, see: airbnb/enzyme#1513 also airbnb/enzyme#1509
@mspoerer

This comment has been minimized.

Copy link

mspoerer commented Jul 30, 2018

Any news on this topic?

@domharrington domharrington referenced this issue Aug 8, 2018

Merged

Feature/jwt latest #125

2 of 2 tasks complete

dsamojlenko pushed a commit to cds-snc/ircc-rescheduler that referenced this issue Sep 1, 2018

Fix tests for FederalBanner after withContext
This is the general pattern we're going to see as we add withContext
to components.
In short, we have to export a wrapped version of the component
as well as a basic version of it for testing.

In our tests, we can pass in the hardcoded context object that
the PropTypes expect and we're all good.

//

Worth pointing out that there's an enzyme problem whereby the new
React Provider and Consumer nodes aren't recognized as legitimate
nodes, so any tests that rely on them will fail.
This should be addressed in the near future but for right now
we can't do a lot about it.
Source:
- airbnb/enzyme#1509

Since the LanguageSwitcher is part of the FederalBanner (and
the LanguageSwitcher is wrapped in withContext), this means that
we can't `mount` our FederalBanner component until enzyme is updated.

dsamojlenko pushed a commit to cds-snc/ircc-rescheduler that referenced this issue Sep 1, 2018

Skip page tests until enzyme updates itself
Enzyme throws an error whenever it's used to try and render a
React Provider or Consumer.
Source:
- airbnb/enzyme#1509

They've promised an update in the next week or so, but until
then we can't `mount` any of our pages.

Worth pointing out that these tests are pretty useless anyway.

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 1, 2018

Updated dependencies
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where is context used
* updated Patternfly to newer version, the old one do not contains all required styles

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 1, 2018

Updated dependencies
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* updated Patternfly to newer version, the old one do not contains all required styles

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 1, 2018

Updated dependencies
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* updated Patternfly to newer version, the old one do not contains all required styles

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 1, 2018

Updated dependencies
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* updated Patternfly to newer version, the old one do not contains all required styles

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 2, 2018

Updated dependencies
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* updated Patternfly to newer version, the old one do not contains all required styles

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 2, 2018

Updated dependencies
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* updated Patternfly to newer version, the old one do not contains all required styles

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 3, 2018

Updated enzyme to support test with context components
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 3, 2018

Updated enzyme to support test with context components
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 3, 2018

Updated enzyme to support test with context components
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* deleted patch package (new included version do not need it)

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 3, 2018

Updated enzyme to support test with context components
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* deleted patch package (new included version does not need it)

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 3, 2018

Updated enzyme to support test with context components
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* deleted patch package (new included version does not need it)

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 4, 2018

Updated enzyme to support test with context components
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* deleted patch package (new included version does not need it)

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 4, 2018

Updated enzyme to support test with context components
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* deleted patch package (new included version does not need it)

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 4, 2018

Updated enzyme to support test with context components
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* deleted patch package (new included version does not need it)

rvsia added a commit to rvsia/patternfly-react that referenced this issue Oct 5, 2018

Updated enzyme to support test with context components
* see airbnb/enzyme#1509 for enzyme-adapter update, it throws an error in tests where context is used
* deleted patch package (new included version does not need it)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment