search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
227.54k stars 46.42k forks source link

ReactTestUtils: event dispatched before workInProgress stateNode is set #9504

Closed aweary closed 6 years ago

aweary commented 7 years ago

With the following, using the latest alpha (10) and jsdom 9.12.0:

const ReactTestUtils = require('react-dom/test-utils')

const Foo = () => (
  React.createElement(
    'div',
    null,
    React.createElement('img', { src: 'foo.jpg'})
  )
)

ReactTestUtils.renderIntoDocument(
  React.createElement(Foo)
)

The following error is thrown:

TypeError: Cannot read property 'nodeName' of null
    at shouldUseChangeEvent (/Users/brandondail/projects/react-tester/node_modules/react-dom/cjs/react-dom.development.js:6310:22)
    at Object.extractEvents (/Users/brandondail/projects/react-tester/node_modules/react-dom/cjs/react-dom.development.js:6495:9)
    at Object.extractEvents (/Users/brandondail/projects/react-tester/node_modules/react-dom/cjs/react-dom.development.js:715:46)
    at Object.handleTopLevel [as _handleTopLevel] (/Users/brandondail/projects/react-tester/node_modules/react-dom/cjs/react-dom.development.js:772:35)
    at handleTopLevelImpl (/Users/brandondail/projects/react-tester/node_modules/react-dom/cjs/react-dom.development.js:7051:24)
    at batchedUpdates (/Users/brandondail/projects/react-tester/node_modules/react-dom/cjs/react-dom.development.js:14806:14)
    at performFiberBatchedUpdates (/Users/brandondail/projects/react-tester/node_modules/react-dom/cjs/react-dom.development.js:6161:10)
    at stackBatchedUpdates (/Users/brandondail/projects/react-tester/node_modules/react-dom/cjs/react-dom.development.js:6152:10)
    at batchedUpdates (/Users/brandondail/projects/react-tester/node_modules/react-dom/cjs/react-dom.development.js:6166:10)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (/Users/brandondail/projects/react-tester/node_modules/react-dom/cjs/react-dom.development.
js:6179:12)

The issue is that completeWork calls finalizeInitialChildren before it sets the stateNode on the workInProgress.

finalizeInitialChildren eventually calls setValueForProperty for the image tag, which sets the src property, and causes jsdom to trigger an event. The top level event listener then grabs that instance, which has no stateNode which eventually triggers the error.

ReactTestUtils is likely to be used frequently with jsdom so I think it's important to support. Is this something that can be addressed in Fiber?

gaearon commented 7 years ago

Can you send a fix for this?

aweary commented 7 years ago

@gaearon I'll give it a shot 👍

aweary commented 6 years ago

I can no longer reproduce this issue with the latest releases.