Adjust displayname test to be invariant across React versions

enzymejs · Aug 2, 2022 · 8753a35 · 8753a35
1 parent 82faa10
commit 8753a35
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -1709,14 +1709,24 @@ describe('shallow', () => {
     describeIf(is('>= 16.6'), 'memo', () => {
       const App = () => <div>Guest</div>;
 
-      const AppMemoized = memo && Object.assign(memo(App), { displayName: 'AppMemoized' });
+      const AppMemoized = memo
+        && Object.assign(
+          // `React.memo` in 17 and onwards copies `memo(Component).displayName` to `Component`
+          // i.e. `React.memo(Component)` has a side-effect on `Component`
+          // So we create a new function to not pollute `SFC` since we don't want to test React behavior but Enzyme behavior
+          // eslint-disable-next-line prefer-arrow-callback, no-shadow
+          memo(function App() {
+            return <div>Guest</div>;
+          }),
+          { displayName: 'AppMemoized' },
+        );
 
       const RendersApp = () => <App />;
       const RendersAppMemoized = () => <AppMemoized />;
 
       it('works without memoizing', () => {
         const wrapper = shallow(<RendersApp />);
-        expect(wrapper.debug()).to.equal(is('>= 17') ? '<AppMemoized />' : '<App />');
+        expect(wrapper.debug()).to.equal('<App />');
         expect(wrapper.dive().debug()).to.equal(`<div>
   Guest
 </div>`);

diff --git a/packages/enzyme-test-suite/test/shared/methods/debug.jsx b/packages/enzyme-test-suite/test/shared/methods/debug.jsx
@@ -81,12 +81,29 @@ export default function describeDebug({
         const SFCMemo = memo && memo(SFC);
         const SFCwithDisplayNameMemo = memo && memo(SFCwithDisplayName);
 
-        const SFCMemoWithDisplayName = memo && Object.assign(memo(SFC), {
+        // `React.memo` in 17 and onwards copies `memo(Component).displayName` to `Component`
+        // i.e. `React.memo(Component)` has a side-effect on `Component`
+        // So we create a new function to not pollute `SFC` since we don't want to test React behavior but Enzyme behavior
+        // eslint-disable-next-line prefer-arrow-callback, no-shadow
+        const SFCMemoWithDisplayName = memo && Object.assign(memo(function SFC() { return null; }), {
           displayName: 'SFCMemoWithDisplayName!',
         });
-        const SFCMemoWitDoubleDisplayName = memo && Object.assign(memo(SFCwithDisplayName), {
-          displayName: 'SFCMemoWitDoubleDisplayName!',
-        });
+        const SFCMemoWitDoubleDisplayName = memo
+          && Object.assign(
+            memo(
+              Object.assign(
+                // `React.memo` in 17 and onwards copies `memo(Component).displayName` to `Component`
+                // i.e. `React.memo(Component)` has a side-effect on `Component`
+                // So we create a new function to not pollute `SFC` since we don't want to test React behavior but Enzyme behavior
+                // eslint-disable-next-line prefer-arrow-callback, no-shadow
+                function SFCwithDisplayName() { return null; },
+                { displayName: 'SFC!' },
+              ),
+            ),
+            {
+              displayName: 'SFCMemoWitDoubleDisplayName!',
+            },
+          );
 
         it('displays the expected display names', () => {
           expect(SFCMemoWithDisplayName).to.have.property('displayName');
@@ -100,10 +117,11 @@ export default function describeDebug({
               <SFCMemoWitDoubleDisplayName />
             </div>
           ));
+
           expect(wrapper.debug()).to.equal(`<div>
-  ${is('>= 17') ? '<SFCMemoWithDisplayName! />' : '<SFC />'}
+  <SFC />
   <SFC! />
-  ${is('>= 17') ? '<Memo(SFCMemoWithDisplayName!) />' : '<Memo(SFC) />'}
+  <Memo(SFC) />
   <Memo(SFC!) />
   <SFCMemoWithDisplayName! />
   <SFCMemoWitDoubleDisplayName! />