React: Enzyme + Context API = Warning: Detected multiple renderers concurrently rendering the same context provider

[stereobooster]

Do you want to request a feature or report a bug? Bug, I guess

What is the current behavior?

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.

Steps to reproduce the behavior:

1. git clone https://github.com/stereobooster/react-context-issue
2. cd react-context-issue
3. yarn
4. yarn test

What is the expected behavior? no warning

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 16.4. Browser not affected, because error is in node.js

Open this because of https://github.com/facebook/react/pull/13127#issuecomment-402527012

Issue happens because of Enzyme (https://github.com/airbnb/enzyme/issues/1693), code is unreleased, so I copy-pasted it from master.

I'm looking for advice or some clue on how to fix this, so I would be able to create PR in Enzyme repo (or in React repo if this is the case). Thank you.

[gaearon]

Can you break down why the issue happens? i.e. what causes the sigils to differ.

[stereobooster]

If there is only one test in the file it works fine. It breaks when there is more than one. So I guess sigil never cleaned up in the first place - pure guess, I'm not familiar enough with the code base to give better explanation. I will continue investigation

[gaearon]

You can put some console logs in a few places and that should give you the complete picture.

[stereobooster]

Huh. I figured out what the issue here. It happens when you use react-test-renderer and Enzyme's mount in the same test file. Not sure if it is needed to be fixed...

[gaearon]

Enzyme's mount is just a wrapper over react-dom, right?

Can you reduce it to a test case without Enzyme?

[stereobooster]

To be clear if I use only react-test-renderer it is ok. If I use only Enzyme it is ok. Issue happens when I try to use react-test-renderer (for snapshot testing) and enzyme (for actual testing, like simulating clicking buttons etc.)

Enzyme's mount is just a wrapper over react-dom, right?

Yes

I found solution: use enzyme-to-json instead of react-test-renderer for snapshot testing. I will close the issue, if you don't mind.

Example of how I fixed it is here.

[gaearon]

I wouldn't call this a "solution", this is just ignoring the problem (and working around it). Maybe you don't need it fixed, but somebody else will. :-)

It's fine if you don't want to keep looking into this, but it does sound like a bug to me. And we should fix it.

[aweary]

@gaearon here's an example reproducing the issue without Enzyme. I believe the issue is that both react-dom and react-test-renderer are configured as primary renderers. Since they both bundle their own copy of rendererSigil the warning gets triggered.

[gaearon]

Oh right. Can we make react-test-renderer secondary?

[gaearon]

Actually I still don't fully understand. Why don't we reset _currentRenderer when we pop the topmost provider? Is there any benefit to continuing to track them? Does this catch some cases we wouldn't catch otherwise?

[gaearon]

Does async rendering assume context isn't being mutated by another renderer during idle periods?

[aweary]

Is there any potential problem with marking a renderer as secondary when it's typically used as a primary renderer? If not, that should fix it.

It's also interesting that the warning is about concurrent renderers, but the warning will still fire if the renderers are used sequentially. Should the sigil be reset when it gets unmounted?

edit: beat me to it 🏎️

[aweary]

Does async rendering assume context isn't being mutated by another renderer during idle periods?

I have no clue about idle periods, but at the very least the sigil should be reset if the Provider is no longer in any mounted tree right? Currently it persists even after unmountComponentAtNode

[gaearon]

@aweary Wanna send a PR that marks it secondary? @acdlite thinks it's probably fine

[green-arrow]

@gaearon - It looks like 16.4.2 was released a few days ago, but the change from @aweary is not included for some reason. Was that intentional or was this change missed?

[gaearon]

We released 16.4.2 as a security hotfix so it didn't include any changes except the vulnerability fix. This is to avoid a situation where people can't upgrade due to some newly introduced bug.

The next version will include all changes in master.

[green-arrow]

Ah thanks for the update!

[Thomazella]

Sweet. Had this issue today. I'm glad a fix is incoming, thanks. 👍🏻

[addynaik]

Until the update is available.. is there a version to downgrade to avoid this issue?

[shanshanzhu]

We are at React16.5.2, but we still see this error when putting the tests using mount and enzyme-to-json in one test file. Error is gone when tests are separated into two files.

  console.error node_modules/react-dom/cjs/react-dom.development.js:509
    Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.

[katywings]

I am just in the process of learning the underlying design of context. Isn't it solved like a singleton and if yes, how should it even be able to be used in a scenario where an App is used multiple times in parallel? (Like in testing, when certain tests might run in parallel :))