fix(pretty-format): Render custom displayName of memoized components (#…

…8546)
jestjs · Jun 11, 2019 · be1dda3 · be1dda3
1 parent 9ac8ca7
commit be1dda3
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - `[expect]` Highlight substring differences when matcher fails, part 1 ([#8448](https://github.com/facebook/jest/pull/8448))
 - `[jest-cli]` Improve chai support (with detailed output, to match jest exceptions) ([#8454](https://github.com/facebook/jest/pull/8454))
 - `[*]` Manage the global timeout with `--testTimeout` command line argument. ([#8456](https://github.com/facebook/jest/pull/8456))
+- `[pretty-format]` Render custom displayName of memoized components
 
 ### Fixes
 

diff --git a/packages/pretty-format/src/__tests__/react.test.tsx b/packages/pretty-format/src/__tests__/react.test.tsx
@@ -722,14 +722,41 @@ test('supports forwardRef with a child', () => {
   ).toEqual('<ForwardRef(Cat)>\n  mouse\n</ForwardRef(Cat)>');
 });
 
-test('supports memo with a child', () => {
-  function Dog(props: any) {
-    return React.createElement('div', props, props.children);
-  }
+describe('React.memo', () => {
+  describe('without displayName', () => {
+    test('renders the component name', () => {
+      function Dog(props: any) {
+        return React.createElement('div', props, props.children);
+      }
+
+      expect(
+        formatElement(React.createElement(React.memo(Dog), null, 'cat')),
+      ).toEqual('<Memo(Dog)>\n  cat\n</Memo(Dog)>');
+    });
+  });
 
-  expect(
-    formatElement(React.createElement(React.memo(Dog), null, 'cat')),
-  ).toEqual('<Memo(Dog)>\n  cat\n</Memo(Dog)>');
+  describe('with displayName', () => {
+    test('renders the displayName of component before memoizing', () => {
+      const Foo = () => React.createElement('div');
+      Foo.displayName = 'DisplayNameBeforeMemoizing(Foo)';
+      const MemoFoo = React.memo(Foo);
+
+      expect(formatElement(React.createElement(MemoFoo, null, 'cat'))).toEqual(
+        '<Memo(DisplayNameBeforeMemoizing(Foo))>\n  cat\n</Memo(DisplayNameBeforeMemoizing(Foo))>',
+      );
+    });
+
+    test('renders the displayName of memoized component', () => {
+      const Foo = () => React.createElement('div');
+      Foo.displayName = 'DisplayNameThatWillBeIgnored(Foo)';
+      const MemoFoo = React.memo(Foo);
+      MemoFoo.displayName = 'DisplayNameForMemoized(Foo)';
+
+      expect(formatElement(React.createElement(MemoFoo, null, 'cat'))).toEqual(
+        '<Memo(DisplayNameForMemoized(Foo))>\n  cat\n</Memo(DisplayNameForMemoized(Foo))>',
+      );
+    });
+  });
 });
 
 test('supports context Provider with a child', () => {

diff --git a/packages/pretty-format/src/plugins/ReactElement.ts b/packages/pretty-format/src/plugins/ReactElement.ts
@@ -61,7 +61,8 @@ const getType = (element: any) => {
     }
 
     if (ReactIs.isMemo(type)) {
-      const functionName = type.type.displayName || type.type.name || '';
+      const functionName =
+        type.displayName || type.type.displayName || type.type.name || '';
 
       return functionName !== '' ? 'Memo(' + functionName + ')' : 'Memo';
     }