Tweak how displayName is read in the shallow printer

emotion-js · Apr 8, 2021 · b3bdf84 · b3bdf84
1 parent 1040c3c
commit b3bdf84
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 24 deletions.
diff --git a/.changeset/breezy-toys-act.md b/.changeset/breezy-toys-act.md
@@ -2,4 +2,4 @@
 '@emotion/jest': patch
 ---
 
-use emotionType.displayName to support shallowEnzymeElement with react forwardRef
+Use `displayName` when printing shallowly rendered elements with css prop.
diff --git a/packages/jest/src/create-serializer.js b/packages/jest/src/create-serializer.js
@@ -131,7 +131,7 @@ const createConvertEmotionElements = (keys: string[], printer: *) => (
       const type =
         typeof emotionType === 'string'
           ? emotionType
-          : emotionType.name || emotionType.displayName
+          : emotionType.displayName || emotionType.name || 'Component'
       return {
         ...node,
         props: filterEmotionProps({

diff --git a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
@@ -30,6 +30,22 @@ exports[`enzyme mount conditional styles 1`] = `
 </div>
 `;
 
+exports[`enzyme mount displayName 1`] = `
+.emotion-0 {
+  color: hotpink;
+}
+
+<CustomDisplayName
+  className="emotion-0"
+>
+  <div
+    className="emotion-0"
+  >
+    Hello
+  </div>
+</CustomDisplayName>
+`;
+
 exports[`enzyme mount empty styled 1`] = `
 <Greeting>
   <div
@@ -56,6 +72,24 @@ exports[`enzyme mount nested 1`] = `
 </div>
 `;
 
+exports[`enzyme mount nested displayName 1`] = `
+.emotion-0 {
+  color: hotpink;
+}
+
+<div>
+  <CustomDisplayName
+    className="emotion-0"
+  >
+    <div
+      className="emotion-0"
+    >
+      Hello
+    </div>
+  </CustomDisplayName>
+</div>
+`;
+
 exports[`enzyme mount nested styled 1`] = `
 .emotion-0 {
   background-color: red;
@@ -72,6 +106,29 @@ exports[`enzyme mount nested styled 1`] = `
 </div>
 `;
 
+exports[`enzyme mount nested styled with css prop 1`] = `
+.emotion-0 {
+  background-color: black;
+}
+
+.emotion-1 {
+  color: red;
+  background-color: black;
+}
+
+<div>
+  <Button
+    className="emotion-0"
+  >
+    <button
+      className="emotion-1 emotion-2"
+    >
+      iChenLei
+    </button>
+  </Button>
+</div>
+`;
+
 exports[`enzyme mount styled 1`] = `
 .emotion-0 {
   background-color: red;
@@ -96,17 +153,15 @@ exports[`enzyme mount styled with css prop 1`] = `
   background-color: black;
 }
 
-<div>
-  <Button
-    className="emotion-0"
+<Button
+  className="emotion-0"
+>
+  <button
+    className="emotion-1 emotion-2"
   >
-    <button
-      className="emotion-1 emotion-2"
-    >
-      iChenLei
-    </button>
-  </Button>
-</div>
+    iChenLei
+  </button>
+</Button>
 `;
 
 exports[`enzyme mount theming 1`] = `
@@ -380,6 +435,16 @@ exports[`enzyme shallow conditional styles 1`] = `
 </div>
 `;
 
+exports[`enzyme shallow displayName 1`] = `
+.emotion-0 {
+  color: hotpink;
+}
+
+<CustomDisplayName
+  className="emotion-0"
+/>
+`;
+
 exports[`enzyme shallow empty styled 1`] = `
 <div
   className="emotion-0 emotion-1"
@@ -396,6 +461,18 @@ exports[`enzyme shallow nested 1`] = `
 </div>
 `;
 
+exports[`enzyme shallow nested displayName 1`] = `
+.emotion-0 {
+  color: hotpink;
+}
+
+<div>
+  <CustomDisplayName
+    className="emotion-0"
+  />
+</div>
+`;
+
 exports[`enzyme shallow nested styled 1`] = `
 <div>
   <Greeting>
@@ -404,6 +481,20 @@ exports[`enzyme shallow nested styled 1`] = `
 </div>
 `;
 
+exports[`enzyme shallow nested styled with css prop 1`] = `
+.emotion-0 {
+  background-color: black;
+}
+
+<div>
+  <Button
+    className="emotion-0"
+  >
+    iChenLei
+  </Button>
+</div>
+`;
+
 exports[`enzyme shallow styled 1`] = `
 .emotion-0 {
   background-color: red;
@@ -421,13 +512,11 @@ exports[`enzyme shallow styled with css prop 1`] = `
   background-color: black;
 }
 
-<div>
-  <Button
-    className="emotion-0"
-  >
-    iChenLei
-  </Button>
-</div>
+<Button
+  className="emotion-0"
+>
+  iChenLei
+</Button>
 `;
 
 exports[`enzyme shallow theming 1`] = `

diff --git a/packages/jest/test/react-enzyme.test.js b/packages/jest/test/react-enzyme.test.js
@@ -39,21 +39,46 @@ const cases = {
       const Button = styled.button`
         color: red;
       `
+      return <Button css={style1}>iChenLei</Button>
+    }
+  },
+  nested: {
+    render() {
+      const Greeting = ({ children }) => (
+        <div css={{ backgroundColor: 'red' }}>{children}</div>
+      )
       return (
         <div>
-          <Button css={style1}>iChenLei</Button>
+          <Greeting>hello</Greeting>
         </div>
       )
     }
   },
-  nested: {
+  'nested styled': {
     render() {
-      return <div>{cases.basic.render()}</div>
+      const Greeting = styled.div`
+        background-color: red;
+      `
+      return (
+        <div>
+          <Greeting>Hello</Greeting>
+        </div>
+      )
     }
   },
-  'nested styled': {
+  'nested styled with css prop': {
     render() {
-      return <div>{cases.styled.render()}</div>
+      const style1 = css`
+        background-color: black;
+      `
+      const Button = styled.button`
+        color: red;
+      `
+      return (
+        <div>
+          <Button css={style1}>iChenLei</Button>
+        </div>
+      )
     }
   },
   'empty styled': {
@@ -235,6 +260,24 @@ const cases = {
         </div>
       )
     }
+  },
+  displayName: {
+    render() {
+      const Comp = props => <div {...props}>Hello</div>
+      Comp.displayName = 'CustomDisplayName'
+      return <Comp css={{ color: 'hotpink' }} />
+    }
+  },
+  'nested displayName': {
+    render() {
+      const Comp = props => <div {...props}>Hello</div>
+      Comp.displayName = 'CustomDisplayName'
+      return (
+        <div>
+          <Comp css={{ color: 'hotpink' }} />
+        </div>
+      )
+    }
   }
 }