Support of shallow for React16 Portals

[danilvalov]

import React, {Component} from 'react';
import {createPortal} from 'react-dom';
import Enzyme, {mount, shallow} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({
  adapter: new Adapter()
});

class Test extends Component {
  render () {
    return createPortal(
      <div>Test</div>,
      document.createElement('div')
    );
  }
}

describe('Test', () => {
  it('Should be rendered', () => {
    // Mount
    let TestComponentMount = mount(<Test />);
    console.log(TestComponentMount.debug());

    // Shallow
    let TestComponentShallow = shallow(<Test />);
    console.log(TestComponentShallow.debug());
  });
});

Current behavior

  console.log test.js:23      // Mount result
    <Test>
      <div>
        Test
      </div>
    </Test>

  console.log test.js:27      // Shallow result
    <undefined />

Expected behavior

I think Enzyme should use the shallow method correctly with Portals. Mount is not an universal method. If we have a component with not a simple child (eg, with some providers - intl, redux etc.), we can't mount the parent component. And we have to use the shallow method.

Your environment

Mac OS Sierra 10.13.3
Node Version 8.9.4
NPM Version 5.6.0
Yarn Version 1.3.2

API

• shallow
• mount
• render

Version

library	version
Enzyme	3.2.0
React	16.2.0

Adapter

• enzyme-adapter-react-16

[koba04]

I think it seems to be hard to support Portal in enzyme's shallow because React ShallowRenderer doesn't support Portal.
So I guess we should add Portal support into React ShallowRenderer in order to do this.

[ljharb]

This should be handled by #1761 and #1760, which will be in the next semver-minor release.