Use React 19 (#3291)

* Use React 19

* Specify TS 5.0 as min TS version in most dtslint tests

* try patching dtslint

* update lockfile

* fixed TS error

* dedupe `@types/react`

* update react testing library

* add `@testing-library/dom`

* migrate tests

* migrate more

* moar

* moar

* fix

* more

* more

* more

* more

* more

* more

* more

* more

* fix

* migrate more tests

* moar

* moar

* moar

* moar

* moar

* more

* more

* more

* tweak

* more converted tests

* fix thing

* fix

* tweak

* fixed test

* tweaks

* unskip 2 tests

* unskip again

* stuff

* fix streams

* skip some tests

* tweak

* fix things

* fix snap

* fixed snapshot indent

* fixed extra snapshot issue

* strip-ansi

* Require TS 5.1

* `useInsertionEffect` directly in `Global`

* keep old peer dep range in `use-insertion-effect-with-fallbacks`

* add changeset

* fixed lockfile

Author: Andarist

.changeset/amaranth-owls-dream.md

@@ -0,0 +1,6 @@
+---
+'@emotion/styled': major
+'@emotion/react': major
+---
+
+Dropped support for older React versions. React 19 becomes the only compatible version with this package.

.github/workflows/main.yml

@@ -41,16 +41,6 @@ jobs:
       - name: Check Types
         run: yarn tsc:all
 
-  test_react18:
-    name: Test React 18
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/ci-setup
-
-      - name: Run Tests with React 18
-        run: yarn test:react18:ci
-
   test_prod:
     name: Test Prod
     runs-on: ubuntu-latest

.yarn/patches/@definitelytyped-typescript-versions-npm-0.0.112-f668f50e03.patch

@@ -0,0 +1,16 @@
+diff --git a/dist/index.js b/dist/index.js
+index 0a9abde5fbe918397794db0c0962129cf6bec3fa..26fe2b048b7fa898282d2d9d0dbd1719384b1f60 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -8,9 +8,9 @@ const assert_1 = __importDefault(require("assert"));
+ var TypeScriptVersion;
+ (function (TypeScriptVersion) {
+     /** Add to this list when a version actually ships.  */
+-    TypeScriptVersion.shipped = ["3.9", "4.0", "4.1", "4.2", "4.3", "4.4", "4.5", "4.6"];
++    TypeScriptVersion.shipped = ["3.9", "4.0", "4.1", "4.2", "4.3", "4.4", "4.5", "4.6", "4.7", "4.8", "4.9", "5.0", "5.1", "5.2", "5.3", "5.4", "5.5", "5.6", "5.7"];
+     /** Add to this list when a version is available as typescript@next */
+-    TypeScriptVersion.supported = [...TypeScriptVersion.shipped, "4.7"];
++    TypeScriptVersion.supported = [...TypeScriptVersion.shipped, "5.8"];
+     /** Add to this list when it will no longer be supported on Definitely Typed */
+     TypeScriptVersion.unsupported = [
+         "2.0",

docs/testing.mdx

@@ -34,11 +34,11 @@ expect.addSnapshotSerializer(createSerializer())
 
 ### Writing a test
 
-Writing a test with `@emotion/jest` involves creating a snapshot from the `react-test-renderer`'s resulting JSON.
+Writing a test with `@emotion/jest` involves creating a snapshot from the `@testing-library/react`'s result.
 
 ```jsx
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 
 const Button = props => (
   <button
@@ -51,7 +51,7 @@ const Button = props => (
 
 test('Button renders correctly', () => {
   expect(
-    renderer.create(<Button>This is hotpink.</Button>).toJSON()
+    render(<Button>This is hotpink.</Button>).container
   ).toMatchSnapshot()
 })
 ```
@@ -67,7 +67,7 @@ exports[`Button renders correctly 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   This is hotpink.
 </div>

jest-react18.config.js

@@ -9,10 +9,8 @@
     "test:size": "npm-run-all build size",
     "test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch",
     "test": "jest",
-    "test:react18": "jest -c jest-react18.config.js",
     "test:typescript": "yarn workspaces foreach --verbose --exclude emotion-monorepo run test:typescript",
     "test:ci": "jest --coverage --no-cache --ci --runInBand",
-    "test:react18:ci": "yarn test:react18 --coverage --no-cache --ci --runInBand",
     "test:dist": "yarn build && jest -c jest.dist.js --no-cache --ci --runInBand",
     "test:prod": "jest -c jest.prod.js --no-cache --ci --runInBand",
     "lint:check": "eslint .",
@@ -185,10 +183,11 @@
     "@changesets/cli": "^2.27.7",
     "@manypkg/cli": "^0.19.1",
     "@preconstruct/cli": "^2.8.8",
-    "@testing-library/react": "13.0.0-alpha.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^12.20.37",
-    "@types/react": "18.3.12",
+    "@types/react": "19.0.1",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
     "@typescript-eslint/parser": "^7.13.0",
     "babel-check-duplicated-nodes": "^1.0.0",
@@ -226,14 +225,11 @@
     "polished": "^1.2.1",
     "prettier": "^3.3.2",
     "raf": "^3.4.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-native": "^0.63.2",
     "react-primitives": "^0.8.1",
-    "react-test-renderer": "16.8.6",
-    "react18": "npm:[email protected]",
-    "react18-dom": "npm:[email protected]",
-    "react18-test-renderer": "npm:[email protected]",
+    "react-test-renderer": "19.0.0",
     "svg-tag-names": "^1.1.1",
     "through": "^2.3.8",
     "typescript": "^5.4.5",
@@ -242,6 +238,7 @@
   },
   "packageManager": "[email protected]",
   "resolutions": {
-    "@definitelytyped/[email protected]": "patch:@definitelytyped/dtslint@npm%3A0.0.112#./.yarn/patches/@definitelytyped-dtslint-npm-0.0.112-1e6b842976.patch"
+    "@definitelytyped/[email protected]": "patch:@definitelytyped/dtslint@npm%3A0.0.112#./.yarn/patches/@definitelytyped-dtslint-npm-0.0.112-1e6b842976.patch",
+    "@definitelytyped/typescript-versions@^0.0.112": "patch:@definitelytyped/typescript-versions@npm%3A0.0.112#./.yarn/patches/@definitelytyped-typescript-versions-npm-0.0.112-f668f50e03.patch"
   }
 }

package.json

@@ -10,10 +10,10 @@ exports[`component selector should be converted to use the emotion target classN
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <div
-    className="emotion-1 emotion-2"
+    class="emotion-1 emotion-2"
   />
 </div>
 `;