Fix an issue that broke serialization (#2642)

emotion-js · Mar 23, 2023 · fd87787 · fd87787
1 parent 314a5fb
commit fd87787
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 1 deletion.
diff --git a/.changeset/jest-serialization-failure.md b/.changeset/jest-serialization-failure.md
@@ -0,0 +1,5 @@
+---
+'@emotion/jest': patch
+---
+
+Fix an issue that broke serialization. Nodes in a render prop aren't writable, making the `delete node.props.className` instruction throw.
diff --git a/packages/jest/src/create-serializer.js b/packages/jest/src/create-serializer.js
@@ -172,7 +172,10 @@ function clean(node: any, classNames: string[]) {
     const { className } = node.props
     if (!className) {
       // if it's empty, remove it
-      delete node.props.className
+      const descriptor = Object.getOwnPropertyDescriptor(node, 'props')
+      if (descriptor && descriptor.writable) {
+        delete node.props.className
+      }
     } else {
       const hasKnownClass = hasIntersection(className.split(' '), classNames)
       if (hasKnownClass) {

diff --git a/packages/jest/test/__snapshots__/react-enzyme.test.js.snap b/packages/jest/test/__snapshots__/react-enzyme.test.js.snap
@@ -440,6 +440,24 @@ exports[`enzyme mount with prop containing css element with other props 1`] = `
 </Greeting>
 `;
 
+exports[`enzyme mount with prop containing empty classname 1`] = `
+<Thing
+  renderProp={
+    <span
+      className=""
+    >
+      Hi
+    </span>
+  }
+>
+  <div>
+    <span>
+      Hi
+    </span>
+  </div>
+</Thing>
+`;
+
 exports[`enzyme mount with prop containing regular element 1`] = `
 <Test
   element={
@@ -796,6 +814,14 @@ exports[`enzyme shallow with prop containing css element with other props 1`] =
 </div>
 `;
 
+exports[`enzyme shallow with prop containing empty classname 1`] = `
+<div>
+  <span>
+    Hi
+  </span>
+</div>
+`;
+
 exports[`enzyme shallow with prop containing regular element 1`] = `
 <button>
   Foo

diff --git a/packages/jest/test/react-enzyme.test.js b/packages/jest/test/react-enzyme.test.js
@@ -187,6 +187,14 @@ const cases = {
       )
     }
   },
+  'with prop containing empty classname': {
+    render() {
+      const Thing = ({ renderProp }) => {
+        return <div>{renderProp}</div>
+      }
+      return <Thing renderProp={<span className="">Hi</span>} />
+    }
+  },
   'with array of styles as css prop': {
     render() {
       const style1 = css`