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 <mateuszburzynski@gmail.com>

.changeset/great-bears-sing.md

@@ -0,0 +1,5 @@
+---
+'jest-emotion': patch
+---
+
+Fix printing names of nested shallow-rendered components.

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')

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

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 }) => (