From 7836e57165c2ab03fbc93d50550412bec4af37f7 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Wed, 9 Oct 2019 22:47:43 -0700 Subject: [PATCH] =?UTF-8?q?[enzyme-adapter-react-*,=20enzyme-adapter-utils?= =?UTF-8?q?]=20[fix]=20`mount`:=20ensure=20the=20root=E2=80=99s=20`ref`=20?= =?UTF-8?q?prop=20gets=20attached=20to=20the=20actual=20root?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #2253. --- .../src/ReactFourteenAdapter.js | 2 +- .../src/ReactFifteenFourAdapter.js | 2 +- .../src/ReactFifteenAdapter.js | 2 +- .../src/ReactSixteenOneAdapter.js | 2 +- .../src/ReactSixteenTwoAdapter.js | 2 +- .../src/ReactSixteenThreeAdapter.js | 2 +- .../src/ReactSixteenAdapter.js | 2 +- .../src/createMountWrapper.jsx | 7 +++- .../test/ReactWrapper-spec.jsx | 42 +++++++++++++++++-- 9 files changed, 50 insertions(+), 13 deletions(-) diff --git a/packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js b/packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js index 4316855f5..68a2d9836 100644 --- a/packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js +++ b/packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js @@ -110,7 +110,7 @@ class ReactFourteenAdapter extends EnzymeAdapter { wrappingComponentProps: options.wrappingComponentProps, props, context, - ...(ref && { ref }), + ...(ref && { refProp: ref }), }; const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter }); const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps); diff --git a/packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js b/packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js index 069ee0404..9c239d0b4 100644 --- a/packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js +++ b/packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js @@ -145,7 +145,7 @@ class ReactFifteenFourAdapter extends EnzymeAdapter { wrappingComponentProps: options.wrappingComponentProps, props, context, - ...(ref && { ref }), + ...(ref && { refProp: ref }), }; const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter }); const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps); diff --git a/packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js b/packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js index 0efd3ae69..1cac48bec 100644 --- a/packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js +++ b/packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js @@ -145,7 +145,7 @@ class ReactFifteenAdapter extends EnzymeAdapter { wrappingComponentProps: options.wrappingComponentProps, props, context, - ...(ref && { ref }), + ...(ref && { refProp: ref }), }; const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter }); const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps); diff --git a/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js b/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js index 186f09b4d..ce7ede8f0 100644 --- a/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js +++ b/packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js @@ -278,7 +278,7 @@ class ReactSixteenOneAdapter extends EnzymeAdapter { props, wrappingComponentProps, context, - ...(ref && { ref }), + ...(ref && { refProp: ref }), }; const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter }); const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps); diff --git a/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js b/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js index 16554555f..1c0fe065e 100644 --- a/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js +++ b/packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js @@ -280,7 +280,7 @@ class ReactSixteenTwoAdapter extends EnzymeAdapter { props, wrappingComponentProps, context, - ...(ref && { ref }), + ...(ref && { refProp: ref }), }; const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter }); const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps); diff --git a/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js b/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js index 7da9142bd..fc6259fce 100644 --- a/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js +++ b/packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js @@ -299,7 +299,7 @@ class ReactSixteenThreeAdapter extends EnzymeAdapter { props, wrappingComponentProps, context, - ...(ref && { ref }), + ...(ref && { refProp: ref }), }; const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter }); const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps); diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js index 9fff69198..ef053a41a 100644 --- a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js +++ b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js @@ -421,7 +421,7 @@ class ReactSixteenAdapter extends EnzymeAdapter { props, wrappingComponentProps, context, - ...(ref && { ref }), + ...(ref && { refProp: ref }), }; const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter }); const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps); diff --git a/packages/enzyme-adapter-utils/src/createMountWrapper.jsx b/packages/enzyme-adapter-utils/src/createMountWrapper.jsx index 7cc58117c..884f0d9ef 100644 --- a/packages/enzyme-adapter-utils/src/createMountWrapper.jsx +++ b/packages/enzyme-adapter-utils/src/createMountWrapper.jsx @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { ref } from 'airbnb-prop-types'; import RootFinder from './RootFinder'; /* eslint react/forbid-prop-types: 0 */ @@ -68,11 +69,11 @@ export default function createMountWrapper(node, options = {}) { } render() { - const { Component } = this.props; + const { Component, refProp } = this.props; const { mount, props, wrappingComponentProps } = this.state; if (!mount) return null; // eslint-disable-next-line react/jsx-props-no-spreading - const component = ; + const component = ; if (WrappingComponent) { return ( // eslint-disable-next-line react/jsx-props-no-spreading @@ -86,11 +87,13 @@ export default function createMountWrapper(node, options = {}) { } WrapperComponent.propTypes = { Component: makeValidElementType(adapter).isRequired, + refProp: PropTypes.oneOfType([PropTypes.string, ref()]), props: PropTypes.object.isRequired, wrappingComponentProps: PropTypes.object, context: PropTypes.object, }; WrapperComponent.defaultProps = { + refProp: null, context: null, wrappingComponentProps: null, }; diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx index 7f7e73894..fb246711b 100644 --- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx @@ -104,10 +104,44 @@ describeWithDOM('mount', () => { `); }); - it('calls ref', () => { - const spy = sinon.spy(); - mount(
); - expect(spy).to.have.property('callCount', 1); + describeWithDOM('refs', () => { + it('calls ref', () => { + const spy = sinon.spy(); + mount(
); + expect(spy).to.have.property('callCount', 1); + }); + + /* global HTMLElement */ + + itIf(is('> 0.13'), 'passes an HTML element to `ref` when root rendered', () => { + const spy = sinon.spy(); + mount(
); + expect(spy).to.have.property('callCount', 1); + + // sanity check + expect(document.createElement('div')).to.be.instanceOf(HTMLElement); + + const [[firstArg]] = spy.args; + console.log(firstArg); + expect(firstArg).to.be.instanceOf(HTMLElement); + }); + + itIf(is('> 0.13'), 'passes an HTML element to `ref` when sub-rendered', () => { + const spy = sinon.spy(); + class Foo extends React.Component { + render() { + return
; + } + } + mount(); + expect(spy).to.have.property('callCount', 1); + + // sanity check + expect(document.createElement('div')).to.be.instanceOf(HTMLElement); + + const [[firstArg]] = spy.args; + expect(firstArg).to.be.instanceOf(HTMLElement); + }); }); describe('wrapping invalid elements', () => {