TestUtils.renderIntoDocument failing for components containing <input />

[pletcher]

I get the following stack trace when attempting to render a component containing an <input /> in a test:

  - TypeError: Cannot read property 'firstChild' of undefined
        at Object.ReactMount.findComponentRoot (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactMount.js:606:39)
        at Object.ReactMount.findReactNodeByID (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactMount.js:552:23)
        at Object.getNode (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactMount.js:128:32)
        at ReactBrowserComponentMixin.getDOMNode (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactBrowserComponentMixin.js:35:23)
        at ReactCompositeComponent.createClass.componentDidMount (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactDOMInput.js:87:36)
        at chainedFunction [as componentDidMount] (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactCompositeComponent.js:666:9)
        at CallbackQueue.assign.notifyAll (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/CallbackQueue.js:68:22)
        at ReactReconcileTransaction.ON_DOM_READY_QUEUEING.close (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactReconcileTransaction.js:81:26)
        at ReactReconcileTransaction.Mixin.closeAll (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/Transaction.js:207:42)
        at ReactReconcileTransaction.Mixin.perform (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/Transaction.js:148:16)
        at ReactComponent.Mixin.mountComponentIntoNode (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactComponent.js:381:19)
        at Object.ReactMount._renderNewRootComponent (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactMount.js:312:25)
        at Object.wrapper [as _renderNewRootComponent] (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactPerf.js:50:21)
        at Object.ReactMount.render (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactMount.js:381:32)
        at Object.wrapper [as render] (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactPerf.js:50:21)
        at Object.ReactTestUtils.renderIntoDocument (/Users/pletcher/Projects/test-utils-input/node_modules/react/lib/ReactTestUtils.js:48:18)
        at Spec.<anonymous> (/Users/pletcher/Projects/test-utils-input/__tests__/input-test.js:11:15)
        at jasmine.Block.execute (/Users/pletcher/Projects/test-utils-input/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:1065:17)
        at jasmine.Queue.next_ (/Users/pletcher/Projects/test-utils-input/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2098:31)
        at null._onTimeout (/Users/pletcher/Projects/test-utils-input/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2088:18)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

I've set up a minimal test case here https://github.com/pletcher/test-utils-input

In-app, everything renders just fine; it's only when using TestUtils.renderIntoDocument that things go a little crazy.

[vsiao]

I think Cannot read property 'firstChild' of undefined shows up when you import two versions of react by accident. See #2402

I don't see evidence of that in your test case but maybe it's related...

[pletcher]

I looked into that, actually. It could be related, but then you'd expect TestUtils.renderIntoDocument(<ComponentWithAnInput />) to throw no matter what DOM component is rendered. As it is, if you do

var Component = React.createClass({
  render() {
    return <div />;
  }
});

TestUtils.renderIntoDocument(<Component />);

in the same test environment, everything renders as expected. (You can see this by changing l. 7 in input.jsx in my example to return a <div />.)

[pletcher]

Ack, I feel like an idiot. Moving the assignment of React and TestUtils to a beforeEach call seems to fix the issue.

Strange that it doesn't break on elements other than <input /> (that I've checked, anyway). Anyone have any idea why that might be?

[sophiebits]

input elements are implemented under the hood with a wrapper that deals with the events and making it a "controlled component":

https://github.com/facebook/react/blob/1c697ab1413f0db7e79de8f1a685c071128807fe/src/browser/ui/dom/components/ReactDOMInput.js

Closing this out as we're already aware that this sort of problem can manifest with multiple copies of React and we already have #2402, etc. to track.