Tests failing when using createPortal() with React 16

[chevin99]

Bug:

I have these two files:

index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class SomethingCool extends Component {
  render() {
    return ReactDOM.createPortal(<div></div>, this.portal)
  }
}

index.test.js

import React from 'react';
import ReactDOM from 'react-dom';
import SomethingCool from './';

it.only('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<SomethingCool />, div);
});

The app was started with create-react-app, and when I run the test, I get this:

FAIL src/components/SomethingCool/index.test.js
● Console

console.error node_modules/react-dom/cjs/react-dom.development.js:8305
  The above error occurred in the <SomethingCool> component:
      in SomethingCool (at index.test.js:7)

  Consider adding an error boundary to your tree to customize error handling behavior.
  You can learn more about error boundaries at https://fb.me/react-error-boundaries.

● renders without crashing

An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the "Pause on exceptions" behavior of the DevTools, which requires some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue.

  at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:1343:19)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:1195:27)
  at performWork (node_modules/react-dom/cjs/react-dom.development.js:12800:7)
  at scheduleUpdateImpl (node_modules/react-dom/cjs/react-dom.development.js:13185:19)
  at scheduleUpdate (node_modules/react-dom/cjs/react-dom.development.js:13124:12)
  at scheduleTopLevelUpdate (node_modules/react-dom/cjs/react-dom.development.js:13395:5)
  at Object.updateContainer (node_modules/react-dom/cjs/react-dom.development.js:13425:7)
  at node_modules/react-dom/cjs/react-dom.development.js:17105:19
  at Object.unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:13256:14)
  at renderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17104:17)
  at Object.render (node_modules/react-dom/cjs/react-dom.development.js:17129:12)
  at Object.<anonymous>.it.only (src/components/Notification/index.test.js:7:22)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
  at process._tickCallback (internal/process/next_tick.js:109:7)

When I change the component to just render the empty div without createPortal(), it works fine.

Info:

create-react-app: 1.3.0
react-scripts: 1.0.14
react: 16.0.0
react-dom: 16.0.0
macOS Sierra 10.12.6

Note that I also used this suggested workaround on #9102 for requestAnimationFrame with the tests:

Please let me know if there's more info needed that will help figure out what's going on. Thanks 😄

[gaearon]

Can you provide a full example please? I don't see ‘this.portal` defined in your code.

(Although our error message is still odd.)

[chevin99]

Sorry, it looks like I stripped down too much of what I have. When I use this it works fine:

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class SomethingCool extends Component {
  constructor() {
    super()
    this.portal = document.createElement('div')
    document.body.appendChild(this.portal)
  }

  render() {
    return ReactDOM.createPortal(<div></div>, this.portal)
  }
}

I'll close this since I don't think it's related directly to react. I am also using @storybook and it looks like there could be something going on there. Strangely I get the same error. Thanks for the quick reply 👍 and sorry for the false alarm ☹️

[gaearon]

Thanks for the report anyway. We'll just need an example to work with it.