From 3ab8035eb1e518b83b88d5dd2f227b3baaac37ca Mon Sep 17 00:00:00 2001 From: Gustavo Bastos Date: Sat, 25 May 2019 00:54:10 +0200 Subject: [PATCH 1/2] [Tests] failing test for memoized component display names --- packages/enzyme-test-suite/test/adapter-utils-spec.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/enzyme-test-suite/test/adapter-utils-spec.jsx b/packages/enzyme-test-suite/test/adapter-utils-spec.jsx index 976508588..80815e321 100644 --- a/packages/enzyme-test-suite/test/adapter-utils-spec.jsx +++ b/packages/enzyme-test-suite/test/adapter-utils-spec.jsx @@ -58,6 +58,14 @@ describe('enzyme-adapter-utils', () => { expect(displayNameOfNode()).to.equal('CustomWrapper'); }); }); + + describeIf(is('>= 16.6'), 'stateless memoized function components', () => { + it('returns the displayName', () => { + const Foo = Object.assign(React.memo(() =>
), { displayName: 'Memoized(CustomWrapper)' }); + + expect(displayNameOfNode()).to.equal('Memoized(CustomWrapper)'); + }); + }); }); describe('given a node without displayName', () => { From acc652883aaf03fa7e6fc0495fe76bf130189358 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Fri, 24 May 2019 21:25:44 -0700 Subject: [PATCH 2/2] [enzyme-adapter-react-16] [fix] ensure the correct displayName for `memo` components. Expected results verified with the React Dev Tools. --- .../src/ReactSixteenAdapter.js | 5 ++- .../test/ReactWrapper-spec.jsx | 4 +- .../test/ShallowWrapper-spec.jsx | 2 +- .../test/shared/methods/debug.jsx | 37 +++++++++++++++++++ .../test/shared/methods/find.jsx | 13 ++++--- 5 files changed, 51 insertions(+), 10 deletions(-) diff --git a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js index afa65effa..f3ee8ac09 100644 --- a/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js +++ b/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js @@ -803,7 +803,10 @@ class ReactSixteenAdapter extends EnzymeAdapter { switch ($$typeofType) { case ContextConsumer || NaN: return 'ContextConsumer'; case ContextProvider || NaN: return 'ContextProvider'; - case Memo || NaN: return displayNameOfNode(type); + case Memo || NaN: { + const nodeName = displayNameOfNode(node); + return typeof nodeName === 'string' ? nodeName : `Memo(${displayNameOfNode(type)})`; + } case ForwardRef || NaN: { if (type.displayName) { return type.displayName; diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx index f511ee28d..8e5c7cab8 100644 --- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx @@ -685,7 +685,7 @@ describeWithDOM('mount', () => { const Foo = memo(InnerFoo); const wrapper = mount(); - expect(wrapper.debug()).to.equal(` + expect(wrapper.debug()).to.equal(`
@@ -701,7 +701,7 @@ describeWithDOM('mount', () => { qux
-`); +`); expect(wrapper.find('InnerComp')).to.have.lengthOf(1); expect(wrapper.find('.bar')).to.have.lengthOf(1); expect(wrapper.find('.qoo').text()).to.equal('qux'); diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx index 9828f342f..79b7945a8 100644 --- a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx @@ -1664,7 +1664,7 @@ describe('shallow', () => { it('works with memoizing', () => { const wrapper = shallow(); - expect(wrapper.debug()).to.equal(''); + expect(wrapper.debug()).to.equal(''); expect(wrapper.dive().debug()).to.equal(`
Guest
`); diff --git a/packages/enzyme-test-suite/test/shared/methods/debug.jsx b/packages/enzyme-test-suite/test/shared/methods/debug.jsx index 6cc407720..fba5e834a 100644 --- a/packages/enzyme-test-suite/test/shared/methods/debug.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/debug.jsx @@ -71,6 +71,43 @@ export default function describeDebug({ }); describeIf(is('>= 16.6'), 'React.memo', () => { + describe('display names', () => { + function SFC() { return null; } + function SFCwithDisplayName() { return null; } + SFCwithDisplayName.displayName = 'SFC!'; + + const SFCMemo = memo && memo(SFC); + const SFCwithDisplayNameMemo = memo && memo(SFCwithDisplayName); + + const SFCMemoWithDisplayName = memo && Object.assign(memo(SFC), { + displayName: 'SFCMemoWithDisplayName!', + }); + const SFCMemoWitDoubleDisplayName = memo && Object.assign(memo(SFCwithDisplayName), { + displayName: 'SFCMemoWitDoubleDisplayName!', + }); + + it('displays the expected display names', () => { + const wrapper = Wrap(( +
+ + + + + + +
+ )); + expect(wrapper.debug()).to.equal(`
+ + + + + + +
`); + }); + }); + describe('defaultProps', () => { function Add({ a, b, c }) { return
{String(a)}|{String(b)}|{String(c)}
; diff --git a/packages/enzyme-test-suite/test/shared/methods/find.jsx b/packages/enzyme-test-suite/test/shared/methods/find.jsx index d2240225c..cf6d8cef6 100644 --- a/packages/enzyme-test-suite/test/shared/methods/find.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/find.jsx @@ -876,7 +876,7 @@ export default function describeFind({ const expectedDebug = isShallow ? `
- +
bar
@@ -884,7 +884,7 @@ export default function describeFind({ qux
` - : ` + : `
@@ -893,13 +893,13 @@ export default function describeFind({
- +
find me?
- +
bar
@@ -907,9 +907,10 @@ export default function describeFind({ qux
-`; +`; expect(wrapper.debug()).to.equal(expectedDebug); - expect(wrapper.find('InnerComp')).to.have.lengthOf(2); + expect(wrapper.find('InnerComp')).to.have.lengthOf(1); + expect(wrapper.find('Memo(InnerComp)')).to.have.lengthOf(1); expect(wrapper.find('.bar')).to.have.lengthOf(1); expect(wrapper.find('.qoo').text()).to.equal('qux'); expect(wrapper.find(InnerMemo)).to.have.lengthOf(1);