Merge pull request #1760 from jgzuke/jgzuke-support-portal-mount

[enzyme-adapter-react-16*, enzyme-adapter-utils] [new] `mount`: add support for Portals
enzymejs · Aug 18, 2018 · 3bc5de2 · 3bc5de2
2 parents fe6f676 + 605021d
commit 3bc5de2
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 9 deletions.
diff --git a/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js b/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js
@@ -112,7 +112,17 @@ function toTree(vnode) {
  case HostRoot: // 3
  return childrenToTree(node.child);
  case HostPortal: { // 4
- return childrenToTree(node.child);
+ const { stateNode: { containerInfo } } = node;
+ const props = { containerInfo };
+ return {
+ nodeType: 'portal',
+ type: Portal,
+ props,
+ key: ensureKeyOrUndefined(node.key),
+ ref: node.ref,
+ instance: null,
+ rendered: childrenToTree(node.child),
+ };
  }
  case ClassComponent:
  return {

diff --git a/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js b/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js
@@ -113,7 +113,17 @@ function toTree(vnode) {
  case HostRoot: // 3
  return childrenToTree(node.child);
  case HostPortal: { // 4
- return childrenToTree(node.child);
+ const { stateNode: { containerInfo } } = node;
+ const props = { containerInfo };
+ return {
+ nodeType: 'portal',
+ type: Portal,
+ props,
+ key: ensureKeyOrUndefined(node.key),
+ ref: node.ref,
+ instance: null,
+ rendered: childrenToTree(node.child),
+ };
  }
  case ClassComponent:
  return {

diff --git a/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js b/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js
@@ -118,7 +118,17 @@ function toTree(vnode) {
  case HostRoot: // 3
  return childrenToTree(node.child);
  case HostPortal: { // 4
- return childrenToTree(node.child);
+ const { stateNode: { containerInfo } } = node;
+ const props = { containerInfo };
+ return {
+ nodeType: 'portal',
+ type: Portal,
+ props,
+ key: ensureKeyOrUndefined(node.key),
+ ref: node.ref,
+ instance: null,
+ rendered: childrenToTree(node.child),
+ };
  }
  case ClassComponent:
  return {

diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js
@@ -118,7 +118,17 @@ function toTree(vnode) {
  case HostRoot: // 3
  return childrenToTree(node.child);
  case HostPortal: { // 4
- return childrenToTree(node.child);
+ const { stateNode: { containerInfo } } = node;
+ const props = { containerInfo };
+ return {
+ nodeType: 'portal',
+ type: Portal,
+ props,
+ key: ensureKeyOrUndefined(node.key),
+ ref: node.ref,
+ instance: null,
+ rendered: childrenToTree(node.child),
+ };
  }
  case ClassComponent:
  return {

diff --git a/packages/enzyme-adapter-utils/package.json b/packages/enzyme-adapter-utils/package.json
@@ -36,7 +36,8 @@
  "dependencies": {
  "function.prototype.name": "^1.1.0",
  "object.assign": "^4.1.0",
- "prop-types": "^15.6.2"
+ "prop-types": "^15.6.2",
+ "react-is": "^16.4.2"
  },
  "peerDependencies": {
  "react": "0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0"

diff --git a/packages/enzyme-adapter-utils/src/Utils.js b/packages/enzyme-adapter-utils/src/Utils.js
@@ -1,4 +1,7 @@
 import functionName from 'function.prototype.name';
+import {
+ Portal,
+} from 'react-is';
 import createMountWrapper from './createMountWrapper';
 import createRenderWrapper from './createRenderWrapper';
 
@@ -107,6 +110,10 @@ export function displayNameOfNode(node) {
 
  if (!type) return null;
 
+ if (type === Portal) {
+ return 'Portal';
+ }
+
  return type.displayName || (typeof type === 'function' ? functionName(type) : type.name || type);
 }
 
@@ -117,6 +124,9 @@ export function nodeTypeFromType(type) {
  if (type && type.prototype && type.prototype.isReactComponent) {
  return 'class';
  }
+ if (type && type === Portal) {
+ return 'portal';
+ }
  return 'function';
 }
 

diff --git a/packages/enzyme-test-suite/test/Adapter-spec.jsx b/packages/enzyme-test-suite/test/Adapter-spec.jsx
@@ -4,6 +4,9 @@ import jsdom from 'jsdom';
 import { get } from 'enzyme/build/configuration';
 import { configure, shallow } from 'enzyme';
 import inspect from 'object-inspect';
+import {
+ Portal,
+} from 'react-is';
 
 import './_helpers/setupAdapters';
 import Adapter from './_helpers/adapter';
@@ -226,13 +229,23 @@ describe('Adapter', () => {
  ref: null,
  instance: null,
  rendered: {
- nodeType: 'host',
- type: 'div',
- props: { className: 'Foo' },
+ nodeType: 'portal',
+ type: Portal,
+ props: {
+ containerInfo: document.body,
+ },
  key: undefined,
  ref: null,
  instance: null,
- rendered: ['Hello World!'],
+ rendered: {
+ nodeType: 'host',
+ type: 'div',
+ props: { className: 'Foo' },
+ key: undefined,
+ ref: null,
+ instance: null,
+ rendered: ['Hello World!'],
+ },
  },
  }));
  });

diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -15,6 +15,9 @@ import {
  sym,
 } from 'enzyme/build/Utils';
 import getAdapter from 'enzyme/build/getAdapter';
+import {
+ Portal,
+} from 'react-is';
 
 import './_helpers/setupAdapters';
 import {
@@ -426,6 +429,103 @@ describeWithDOM('mount', () => {
  });
  });
 
+ describeIf(is('>= 16'), 'portals', () => {
+ it('should show portals in mount debug tree', () => {
+ const containerDiv = global.document.createElement('div');
+ const Foo = () => (
+ <div>
+ {createPortal(
+ <div className="in-portal">InPortal</div>,
+ containerDiv,
+ )}
+ </div>
+ );
+
+ const wrapper = mount(<Foo />);
+ expect(wrapper.debug()).to.equal(`<Foo>
+ <div>
+ <Portal containerInfo={{...}}>
+ <div className="in-portal">
+ InPortal
+ </div>
+ </Portal>
+ </div>
+</Foo>`);
+ });
+
+ it('should show portal container in debug tree', () => {
+ const containerDiv = global.document.createElement('div');
+ containerDiv.setAttribute('data-foo', 'bar');
+ const Foo = () => (
+ <div className="foo">
+ {createPortal(
+ <div className="in-portal">InPortal</div>,
+ containerDiv,
+ )}
+ </div>
+ );
+
+ const wrapper = mount(<Foo />);
+ expect(wrapper.debug({ verbose: true })).to.equal(`<Foo>
+ <div className="foo">
+ <Portal containerInfo={<div data-foo="bar">...</div>}>
+ <div className="in-portal">
+ InPortal
+ </div>
+ </Portal>
+ </div>
+</Foo>`);
+ });
+
+ it('should show nested portal children in debug tree', () => {
+ const Bar = () => null;
+
+ const containerDiv = global.document.createElement('div');
+ const Foo = () => (
+ <div className="foo">
+ {createPortal(
+ <div className="in-portal">
+ <div className="nested-in-portal">
+ <Bar />
+ </div>
+ </div>,
+ containerDiv,
+ )}
+ </div>
+ );
+
+ const wrapper = mount(<Foo />);
+ expect(wrapper.debug()).to.equal(`<Foo>
+ <div className="foo">
+ <Portal containerInfo={{...}}>
+ <div className="in-portal">
+ <div className="nested-in-portal">
+ <Bar />
+ </div>
+ </div>
+ </Portal>
+ </div>
+</Foo>`);
+ });
+
+ it('should have top level portals in debug tree', () => {
+ const containerDiv = global.document.createElement('div');
+ const Foo = () => createPortal(
+ <div className="in-portal">InPortal</div>,
+ containerDiv,
+ );
+
+ const wrapper = mount(<Foo />);
+ expect(wrapper.debug()).to.equal(`<Foo>
+ <Portal containerInfo={{...}}>
+ <div className="in-portal">
+ InPortal
+ </div>
+ </Portal>
+</Foo>`);
+ });
+ });
+
  describe('.contains(node)', () => {
  it('should allow matches on the root node', () => {
  const a = <div className="foo" />;
@@ -1260,6 +1360,25 @@ describeWithDOM('mount', () => {
  expect(wrapper.children()).to.have.lengthOf(1);
  });
  });
+
+ itIf(is('>= 16'), 'should find mounted portals by name', () => {
+ const containerDiv = global.document.createElement('div');
+ const Foo = () => (
+ <div>
+ {createPortal(
+ <div className="in-portal">InPortal</div>,
+ containerDiv,
+ )}
+ </div>
+ );
+
+ const wrapper = mount(<Foo />);
+ expect(wrapper.find('Portal').debug()).to.equal(`<Portal containerInfo={{...}}>
+ <div className="in-portal">
+ InPortal
+ </div>
+</Portal>`);
+ });
  });
 
  describe('.findWhere(predicate)', () => {
@@ -1582,6 +1701,26 @@ describeWithDOM('mount', () => {
  wrapper.findWhere(spy);
  expect(spy).to.have.property('callCount', 2);
  });
+
+ itIf(is('>= 16'), 'should find mounted portals by react-is Portal type', () => {
+ const containerDiv = global.document.createElement('div');
+ const Foo = () => (
+ <div>
+ {createPortal(
+ <div className="in-portal">InPortal</div>,
+ containerDiv,
+ )}
+ </div>
+ );
+
+ const wrapper = mount(<Foo />);
+ expect(wrapper.findWhere(node => node.type() === Portal).debug())
+ .to.equal(`<Portal containerInfo={{...}}>
+ <div className="in-portal">
+ InPortal
+ </div>
+</Portal>`);
+ });
  });
 
  describe('.setProps(newProps[, callback])', () => {