Fix printing names of nested shallow-rendered components (#1665)

* Introduce broken test case * Fix shallow component snapshots * Update .changeset/great-bears-sing.md Co-Authored-By: Mateusz Burzyński <[email protected]>
emotion-js · Dec 2, 2019 · 9328cd7 · 9328cd7
1 parent 1eda973
commit 9328cd7
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 1 deletion.
diff --git a/.changeset/great-bears-sing.md b/.changeset/great-bears-sing.md
@@ -0,0 +1,5 @@
+---
+'jest-emotion': patch
+---
+
+Fix printing names of nested shallow-rendered components.
diff --git a/packages/jest-emotion/src/index.js b/packages/jest-emotion/src/index.js
@@ -103,13 +103,17 @@ export function createSerializer({
           .concat(expectedClassNames)
           .filter(Boolean)
           .join(' ')
+        let emotionType = val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
+        // emotionType will be a string for DOM elements
+        let type =
+          typeof emotionType === 'string' ? emotionType : emotionType.name
         return printer({
           ...val,
           props: filterEmotionProps({
             ...val.props,
             className
           }),
-          type: val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
+          type
         })
       } else {
         return val.children.map(printer).join('\n')

diff --git a/packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest-emotion/test/__snapshots__/react-enzyme.test.js.snap
@@ -18,6 +18,28 @@ exports[`enzyme mount basic 1`] = `
 </Greeting>
 `;
 
+exports[`enzyme mount nested 1`] = `
+.emotion-0 {
+  background-color: red;
+}
+
+.emotion-0 {
+  background-color: red;
+}
+
+<div>
+  <Greeting
+    className="emotion-0"
+  >
+    <div
+      className="emotion-0"
+    >
+      Hello
+    </div>
+  </Greeting>
+</div>
+`;
+
 exports[`enzyme mount with prop containing css element 1`] = `
 .emotion-0 {
   background-color: blue;
@@ -161,6 +183,17 @@ exports[`enzyme shallow basic 1`] = `
 </div>
 `;
 
+exports[`enzyme shallow nested 1`] = `
+<div>
+  <Greeting
+    className=""
+    css="unknown styles"
+  >
+    Hello
+  </Greeting>
+</div>
+`;
+
 exports[`enzyme shallow with prop containing css element 1`] = `
 <div>
   <p

diff --git a/packages/jest-emotion/test/react-enzyme.test.js b/packages/jest-emotion/test/react-enzyme.test.js
@@ -18,6 +18,18 @@ const cases = {
       return <Greeting>hello</Greeting>
     }
   },
+  nested: {
+    render() {
+      const Greeting = ({ children, className }) => (
+        <div className={className}>{children}</div>
+      )
+      return (
+        <div>
+          <Greeting css={{ backgroundColor: 'red' }}>Hello</Greeting>
+        </div>
+      )
+    }
+  },
   'with prop containing css element': {
     render() {
       const Greeting = ({ children, content }) => (