Drop Enzyme's support

Author: Andarist

.changeset/polite-items-cheat.md

@@ -0,0 +1,5 @@
+---
+'@emotion/jest': major
+---
+
+Drop support for Enzyme

docs/testing.mdx

@@ -32,26 +32,9 @@ import { createSerializer } from '@emotion/jest'
 expect.addSnapshotSerializer(createSerializer())
 ```
 
-When using Enzyme, you can add `"@emotion/jest/enzyme-serializer"` instead.
-
-```json
-{
-  "snapshotSerializers": ["@emotion/jest/enzyme-serializer"]
-}
-```
-
-Or use `expect.addSnapshotSerializer` to add it like this:
-
-```javascript
-// also adds the enzyme-to-json serializer
-import { createEnzymeSerializer } from '@emotion/jest/enzyme-serializer'
-
-expect.addSnapshotSerializer(createEnzymeSerializer())
-```
-
 ### Writing a test
 
-Writing a test with `@emotion/jest` involves creating a snapshot from the `react-test-renderer` or `enzyme-to-json`'s resulting JSON.
+Writing a test with `@emotion/jest` involves creating a snapshot from the `react-test-renderer`'s resulting JSON.
 
 ```jsx
 import React from 'react'

package.json

@@ -201,9 +201,6 @@
     "bundlesize": "^0.13.2",
     "codecov": "^2.3.1",
     "cssjanus": "^1.2.0",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "enzyme-to-json": "^3.6.1",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react": "^1.1.7",

packages/css/test/component-selector.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import React from 'react'
 import styled from '@emotion/styled'
 import renderer from 'react-test-renderer'

packages/css/test/css.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { css, flush, sheet } from '@emotion/css'

packages/css/test/cx.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { css, cx } from '@emotion/css'

packages/css/test/inject-global.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import { injectGlobal, sheet, flush, css } from '@emotion/css'
 
 describe('injectGlobal', () => {

packages/css/test/keyframes.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { keyframes, flush, css } from '@emotion/css'
@@ -13,17 +13,17 @@ describe('keyframes', () => {
         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
         transform: translate3d(0,0,0);
       }
-    
+
       40%, 43% {
         animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
         transform: translate3d(0, -30px, 0);
       }
-    
+
       70% {
         animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
         transform: translate3d(0, -15px, 0);
       }
-    
+
       90% {
         transform: translate3d(0,-4px,0);
       }
@@ -54,7 +54,7 @@ describe('keyframes', () => {
     from {
       transform: rotate(0deg);
     }
-  
+
     to {
       transform: rotate(${endingRotation});
     }

packages/css/test/label-pattern.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import React from 'react'
 import styled from '@emotion/styled'
 import renderer from 'react-test-renderer'

packages/css/test/no-babel/index.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { css } from '@emotion/css'

packages/css/test/no-babel/warnings.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import { css } from '@emotion/css'
 
 console.error = jest.fn()

packages/css/test/selectivity.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import { css, sheet, flush } from '@emotion/css'
 
 describe('css', () => {

packages/css/test/source-map/source-map.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import { css, sheet, flush } from '@emotion/css'
 
 const commentPattern = /\/\*[\s\S]*?\*\//g

packages/css/test/warnings.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/next-env'
 import { css } from '@emotion/css'
 import createCss from '@emotion/css/create-instance'
 import * as React from 'react'

packages/jest/README.md

@@ -22,17 +22,7 @@ module.exports = {
 }
 ```
 
-To assist with shallow rendering, there's a custom enzyme snapshot serializer, that includes the `enzyme-to-json` serializer, which is available by importing `@emotion/jest/enzyme-serializer`. If you already have the `enzyme-to-json` serializer added to `snapshotSerializers`, it will need to be removed to allow this to work.
-
-```js
-// jest.config.js
-module.exports = {
-  // ... other config
-  snapshotSerializers: ['@emotion/jest/enzyme-serializer']
-}
-```
-
-Or you can add the serializer via the `expect.addSnapshotSerializer` method like so: (the example below is with react-test-renderer but @emotion/jest also works with enzyme and react-testing-library)
+Or you can add the serializer via the `expect.addSnapshotSerializer` method like so:
 
 ```jsx
 import React from 'react'

packages/jest/enzyme-serializer/package.json

@@ -14,15 +14,6 @@
       "import": "./dist/emotion-jest.cjs.mjs",
       "default": "./dist/emotion-jest.cjs.js"
     },
-    "./enzyme": {
-      "types": {
-        "import": "./enzyme/dist/emotion-jest-enzyme.cjs.mjs",
-        "default": "./enzyme/dist/emotion-jest-enzyme.cjs.js"
-      },
-      "module": "./enzyme/dist/emotion-jest-enzyme.esm.js",
-      "import": "./enzyme/dist/emotion-jest-enzyme.cjs.mjs",
-      "default": "./enzyme/dist/emotion-jest-enzyme.cjs.js"
-    },
     "./serializer": {
       "types": {
         "import": "./serializer/dist/emotion-jest-serializer.cjs.mjs",
@@ -32,15 +23,6 @@
       "import": "./serializer/dist/emotion-jest-serializer.cjs.mjs",
       "default": "./serializer/dist/emotion-jest-serializer.cjs.js"
     },
-    "./enzyme-serializer": {
-      "types": {
-        "import": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.cjs.mjs",
-        "default": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.cjs.js"
-      },
-      "module": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.esm.js",
-      "import": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.cjs.mjs",
-      "default": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.cjs.js"
-    },
     "./package.json": "./package.json"
   },
   "types": "types/index.d.ts",
@@ -104,9 +86,7 @@
   "preconstruct": {
     "entrypoints": [
       "./index.js",
-      "./serializer.js",
-      "./enzyme.js",
-      "./enzyme-serializer.js"
+      "./serializer.js"
     ]
   }
 }

packages/jest/enzyme/package.json

@@ -1,11 +1,9 @@
 import prettify from '@emotion/css-prettifier'
 import { replaceClassNames } from './replace-class-names'
-import * as enzymeTickler from './enzyme-tickler'
 import {
   getClassNamesFromNodes,
   isReactElement,
   isEmotionCssPropElementType,
-  isEmotionCssPropEnzymeElement,
   isDOMElement,
   getStylesFromClassNames,
   getStyleElements,
@@ -102,49 +100,11 @@ function getLabelsFromClassName(keys, className) {
   }).filter(Boolean)
 }
 
-function isShallowEnzymeElement(
-  element /*: any */,
-  keys /*: string[] */,
-  labels /*: string[] */
-) {
-  const childClassNames = (element.children || [])
-    .map(({ props = {} }) => props.className || '')
-    .filter(Boolean)
-
-  return !childClassNames.some(className => {
-    const childLabels = getLabelsFromClassName(keys, className)
-    return childLabels.every(childLabel => labels.includes(childLabel))
-  })
-}
-
 const createConvertEmotionElements =
   (keys /*: string[]*/) => (node /*: any*/) => {
     if (isPrimitive(node)) {
       return node
     }
-    if (isEmotionCssPropEnzymeElement(node)) {
-      const className = enzymeTickler.getTickledClassName(node.props.css)
-      const labels = getLabelsFromClassName(keys, className || '')
-
-      if (isShallowEnzymeElement(node, keys, labels)) {
-        const emotionType = node.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
-        // emotionType will be a string for DOM elements
-        const type =
-          typeof emotionType === 'string'
-            ? emotionType
-            : emotionType.displayName || emotionType.name || 'Component'
-        return {
-          ...node,
-          props: filterEmotionProps({
-            ...node.props,
-            className
-          }),
-          type
-        }
-      } else {
-        return node.children[node.children.length - 1]
-      }
-    }
     if (isEmotionCssPropElementType(node)) {
       return {
         ...node,