"Missing React element for debugID" warning when testing components with Jest

[angusfretwell]

Do you want to request a feature or report a bug?

Report a bug.

What is the current behavior?

When testing components, Warning: ReactComponentTreeDevtool: Missing React element for debugID 1 when building stack is shown when calling TestUtils.renderIntoDocument.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).

https://github.com/angusfretwell/reproduce-debugid-warning (npm install && npm test).

What is the expected behavior?

According to #7187 this is an internal warning and shouldn't be displayed.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• react@15.2.1
• react-addons-test-utils@15.2.1
• react-dom@15.2.1

I didn't receive this warning on 15.2.0.

[gaearon]

Could this be some sort of a Jest issue (related to mocking?).
In your example, if I put a log in the top level scope of ReactComponentTreeDevtool.js, I see it twice.

I’m not sure if this is normal.

I can also “fix” the issue by moving requires inside the test:

jest.unmock('../../components/HelloWorld');

describe('HelloWorld', () => {
  it('displays the message', () => {
    var React = require('react');
    var ReactDOM = require('react-dom');
    var TestUtils = require('react-addons-test-utils');
    var HelloWorld = require('../../components/HelloWorld').default;

    const helloWorld = TestUtils.renderIntoDocument(<div><HelloWorld /></div>);
    const helloWorldNode = ReactDOM.findDOMNode(helloWorld);
    expect(helloWorldNode.textContent).toEqual('Hello World');
  });
});

I would advise you to file an issue with Jest. It shouldn’t be executing our modules twice.

[angusfretwell]

Thanks for looking into this @gaearon, I will file an issue with Jest.

[cpojer]

Reopening this as this is not a Jest issue. Downgrading React to 15.2.0 makes this warning go away in @angusfretwell's example. @angusfretwell thanks for providing a repo!

@gaearon can you look into this from the React side?

[gaearon]

Hmm, I don't know enough about Jest to solve this in React. The only related change I can think of is that I inlined some requires to this module inside DEV blocks so that it doesn't get bundled to production. Does this cause Jest to execute it twice? Even though it worked before, I can't quite see how module being executed twice can be valid behavior. It doesn't happen in Node or in the browser and CommonJS does not allow this to my knowledge so I can't quite see yet how this can be React's issue.

[gaearon]

(To clarify, yes, I know it's new in React 15.2.1. But it doesn't mean this is a React issue. It just looks like we hit an edge case in Jest that we didn't hit before. But I can try bisecting this if it helps.)

[cpojer]

Jest resets the module registry before each call to it, so it is quite possible that people will end up with two copies of React if they aren't careful. Can you point me to the change in React since the last release?

[gaearon]

Wow, I thought resetting is always explicit.
Then it is probably caused by #7188.
As you can see I had to doctor a few tests to make it pass but I thought those were caused by explicit resetModuleRegistry calls.

I still don't quite understand what is happening. Are lazy requires an unsupported pattern?

[cpojer]

Oh, I see what is happening here now.

Here is how Jest works in open source:

• We call jest.resetModuleRegistry() implicitly in every beforeEach call. When doing require('React') (or import) on the top-level and then require('React') inside of a call to it), they will be fresh copies both times. I suspect the debug module is freshly required from an old version of React which will then go and require new versions of modules it requires itself.

At Facebook here is how Jest works:

• We explicitly call jest.resetModuleRegistry() in beforeEach. Not every test does this, but every test should and I've been hoping to turn the open source behavior on internally as well.
• We use top-level requires but we inline them. const React = require('React') will be removed and inlined into the code. Together with the module registry reset, this works pretty well and every call to it is completely isolated. Previously, the way we required modules in our tests internally was always quite the mess.

What we do at FB is what I'd recommend most people to do however people in open source have decided they want to use ES2015 imports, even in tests and there is not much I can do to stop them. That way they might end up with this confused state.

Jest sets the NODE_ENV to test – could we leverage this in React?