[Improved Fiber Support] Support Portals properly

[lelandrichardson]

I am not quite sure if these are supported yet or not. We need to add some tests. I also wonder if there are any APIs that might need to get created to assert on this or something?

[gziolo]

I can confirm that Portals don't work with Enzyme 3.0.0 (+ adapter for React 16), React 16.0.0 and Jest 21.2.0. See related test: https://github.com/WordPress/gutenberg/pull/2813/files#diff-6cf726110898b8679af57302917acb5dR279.

[ezhlobo]

I can be wrong but it looks like an issue in react-test-renderer.

I tried this via jest and CRA:

const Test = () => (
  <div>
    <h1>Hello</h1>

    <Portal>Outside message</Portal>
  </div>
)

const tree = renderer.create(<Test />).toJSON()

Where Portal returns ReactDOM.createPortal(...).

The error message is

TypeError: parentInstance.children.indexOf is not a function

      at appendChild (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7778:39)
      at commitPlacement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5200:13)
      at commitAllHostEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6196:13)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2210:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2249:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2106:29)
      at commitAllWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6332:9)
      at workLoop (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6643:13)
      at HTMLUnknownElement.callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2210:14)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:219:27)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:126:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:87:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:36:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:61:35)
      at Object.invokeGuardedCallbackDev (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2249:16)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2106:29)
      at performWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6756:7)
      at scheduleUpdateImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7141:19)
      at scheduleUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7080:12)
      at scheduleTopLevelUpdate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7351:5)
      at Object.updateContainer (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7381:7)
      at Object.create (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8186:18)
      at Object.fit (src/lib/tests/forms.js:25:48)
      at process._tickCallback (internal/process/next_tick.js:103:7)

[lukeapage]

There may well also be an issue with react-test-renderer, but the first error I get is inside the react 16 renderer adapter:

tag type of 4 is not recognized.

[kellyrmilligan]

I don't know exactly if this is correct, but if I add
var Portal = 4;
and duplicate the switch case for classComponent, and match against the Portal var:

case Portal:
      return {
        nodeType: 'class',
        type: node.type,
        props: (0, _object2['default'])({}, node.memoizedProps),
        key: node.key,
        ref: node.ref,
        instance: node.stateNode,
        rendered: childrenToTree(node.child)
      };

my basic tests pass. I am not familiar at all with what should be returned from this switch block though...

I am using latest version of react-modal in my app and with the react upgrade this issue surfaced in my tests. They are indeed in 3.0.0 using the new portal component if react 16 is beiing used to render it.

[mayacode]

Hi there,

any update?

I just switched to react 16 and my tests are failing...

Enzyme Internal Error: unknown node with tag 4

      at toTree (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:147:13)

I would appreciate any hint, how to make them work again...

[ljharb]

@mayacode did you start using Portals as part of your switch? A react 15 codebase switched directly to 16 shouldn't be running into that error.

[kellyrmilligan]

I ran into the issue after upgrading react-modal, which does use portals if they are available