From fd877872b536a86d9cfda329dcb70ab63f926387 Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Wed, 21 Dec 2022 14:30:50 +0100
Subject: [PATCH] Fix an issue that broke serialization (#2642)

---
 .changeset/jest-serialization-failure.md      |  5 ++++
 packages/jest/src/create-serializer.js        |  5 +++-
 .../__snapshots__/react-enzyme.test.js.snap   | 26 +++++++++++++++++++
 packages/jest/test/react-enzyme.test.js       |  8 ++++++
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/jest-serialization-failure.md

diff --git a/.changeset/jest-serialization-failure.md b/.changeset/jest-serialization-failure.md
new file mode 100644
index 000000000..ba715ea3d
--- /dev/null
+++ 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
index c1c5795bb..717102b75 100644
--- 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
index 0117cc108..2dd52ba2c 100644
--- 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
index e91e2e9f8..3590a7710 100644
--- 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`