Drop Enzyme's support (#3292)

* Drop Enzyme's support

* update lockfile

* update snapshots

* rename to setup-env

* update snapshots agains

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/cache/__tests__/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import 'test-utils/next-env'
+import 'test-utils/setup-env'
 import { safeQuerySelector } from 'test-utils'
 import createCache from '@emotion/cache'
 import { jsx, CacheProvider } from '@emotion/react'

packages/css/test/__snapshots__/selectivity.test.js.snap

@@ -15,62 +15,62 @@ exports[`css complex nested media queries 1`] = `
 `;
 
 exports[`css complex nested styles 1`] = `
-".css-52fshx {
+".css-1fh6au3 {
   color: blue;
 }
 
-.css-52fshx:hover {
+.css-1fh6au3:hover {
   color: green;
 }
 
-.css-52fshx:hover .name {
+.css-1fh6au3:hover .name {
   color: amethyst;
 }
 
-.css-52fshx:hover .name:focus {
+.css-1fh6au3:hover .name:focus {
   color: burlywood;
 }
 
 @media (min-width: 420px) {
-  .css-52fshx:hover .name:focus {
+  .css-1fh6au3:hover .name:focus {
     color: rebeccapurple;
   }
 }"
 `;
 
 exports[`css handles media query merges 1`] = `
-".css-19kb3dc {
+".css-uzr6q5 {
   color: darkslateblue;
   color: red;
   color: purple;
 }
 
 @media (min-width: 420px) {
-  .css-19kb3dc {
+  .css-uzr6q5 {
     color: amethyst;
   }
 }
 
 @media (min-width: 640px) {
-  .css-19kb3dc {
+  .css-uzr6q5 {
     color: rebeccapurple;
   }
 }
 
 @media (min-width: 960px) {
-  .css-19kb3dc {
+  .css-uzr6q5 {
     color: burlywood;
   }
 }
 
 @media (min-width: 640px) {
-  .css-19kb3dc {
+  .css-uzr6q5 {
     color: blue;
   }
 }
 
 @media (min-width: 640px) {
-  .css-19kb3dc {
+  .css-uzr6q5 {
     color: aquamarine;
   }
 }"

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

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/setup-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/setup-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/setup-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/setup-env'
 import { injectGlobal, sheet, flush, css } from '@emotion/css'
 
 describe('injectGlobal', () => {

packages/css/test/instance/css.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/next-env'
+import 'test-utils/setup-env'
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { css as differentCss, flush, sheet } from './emotion-instance'

packages/css/test/keyframes.test.js

@@ -1,4 +1,4 @@
-import 'test-utils/legacy-env'
+import 'test-utils/setup-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/setup-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/setup-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/setup-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/setup-env'
 import { css, sheet, flush } from '@emotion/css'
 
 describe('css', () => {

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

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

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

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

packages/css/test/warnings.test.js

@@ -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/README.md

@@ -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"
     ]
   }
 }