diff --git a/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js b/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js index 9957e89da..1a2e52ae9 100644 --- a/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js +++ b/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js @@ -94,7 +94,7 @@ function elementToTree(el) { type: Portal, props, key: ensureKeyOrUndefined(el.key), - ref: el.ref, + ref: el.ref || null, instance: null, rendered: elementToTree(el.children), }; @@ -112,8 +112,11 @@ function toTree(vnode) { case HostRoot: // 3 return childrenToTree(node.child); case HostPortal: { // 4 - const { stateNode: { containerInfo } } = node; - const props = { containerInfo }; + const { + stateNode: { containerInfo }, + memoizedProps: children, + } = node; + const props = { containerInfo, children }; return { nodeType: 'portal', type: Portal, diff --git a/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js b/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js index 446658f4c..5f79044cc 100644 --- a/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js +++ b/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js @@ -95,7 +95,7 @@ function elementToTree(el) { type: Portal, props, key: ensureKeyOrUndefined(el.key), - ref: el.ref, + ref: el.ref || null, instance: null, rendered: elementToTree(el.children), }; @@ -113,8 +113,11 @@ function toTree(vnode) { case HostRoot: // 3 return childrenToTree(node.child); case HostPortal: { // 4 - const { stateNode: { containerInfo } } = node; - const props = { containerInfo }; + const { + stateNode: { containerInfo }, + memoizedProps: children, + } = node; + const props = { containerInfo, children }; return { nodeType: 'portal', type: Portal, diff --git a/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js b/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js index 5a4557153..fc0d700e7 100644 --- a/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js +++ b/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js @@ -100,7 +100,7 @@ function elementToTree(el) { type: Portal, props, key: ensureKeyOrUndefined(el.key), - ref: el.ref, + ref: el.ref || null, instance: null, rendered: elementToTree(el.children), }; @@ -118,8 +118,11 @@ function toTree(vnode) { case HostRoot: // 3 return childrenToTree(node.child); case HostPortal: { // 4 - const { stateNode: { containerInfo } } = node; - const props = { containerInfo }; + const { + stateNode: { containerInfo }, + memoizedProps: children, + } = node; + const props = { containerInfo, children }; return { nodeType: 'portal', type: Portal, diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js index b9b0f5016..c20e9e7aa 100644 --- a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js +++ b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js @@ -100,7 +100,7 @@ function elementToTree(el) { type: Portal, props, key: ensureKeyOrUndefined(el.key), - ref: el.ref, + ref: el.ref || null, instance: null, rendered: elementToTree(el.children), }; @@ -118,8 +118,11 @@ function toTree(vnode) { case HostRoot: // 3 return childrenToTree(node.child); case HostPortal: { // 4 - const { stateNode: { containerInfo } } = node; - const props = { containerInfo }; + const { + stateNode: { containerInfo }, + memoizedProps: children, + } = node; + const props = { containerInfo, children }; return { nodeType: 'portal', type: Portal, diff --git a/packages/enzyme-test-suite/test/Adapter-spec.jsx b/packages/enzyme-test-suite/test/Adapter-spec.jsx index 727361b1c..24a2dd0cc 100644 --- a/packages/enzyme-test-suite/test/Adapter-spec.jsx +++ b/packages/enzyme-test-suite/test/Adapter-spec.jsx @@ -208,9 +208,10 @@ describe('Adapter', () => { const document = jsdom.jsdom(); const options = { mode: 'mount' }; const renderer = adapter.createRenderer(options); + const innerDiv =
Hello World!
; const Foo = () => ( createPortal( -
Hello World!
, + innerDiv, document.body, ) ); @@ -219,6 +220,9 @@ describe('Adapter', () => { const node = renderer.getNode(); + const { rendered: { props: { children } } } = node; + expect(children).to.equal(innerDiv); + cleanNode(node); expect(prettyFormat(node)).to.equal(prettyFormat({ @@ -250,6 +254,56 @@ describe('Adapter', () => { })); }); + itIf(is('>= 16'), 'shallow renders react portals', () => { + const options = { mode: 'shallow' }; + const renderer = adapter.createRenderer(options); + const innerDiv =
Hello World!
; + const containerDiv = { nodeType: 1 }; + const Foo = () => ( + createPortal( + innerDiv, + containerDiv, + ) + ); + + renderer.render(); + + const node = renderer.getNode(); + + const { rendered: { props: { children } } } = node; + expect(children).to.equal(innerDiv); + + cleanNode(node); + + expect(prettyFormat(node)).to.equal(prettyFormat({ + nodeType: 'function', + type: Foo, + props: {}, + key: undefined, + ref: null, + instance: null, + rendered: { + nodeType: 'portal', + type: Portal, + props: { + containerInfo: containerDiv, + }, + key: undefined, + ref: null, + instance: null, + rendered: { + nodeType: 'host', + type: 'div', + props: { className: 'Foo' }, + key: undefined, + ref: null, + instance: null, + rendered: 'Hello World!', + }, + }, + })); + }); + itIf(is('> 0.13'), 'renders simple components returning host components', () => { const options = { mode: 'mount' }; const renderer = adapter.createRenderer(options);