Use React 19

Author: Andarist

.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

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 .",
@@ -188,7 +186,7 @@
     "@testing-library/react": "13.0.0-alpha.5",
     "@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",
@@ -229,14 +227,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:react@18.0.0-rc.0-next-aa8f2bdbc-20211215",
-    "react18-dom": "npm:react-dom@18.0.0-rc.0-next-aa8f2bdbc-20211215",
-    "react18-test-renderer": "npm:react-test-renderer@18.0.0-rc.0-next-aa8f2bdbc-20211215",
+    "react-test-renderer": "19.0.0",
     "svg-tag-names": "^1.1.1",
     "through": "^2.3.8",
     "typescript": "^5.4.5",

package.json

@@ -81,8 +81,8 @@
     "@types/jest": "^29.5.12",
     "enzyme-to-json": "^3.6.1",
     "pretty-format": "^22.4.3",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "typescript": "^5.4.5"
   },
   "author": "Kye Hohenberger",

packages/jest/package.json

@@ -38,7 +38,7 @@ describe('jest-emotion with dom elements', () => {
     expect(output).toMatchSnapshot()
   })
 
-  test.skip('replaces class names and inserts styles into DOM element snapshots', () => {
+  test('replaces class names and inserts styles into DOM element snapshots', () => {
     const divRef = React.createRef()
     render(
       <div css={divStyle} ref={divRef}>
@@ -81,7 +81,7 @@ describe('jest-emotion with DOM elements disabled', () => {
     expect(output).toMatchSnapshot()
   })
 
-  test.skip('does not replace class names or insert styles into DOM element snapshots', () => {
+  test('does not replace class names or insert styles into DOM element snapshots', () => {
     const divRef = React.createRef()
     render(
       <div css={divStyle} ref={divRef}>
@@ -97,7 +97,7 @@ describe('jest-emotion with DOM elements disabled', () => {
   })
 })
 
-test.skip('allows to opt-out from styles printing', () => {
+test('allows to opt-out from styles printing', () => {
   const emotionPlugin = createSerializer({ includeStyles: false })
 
   const divStyle = css`

packages/jest/test/printer.test.js

@@ -36,7 +36,7 @@
   "devDependencies": {
     "@definitelytyped/dtslint": "0.0.112",
     "@types/react-native": "^0.63.2",
-    "react": "16.14.0",
+    "react": "19.0.0",
     "react-native": "^0.63.2",
     "typescript": "^5.4.5"
   },

packages/native/package.json

@@ -15,12 +15,12 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0-rc.0",
-    "react": ">=16.8.0"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@emotion/react": "11.14.0",
     "@types/css-to-react-native": "^3.0.0",
-    "react": "16.14.0"
+    "react": "19.0.0"
   },
   "homepage": "https://emotion.sh",
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/primitives-core",

packages/primitives-core/package.json

@@ -14,13 +14,13 @@
     "@emotion/primitives-core": "^11.13.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
+    "react": "^19.0.0",
     "react-primitives": "^0.8.1"
   },
   "devDependencies": {
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
-    "react": "16.14.0",
+    "react": "19.0.0",
     "react-primitives": "^0.8.1"
   },
   "homepage": "https://emotion.sh",

packages/primitives/package.json

@@ -122,7 +122,7 @@ describe('Emotion primitives', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  test.skip('ref', () => {
+  test('ref', () => {
     const StyledText = styled.Text`
       color: hotpink;
     `

packages/primitives/test/emotion-primitives.test.js

@@ -5,7 +5,7 @@ import { render, cleanup } from '@testing-library/react'
 
 afterEach(cleanup)
 
-test.skip('ref works', () => {
+test('ref works', () => {
   let ref = React.createRef()
   let { getByTestId } = render(
     <div data-testid="test" css={{ color: 'hotpink' }} ref={ref} />