diff --git a/.changeset/great-bears-sing.md b/.changeset/great-bears-sing.md new file mode 100644 index 000000000..5b0db5bda --- /dev/null +++ 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 index 13b739bf1..165c74328 100644 --- 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 index 11522fb4e..bae6a9548 100644 --- 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`] = ` `; +exports[`enzyme mount nested 1`] = ` +.emotion-0 { + background-color: red; +} + +.emotion-0 { + background-color: red; +} + +
+ +
+ Hello +
+
+
+`; + exports[`enzyme mount with prop containing css element 1`] = ` .emotion-0 { background-color: blue; @@ -161,6 +183,17 @@ exports[`enzyme shallow basic 1`] = ` `; +exports[`enzyme shallow nested 1`] = ` +
+ + Hello + +
+`; + exports[`enzyme shallow with prop containing css element 1`] = `

hello } }, + nested: { + render() { + const Greeting = ({ children, className }) => ( +

{children}
+ ) + return ( +
+ Hello +
+ ) + } + }, 'with prop containing css element': { render() { const Greeting = ({ children, content }) => (