From 12de7a9fe1bd2b9a151691e17f3dccf31b6e3909 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 10 Dec 2024 10:47:47 +0100
Subject: [PATCH 01/54] Use React 19

---
 .github/workflows/main.yml                    |  10 -
 jest-react18.config.js                        |   9 -
 package.json                                  |  13 +-
 packages/jest/package.json                    |   4 +-
 packages/jest/test/printer.test.js            |   6 +-
 packages/native/package.json                  |   2 +-
 packages/primitives-core/package.json         |   4 +-
 packages/primitives/package.json              |   4 +-
 .../test/emotion-primitives.test.js           |   2 +-
 packages/react/__tests__/ref.js               |   2 +-
 packages/react/__tests__/with-theme.js        |   2 +-
 packages/react/package.json                   |   4 +-
 packages/react/src/jsx-namespace.ts           |  94 +-------
 packages/styled/__tests__/styled-dom.js       |   2 +-
 packages/styled/package.json                  |   4 +-
 packages/styled/src/index.ts                  |   6 +-
 packages/styled/src/jsx-namespace.ts          |  12 -
 packages/styled/src/types.ts                  |  22 +-
 packages/styled/test/index.test.js            |   2 +-
 .../package.json                              |   4 +-
 playgrounds/cra/package.json                  |   4 +-
 playgrounds/nextjs/package.json               |   4 +-
 scripts/benchmarks/package.json               |   4 +-
 scripts/ssr-benchmarks/package.json           |   4 +-
 site/package.json                             |   6 +-
 yarn.lock                                     | 217 ++++++------------
 26 files changed, 136 insertions(+), 311 deletions(-)
 delete mode 100644 jest-react18.config.js
 delete mode 100644 packages/styled/src/jsx-namespace.ts

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index f6933c340e..71d76eb687 100644
--- a/.github/workflows/main.yml
+++ b/.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
diff --git a/jest-react18.config.js b/jest-react18.config.js
deleted file mode 100644
index 119490a9b6..0000000000
--- a/jest-react18.config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const baseConfig = require('./jest.config.js')
-
-module.exports = Object.assign({}, baseConfig, {
-  moduleNameMapper: {
-    '^react($|\\/.+)': 'react18$1',
-    '^react-dom($|\\/.+)': 'react18-dom$1',
-    '^react-test-renderer($|\\/.+)': 'react18-test-renderer$1'
-  }
-})
diff --git a/package.json b/package.json
index fba49a4d31..b78c07f425 100644
--- a/package.json
+++ b/package.json
@@ -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",
@@ -226,14 +224,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",
diff --git a/packages/jest/package.json b/packages/jest/package.json
index f017a682c8..44e15f56a6 100644
--- a/packages/jest/package.json
+++ b/packages/jest/package.json
@@ -63,8 +63,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",
diff --git a/packages/jest/test/printer.test.js b/packages/jest/test/printer.test.js
index 2c22b2c186..e1aa2902aa 100644
--- a/packages/jest/test/printer.test.js
+++ b/packages/jest/test/printer.test.js
@@ -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`
diff --git a/packages/native/package.json b/packages/native/package.json
index 3021231b82..d87fdb2fec 100644
--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -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"
   },
diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json
index 4e4b84408a..4581535aee 100644
--- a/packages/primitives-core/package.json
+++ b/packages/primitives-core/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",
diff --git a/packages/primitives/package.json b/packages/primitives/package.json
index 0126f1f8e1..1015117cc3 100644
--- a/packages/primitives/package.json
+++ b/packages/primitives/package.json
@@ -14,11 +14,11 @@
     "@emotion/primitives-core": "^11.13.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
+    "react": "^19.0.0",
     "react-primitives": "^0.8.1"
   },
   "devDependencies": {
-    "react": "16.14.0",
+    "react": "19.0.0",
     "react-primitives": "^0.8.1"
   },
   "homepage": "https://emotion.sh",
diff --git a/packages/primitives/test/emotion-primitives.test.js b/packages/primitives/test/emotion-primitives.test.js
index 17993dd812..547e822ecb 100644
--- a/packages/primitives/test/emotion-primitives.test.js
+++ b/packages/primitives/test/emotion-primitives.test.js
@@ -122,7 +122,7 @@ describe('Emotion primitives', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  test.skip('ref', () => {
+  test('ref', () => {
     const StyledText = styled.Text`
       color: hotpink;
     `
diff --git a/packages/react/__tests__/ref.js b/packages/react/__tests__/ref.js
index 792ef18716..0b82cce60b 100644
--- a/packages/react/__tests__/ref.js
+++ b/packages/react/__tests__/ref.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} />
diff --git a/packages/react/__tests__/with-theme.js b/packages/react/__tests__/with-theme.js
index 78c4944590..90eaa9b810 100644
--- a/packages/react/__tests__/with-theme.js
+++ b/packages/react/__tests__/with-theme.js
@@ -20,7 +20,7 @@ test('withTheme works', () => {
   ).toMatchSnapshot()
 })
 
-test.skip('should forward the ref', () => {
+test('should forward the ref', () => {
   function SomeComponent(props) {
     return <div ref={props.ref}>{props.theme.color}</div>
   }
diff --git a/packages/react/package.json b/packages/react/package.json
index eaa93caaa9..ee5b873c25 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -215,7 +215,7 @@
     "@emotion/weak-memoize": "^0.4.0"
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": "^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -229,7 +229,7 @@
     "@emotion/server": "11.11.0",
     "@emotion/styled": "11.14.0",
     "html-tag-names": "^1.1.2",
-    "react": "16.14.0",
+    "react": "19.0.0",
     "svg-tag-names": "^1.1.1",
     "typescript": "^5.4.5"
   },
diff --git a/packages/react/src/jsx-namespace.ts b/packages/react/src/jsx-namespace.ts
index 5bfd22c1e4..d7b5916e7c 100644
--- a/packages/react/src/jsx-namespace.ts
+++ b/packages/react/src/jsx-namespace.ts
@@ -1,106 +1,32 @@
-import 'react'
+import React from 'react'
 import { Interpolation } from '@emotion/serialize'
 import { Theme } from './theming'
 
-type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
-  ? true
-  : false
-
 type WithConditionalCSSProp<P> = 'className' extends keyof P
   ? string extends P['className' & keyof P]
     ? { css?: Interpolation<Theme> }
     : {}
   : {}
 
-// unpack all here to avoid infinite self-referencing when defining our own JSX namespace for the pre-React 19 case
-
-// the IsPreReact19 and @ts-ignore comments are to allow @emotion/react to support three different cases of types
-// - pre-React 18.something which didn't have `React.JSX`
-// - React 18.something with `React.JSX`
-// - React 19 with `React.JSX` and no global `JSX`
-// we support both pre-React 19 cases by using the global `JSX` and with the React 19 types, we use `React.JSX`
-// to make this work, we need @ts-ignore comments to ignore references that are invalid
-// though note that the error types resulting from ignoring the errors will never be used
-// since the pre vs post React 19 conditional will pick the one that won't error
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXElement = true extends IsPreReact19 ? JSX.Element : React.JSX.Element
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXElementClass = true extends IsPreReact19 ? JSX.ElementClass : React.JSX.ElementClass
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXElementAttributesProperty = true extends IsPreReact19 ? JSX.ElementAttributesProperty : React.JSX.ElementAttributesProperty
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXElementChildrenAttribute = true extends IsPreReact19 ? JSX.ElementChildrenAttribute : React.JSX.ElementChildrenAttribute
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19 ? JSX.LibraryManagedAttributes<C, P> : React.JSX.LibraryManagedAttributes<C, P>
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXIntrinsicAttributes = true extends IsPreReact19 ? JSX.IntrinsicAttributes : React.JSX.IntrinsicAttributes
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19 ? JSX.IntrinsicClassAttributes<T> : React.JSX.IntrinsicClassAttributes<T>
-
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXIntrinsicElements = true extends IsPreReact19 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements
-
-// based on the code from @types/react@18.2.8
-// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
-// prettier-ignore
-/** @ts-ignore */
-type ReactJSXElementType = true extends IsPreReact19 ? string | React.JSXElementConstructor<any> : React.JSX.ElementType
-
-export namespace ReactJSX {
-  export type ElementType = ReactJSXElementType
-  export interface Element extends ReactJSXElement {}
-  export interface ElementClass extends ReactJSXElementClass {}
-  export interface ElementAttributesProperty
-    extends ReactJSXElementAttributesProperty {}
-  export interface ElementChildrenAttribute
-    extends ReactJSXElementChildrenAttribute {}
-
-  export type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<
-    C,
-    P
-  >
-
-  export interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
-  export interface IntrinsicClassAttributes<T>
-    extends ReactJSXIntrinsicClassAttributes<T> {}
-
-  export type IntrinsicElements = ReactJSXIntrinsicElements
-}
-
 export namespace EmotionJSX {
-  export type ElementType = ReactJSXElementType
-  export interface Element extends ReactJSXElement {}
-  export interface ElementClass extends ReactJSXElementClass {}
+  export type ElementType = React.JSX.ElementType
+  export interface Element extends React.JSX.Element {}
+  export interface ElementClass extends React.JSX.ElementClass {}
   export interface ElementAttributesProperty
-    extends ReactJSXElementAttributesProperty {}
+    extends React.JSX.ElementAttributesProperty {}
   export interface ElementChildrenAttribute
-    extends ReactJSXElementChildrenAttribute {}
+    extends React.JSX.ElementChildrenAttribute {}
 
   export type LibraryManagedAttributes<C, P> = P extends unknown
-    ? WithConditionalCSSProp<P> & ReactJSXLibraryManagedAttributes<C, P>
+    ? WithConditionalCSSProp<P> & React.JSX.LibraryManagedAttributes<C, P>
     : never
 
-  export interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+  export interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
   export interface IntrinsicClassAttributes<T>
-    extends ReactJSXIntrinsicClassAttributes<T> {}
+    extends React.JSX.IntrinsicClassAttributes<T> {}
 
   export type IntrinsicElements = {
-    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+    [K in keyof React.JSX.IntrinsicElements]: React.JSX.IntrinsicElements[K] & {
       css?: Interpolation<Theme>
     }
   }
diff --git a/packages/styled/__tests__/styled-dom.js b/packages/styled/__tests__/styled-dom.js
index 2b4a00cdc1..91d35fae08 100644
--- a/packages/styled/__tests__/styled-dom.js
+++ b/packages/styled/__tests__/styled-dom.js
@@ -4,7 +4,7 @@ import { render, cleanup } from '@testing-library/react'
 
 afterEach(cleanup)
 
-test.skip('ref', () => {
+test('ref', () => {
   const H1 = styled.h1`
     font-size: 12px;
   `
diff --git a/packages/styled/package.json b/packages/styled/package.json
index c9686f24e9..73426edad5 100644
--- a/packages/styled/package.json
+++ b/packages/styled/package.json
@@ -20,7 +20,7 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0-rc.0",
-    "react": ">=16.8.0"
+    "react": "^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -32,7 +32,7 @@
     "@emotion/react": "11.14.0",
     "@types/hoist-non-react-statics": "^3.3.5",
     "hoist-non-react-statics": "^3.3.1",
-    "react": "16.14.0",
+    "react": "19.0.0",
     "typescript": "^5.4.5"
   },
   "publishConfig": {
diff --git a/packages/styled/src/index.ts b/packages/styled/src/index.ts
index 2d8877ff1a..d1ea418d95 100644
--- a/packages/styled/src/index.ts
+++ b/packages/styled/src/index.ts
@@ -1,6 +1,6 @@
+import React from 'react'
 import { Theme } from '@emotion/react'
 import styled from './base'
-import { ReactJSXIntrinsicElements } from './jsx-namespace'
 import { tags } from './tags'
 import {
   CreateStyledComponent,
@@ -21,12 +21,12 @@ export type {
 } from './types'
 
 export type StyledTags = {
-  [Tag in keyof ReactJSXIntrinsicElements]: CreateStyledComponent<
+  [Tag in keyof React.JSX.IntrinsicElements]: CreateStyledComponent<
     {
       theme?: Theme
       as?: React.ElementType
     },
-    ReactJSXIntrinsicElements[Tag]
+    React.JSX.IntrinsicElements[Tag]
   >
 }
 
diff --git a/packages/styled/src/jsx-namespace.ts b/packages/styled/src/jsx-namespace.ts
deleted file mode 100644
index 612e28f115..0000000000
--- a/packages/styled/src/jsx-namespace.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// this is basically a slimmed down copy of https://github.com/emotion-js/emotion/blob/main/packages/react/types/jsx-namespace.d.ts
-// it helps to avoid issues when combining newer `@emotion/styled` and older `@emotion/react` versions
-// in such setup, ReactJSX namespace won't exist in `@emotion/react` and that would lead to errors
-import 'react'
-
-type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
-  ? true
-  : false
-
-// prettier-ignore
-/** @ts-ignore */
-export type ReactJSXIntrinsicElements = true extends IsPreReact19 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements
diff --git a/packages/styled/src/types.ts b/packages/styled/src/types.ts
index b66897604a..b1fb5bb946 100644
--- a/packages/styled/src/types.ts
+++ b/packages/styled/src/types.ts
@@ -1,5 +1,5 @@
+import React from 'react'
 import { ComponentSelector, Interpolation } from '@emotion/serialize'
-import { ReactJSXIntrinsicElements } from './jsx-namespace'
 import { Theme } from '@emotion/react'
 
 /** Same as StyledOptions but shouldForwardProp must be a type guard */
@@ -38,9 +38,9 @@ export interface StyledComponent<
   withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
     component: C
   ): StyledComponent<ComponentProps & React.ComponentProps<C>>
-  withComponent<Tag extends keyof ReactJSXIntrinsicElements>(
+  withComponent<Tag extends keyof React.JSX.IntrinsicElements>(
     tag: Tag
-  ): StyledComponent<ComponentProps, ReactJSXIntrinsicElements[Tag]>
+  ): StyledComponent<ComponentProps, React.JSX.IntrinsicElements[Tag]>
 }
 
 /**
@@ -158,26 +158,26 @@ export interface CreateStyled {
   >
 
   <
-    Tag extends keyof ReactJSXIntrinsicElements,
-    ForwardedProps extends keyof ReactJSXIntrinsicElements[Tag] &
-      string = keyof ReactJSXIntrinsicElements[Tag] & string
+    Tag extends keyof React.JSX.IntrinsicElements,
+    ForwardedProps extends keyof React.JSX.IntrinsicElements[Tag] &
+      string = keyof React.JSX.IntrinsicElements[Tag] & string
   >(
     tag: Tag,
     options: FilteringStyledOptions<
-      ReactJSXIntrinsicElements[Tag],
+      React.JSX.IntrinsicElements[Tag],
       ForwardedProps
     >
   ): CreateStyledComponent<
     { theme?: Theme; as?: React.ElementType },
-    Pick<ReactJSXIntrinsicElements[Tag], ForwardedProps>
+    Pick<React.JSX.IntrinsicElements[Tag], ForwardedProps>
   >
 
-  <Tag extends keyof ReactJSXIntrinsicElements>(
+  <Tag extends keyof React.JSX.IntrinsicElements>(
     tag: Tag,
-    options?: StyledOptions<ReactJSXIntrinsicElements[Tag]>
+    options?: StyledOptions<React.JSX.IntrinsicElements[Tag]>
   ): CreateStyledComponent<
     { theme?: Theme; as?: React.ElementType },
-    ReactJSXIntrinsicElements[Tag]
+    React.JSX.IntrinsicElements[Tag]
   >
 }
 
diff --git a/packages/styled/test/index.test.js b/packages/styled/test/index.test.js
index bca425ef6e..f27fedcf98 100644
--- a/packages/styled/test/index.test.js
+++ b/packages/styled/test/index.test.js
@@ -225,7 +225,7 @@ describe('styled', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  test.skip('ref', () => {
+  test('ref', () => {
     const H1 = styled.h1`
       font-size: 12px;
     `
diff --git a/packages/use-insertion-effect-with-fallbacks/package.json b/packages/use-insertion-effect-with-fallbacks/package.json
index 95152098cd..b61a9bba7b 100644
--- a/packages/use-insertion-effect-with-fallbacks/package.json
+++ b/packages/use-insertion-effect-with-fallbacks/package.json
@@ -15,10 +15,10 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": "^19.0.0"
   },
   "devDependencies": {
-    "react": "16.14.0"
+    "react": "19.0.0"
   },
   "exports": {
     ".": {
diff --git a/playgrounds/cra/package.json b/playgrounds/cra/package.json
index 7704589fba..19a0cb191e 100644
--- a/playgrounds/cra/package.json
+++ b/playgrounds/cra/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-scripts": "4.0.3",
     "theme-ui": "^0.12.0"
   },
diff --git a/playgrounds/nextjs/package.json b/playgrounds/nextjs/package.json
index 5cbfb34cad..690436e5d7 100644
--- a/playgrounds/nextjs/package.json
+++ b/playgrounds/nextjs/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "next": "^12.2.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   }
 }
diff --git a/scripts/benchmarks/package.json b/scripts/benchmarks/package.json
index c1db9f44ed..b1bff0d8a1 100644
--- a/scripts/benchmarks/package.json
+++ b/scripts/benchmarks/package.json
@@ -15,8 +15,8 @@
     "http-server": "^14.0.0",
     "parcel": "^2.0.1",
     "puppeteer": "^11.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-native-web": "0.17.5",
     "stats-analysis": "^2.0.0"
   },
diff --git a/scripts/ssr-benchmarks/package.json b/scripts/ssr-benchmarks/package.json
index 23cd0c5243..18fab89893 100644
--- a/scripts/ssr-benchmarks/package.json
+++ b/scripts/ssr-benchmarks/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "benchmark": "^2.1.4",
     "d3-scale-chromatic": "^3.0.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   }
 }
diff --git a/site/package.json b/site/package.json
index 7ee8e2186f..4e29c48204 100644
--- a/site/package.json
+++ b/site/package.json
@@ -19,7 +19,7 @@
     "@types/js-yaml": "^4.0.5",
     "@types/node": "^12.20.37",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "18.3.12",
+    "@types/react": "19.0.1",
     "@types/remark-prism": "^1.3.3",
     "facepaint": "^1.2.1",
     "gray-matter": "^4.0.3",
@@ -27,8 +27,8 @@
     "next": "^12.2.0",
     "next-mdx-remote": "^4.0.3",
     "prism-react-renderer": "^1.3.5",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-simple-code-editor": "^0.11.2",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
diff --git a/yarn.lock b/yarn.lock
index a5121e8ee2..3c24a9b5c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2798,8 +2798,8 @@ __metadata:
     chalk: ^4.1.0
     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
     specificity: ^0.4.1
     stylis: 4.2.0
     typescript: ^5.4.5
@@ -2844,7 +2844,7 @@ __metadata:
     "@definitelytyped/dtslint": 0.0.112
     "@emotion/primitives-core": ^11.11.0
     "@types/react-native": ^0.63.2
-    react: 16.14.0
+    react: 19.0.0
     react-native: ^0.63.2
     typescript: ^5.4.5
   peerDependencies:
@@ -2859,10 +2859,10 @@ __metadata:
     "@emotion/react": 11.14.0
     "@types/css-to-react-native": ^3.0.0
     css-to-react-native: ^3.0.0
-    react: 16.14.0
+    react: 19.0.0
   peerDependencies:
     "@emotion/react": ^11.0.0-rc.0
-    react: ">=16.8.0"
+    react: ^19.0.0
   languageName: unknown
   linkType: soft
 
@@ -2873,10 +2873,10 @@ __metadata:
     "@emotion/babel-plugin": ^11.11.0
     "@emotion/is-prop-valid": ^1.2.1
     "@emotion/primitives-core": ^11.13.0
-    react: 16.14.0
+    react: 19.0.0
     react-primitives: ^0.8.1
   peerDependencies:
-    react: ">=16.8.0"
+    react: ^19.0.0
     react-primitives: ^0.8.1
   languageName: unknown
   linkType: soft
@@ -2898,11 +2898,11 @@ __metadata:
     "@emotion/utils": ^1.4.2
     "@emotion/weak-memoize": ^0.4.0
     html-tag-names: ^1.1.2
-    react: 16.14.0
+    react: 19.0.0
     svg-tag-names: ^1.1.1
     typescript: ^5.4.5
   peerDependencies:
-    react: ">=16.8.0"
+    react: ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
@@ -2968,11 +2968,11 @@ __metadata:
     "@emotion/utils": ^1.4.2
     "@types/hoist-non-react-statics": ^3.3.5
     hoist-non-react-statics: ^3.3.1
-    react: 16.14.0
+    react: 19.0.0
     typescript: ^5.4.5
   peerDependencies:
     "@emotion/react": ^11.0.0-rc.0
-    react: ">=16.8.0"
+    react: ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
@@ -2989,9 +2989,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@emotion/use-insertion-effect-with-fallbacks@workspace:packages/use-insertion-effect-with-fallbacks"
   dependencies:
-    react: 16.14.0
+    react: 19.0.0
   peerDependencies:
-    react: ">=16.8.0"
+    react: ^19.0.0
   languageName: unknown
   linkType: soft
 
@@ -6379,7 +6379,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:18.3.12, @types/react@npm:>=16":
+"@types/react@npm:*, @types/react@npm:>=16":
   version: 18.3.12
   resolution: "@types/react@npm:18.3.12"
   dependencies:
@@ -6389,6 +6389,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:19.0.1":
+  version: 19.0.1
+  resolution: "@types/react@npm:19.0.1"
+  dependencies:
+    csstype: ^3.0.2
+  checksum: e5e05cdf5fc53804e94548ca4e139102fffaab95d4c19be821d30d81dbab75ca3e30b72f2e2e750b90fcb535058cb694c4403402f14eb8a19a1282629c8222d8
+  languageName: node
+  linkType: hard
+
 "@types/remark-prism@npm:^1.3.3":
   version: 1.3.3
   resolution: "@types/remark-prism@npm:1.3.3"
@@ -8969,8 +8978,8 @@ __metadata:
     http-server: ^14.0.0
     parcel: ^2.0.1
     puppeteer: ^11.0.0
-    react: 16.14.0
-    react-dom: 16.14.0
+    react: 19.0.0
+    react-dom: 19.0.0
     react-native-web: 0.17.5
     stats-analysis: ^2.0.0
   languageName: unknown
@@ -10763,8 +10772,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "cra-playground@workspace:playgrounds/cra"
   dependencies:
-    react: 16.14.0
-    react-dom: 16.14.0
+    react: 19.0.0
+    react-dom: 19.0.0
     react-scripts: 4.0.3
     theme-ui: ^0.12.0
   languageName: unknown
@@ -12563,7 +12572,7 @@ __metadata:
     "@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
@@ -12601,14 +12610,11 @@ __metadata:
     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
@@ -12632,7 +12638,7 @@ __metadata:
     "@types/js-yaml": ^4.0.5
     "@types/node": ^12.20.37
     "@types/prismjs": ^1.26.0
-    "@types/react": 18.3.12
+    "@types/react": 19.0.1
     "@types/remark-prism": ^1.3.3
     facepaint: ^1.2.1
     gray-matter: ^4.0.3
@@ -12640,8 +12646,8 @@ __metadata:
     next: ^12.2.0
     next-mdx-remote: ^4.0.3
     prism-react-renderer: ^1.3.5
-    react: 16.14.0
-    react-dom: 16.14.0
+    react: 19.0.0
+    react-dom: 19.0.0
     react-simple-code-editor: ^0.11.2
     rehype-autolink-headings: ^6.1.1
     rehype-slug: ^5.0.1
@@ -22603,8 +22609,8 @@ __metadata:
   resolution: "nextjs-playground@workspace:playgrounds/nextjs"
   dependencies:
     next: ^12.2.0
-    react: 16.14.0
-    react-dom: 16.14.0
+    react: 19.0.0
+    react-dom: 19.0.0
   languageName: unknown
   linkType: soft
 
@@ -26133,7 +26139,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
+"prop-types@npm:^15.6.0, prop-types@npm:^15.7.2":
   version: 15.7.2
   resolution: "prop-types@npm:15.7.2"
   dependencies:
@@ -26520,17 +26526,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:16.14.0":
-  version: 16.14.0
-  resolution: "react-dom@npm:16.14.0"
+"react-dom@npm:19.0.0":
+  version: 19.0.0
+  resolution: "react-dom@npm:19.0.0"
   dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    prop-types: ^15.6.2
-    scheduler: ^0.19.1
+    scheduler: ^0.25.0
   peerDependencies:
-    react: ^16.14.0
-  checksum: 5a5c49da0f106b2655a69f96c622c347febcd10532db391c262b26aec225b235357d9da1834103457683482ab1b229af7a50f6927a6b70e53150275e31785544
+    react: ^19.0.0
+  checksum: 009cc6e575263a0d1906f9dd4aa6532d2d3d0d71e4c2b7777c8fe4de585fa06b5b77cdc2e0fbaa2f3a4a5e5d3305c189ba152153f358ee7da4d9d9ba5d3a8975
   languageName: node
   linkType: hard
 
@@ -26541,21 +26544,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:18.0.0-rc.0-next-aa8f2bdbc-20211215":
-  version: 18.0.0-rc.0-next-aa8f2bdbc-20211215
-  resolution: "react-is@npm:18.0.0-rc.0-next-aa8f2bdbc-20211215"
-  checksum: fe6a2d1ce2c876f7dd950a04ed4f19b40b0ccca22f6d139f9dda294c1f332c5b987cccf17f9f0b84087df54460b0c43f60f572fbf53d75b16aff73b59e38db58
-  languageName: node
-  linkType: hard
-
-"react-is@npm:^16.12.0 || ^17.0.0, react-is@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react-is@npm:17.0.2"
-  checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
-  languageName: node
-  linkType: hard
-
-"react-is@npm:^16.12.0, react-is@npm:^16.7.0, react-is@npm:^16.8.1, react-is@npm:^16.8.4, react-is@npm:^16.8.6":
+"react-is@npm:^16.12.0, react-is@npm:^16.7.0, react-is@npm:^16.8.1, react-is@npm:^16.8.4":
   version: 16.12.0
   resolution: "react-is@npm:16.12.0"
   checksum: 344dea88c669e94043426bffa8375414efcece8a84f0afba115b9d4d528d74f79e181e9ec57f60f0efb7204e631fb1ac885da2b2c5c67f1348a4f1e8e1654653
@@ -26569,6 +26558,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^17.0.1":
+  version: 17.0.2
+  resolution: "react-is@npm:17.0.2"
+  checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^18.0.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"
@@ -26576,6 +26572,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^19.0.0":
+  version: 19.0.0
+  resolution: "react-is@npm:19.0.0"
+  checksum: fbb3060bcb6b3e8e525b17f0872d1cf62a40b73fa7c5de02419069e2edd3e01cf1e8e86c8888f0733cff006175ee76ae927b40b6f0c4332bdda21020505ac90b
+  languageName: node
+  linkType: hard
+
 "react-native-web@npm:0.17.5":
   version: 0.17.5
   resolution: "react-native-web@npm:0.17.5"
@@ -26749,18 +26752,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-shallow-renderer@npm:^16.13.1":
-  version: 16.14.1
-  resolution: "react-shallow-renderer@npm:16.14.1"
-  dependencies:
-    object-assign: ^4.1.1
-    react-is: ^16.12.0 || ^17.0.0
-  peerDependencies:
-    react: ^16.0.0 || ^17.0.0
-  checksum: f344c663c48720d19559b4198b1f63ad47a3f11bedc92ede053a6c0706b5209e6110086f3ccc6db04eda9f0d1a415845956ddfb6ce09a922167d4831fcba9314
-  languageName: node
-  linkType: hard
-
 "react-simple-code-editor@npm:^0.11.2":
   version: 0.11.2
   resolution: "react-simple-code-editor@npm:0.11.2"
@@ -26771,17 +26762,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-test-renderer@npm:16.8.6":
-  version: 16.8.6
-  resolution: "react-test-renderer@npm:16.8.6"
+"react-test-renderer@npm:19.0.0":
+  version: 19.0.0
+  resolution: "react-test-renderer@npm:19.0.0"
   dependencies:
-    object-assign: ^4.1.1
-    prop-types: ^15.6.2
-    react-is: ^16.8.6
-    scheduler: ^0.13.6
+    react-is: ^19.0.0
+    scheduler: ^0.25.0
   peerDependencies:
-    react: ^16.0.0
-  checksum: b35014a515ee8c90432a9bf677e6d3a59af9ac7fb2ae8b59e54278596bb34e22a13788b7bc4348aa19acdfac48cf40d514d2dfa53fe972d92c4c4194e4f2b7c9
+    react: ^19.0.0
+  checksum: 2e1e527588c69e822b7aa25262c9f4a48161ede9cee5109b88228ecafbd91ce82f7afed176645efcba903ba5a43d05842a8229cdde220049e42a0cf679715dbc
   languageName: node
   linkType: hard
 
@@ -26792,51 +26781,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react18-dom@npm:react-dom@18.0.0-rc.0-next-aa8f2bdbc-20211215":
-  version: 18.0.0-rc.0-next-aa8f2bdbc-20211215
-  resolution: "react-dom@npm:18.0.0-rc.0-next-aa8f2bdbc-20211215"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: 0.21.0-rc.0-next-aa8f2bdbc-20211215
-  peerDependencies:
-    react: 18.0.0-rc.0-next-aa8f2bdbc-20211215
-  checksum: 66b259a0ff51455ca5d6f9f7760833495d3389f8d35b373360db868b1de32de8344e594895c63cd8c5dfa37bb3b7a53273b79a96731bbc3ce14c84079f95c86c
-  languageName: node
-  linkType: hard
-
-"react18-test-renderer@npm:react-test-renderer@18.0.0-rc.0-next-aa8f2bdbc-20211215":
-  version: 18.0.0-rc.0-next-aa8f2bdbc-20211215
-  resolution: "react-test-renderer@npm:18.0.0-rc.0-next-aa8f2bdbc-20211215"
-  dependencies:
-    object-assign: ^4.1.1
-    react-is: 18.0.0-rc.0-next-aa8f2bdbc-20211215
-    react-shallow-renderer: ^16.13.1
-    scheduler: 0.21.0-rc.0-next-aa8f2bdbc-20211215
-  peerDependencies:
-    react: 18.0.0-rc.0-next-aa8f2bdbc-20211215
-  checksum: 2f2e280bf83b264d26ffe1e75fcb4d00fe125920cb83eb1bd1afe6817b8098a6aa4edcb7cd5751c2cb78160fd7cce3ae5ccf3fbd7b80b9e3283a6fa5327e835b
-  languageName: node
-  linkType: hard
-
-"react18@npm:react@18.0.0-rc.0-next-aa8f2bdbc-20211215":
-  version: 18.0.0-rc.0-next-aa8f2bdbc-20211215
-  resolution: "react@npm:18.0.0-rc.0-next-aa8f2bdbc-20211215"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: 7be918fe040ef467c37035d8ef497aaafc64564588f8f9cfe49aeeecbdd0189e8d6a698821af91b17b05afc06ac15bbdc7e2ab1a59f74d2d4735284e74a2b8f9
-  languageName: node
-  linkType: hard
-
-"react@npm:16.14.0":
-  version: 16.14.0
-  resolution: "react@npm:16.14.0"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    prop-types: ^15.6.2
-  checksum: 8484f3ecb13414526f2a7412190575fc134da785c02695eb92bb6028c930bfe1c238d7be2a125088fec663cc7cda0a3623373c46807cf2c281f49c34b79881ac
+"react@npm:19.0.0":
+  version: 19.0.0
+  resolution: "react@npm:19.0.0"
+  checksum: 86de15d85b2465feb40297a90319c325cb07cf27191a361d47bcfe8c6126c973d660125aa67b8f4cbbe39f15a2f32efd0c814e98196d8e5b68c567ba40a399c6
   languageName: node
   linkType: hard
 
@@ -28194,7 +28142,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:0.19.1, scheduler@npm:^0.19.1":
+"scheduler@npm:0.19.1":
   version: 0.19.1
   resolution: "scheduler@npm:0.19.1"
   dependencies:
@@ -28204,23 +28152,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:0.21.0-rc.0-next-aa8f2bdbc-20211215":
-  version: 0.21.0-rc.0-next-aa8f2bdbc-20211215
-  resolution: "scheduler@npm:0.21.0-rc.0-next-aa8f2bdbc-20211215"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: 24ff46a9cb6645fb0ea6506dc3e090c0befcd03707cf4d962a972a19cbdbe4eeb34cf06b127e2c58417c21e7939edb3baa6805b319f8f7779c4addf0fd15d3c2
-  languageName: node
-  linkType: hard
-
-"scheduler@npm:^0.13.6":
-  version: 0.13.6
-  resolution: "scheduler@npm:0.13.6"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c82c705f6d0d6df87b26bf2cca33f427e91889438c0435ade3ee7f41860eda4dd7f3171ca2d93e8fe9431f3bd831ca0e267a401a0296e4b14de05e389f82d320
+"scheduler@npm:^0.25.0":
+  version: 0.25.0
+  resolution: "scheduler@npm:0.25.0"
+  checksum: b7bb9fddbf743e521e9aaa5198a03ae823f5e104ebee0cb9ec625392bb7da0baa1c28ab29cee4b1e407a94e76acc6eee91eeb749614f91f853efda2613531566
   languageName: node
   linkType: hard
 
@@ -29163,8 +29098,8 @@ __metadata:
   dependencies:
     benchmark: ^2.1.4
     d3-scale-chromatic: ^3.0.0
-    react: 16.14.0
-    react-dom: 16.14.0
+    react: 19.0.0
+    react-dom: 19.0.0
   languageName: unknown
   linkType: soft
 

From c4c06d4f0c866b9cdd0c568779cb645560aa7784 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 10 Dec 2024 10:56:03 +0100
Subject: [PATCH 02/54] Specify TS 5.0 as min TS version in most dtslint tests

---
 packages/jest/types/index.d.ts             | 2 +-
 packages/native/types/base.d.ts            | 2 +-
 packages/native/types/index.d.ts           | 2 +-
 packages/react/types/index.d.ts            | 2 +-
 packages/react/types/tests-theming.tsx     | 2 +-
 packages/server/types/create-instance.d.ts | 2 +-
 packages/server/types/index.d.ts           | 2 +-
 packages/styled/types/base.d.ts            | 2 +-
 packages/styled/types/index.d.ts           | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/jest/types/index.d.ts b/packages/jest/types/index.d.ts
index 758379af72..86b71005ea 100644
--- a/packages/jest/types/index.d.ts
+++ b/packages/jest/types/index.d.ts
@@ -1,5 +1,5 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 4.3
+// TypeScript Version: 5.0
 
 /// <reference types="jest" />
 
diff --git a/packages/native/types/base.d.ts b/packages/native/types/base.d.ts
index a14f22bada..b0b8df9c66 100644
--- a/packages/native/types/base.d.ts
+++ b/packages/native/types/base.d.ts
@@ -1,5 +1,5 @@
 // Definitions by: Pat Sissons <https://github.com/patsissons>
-// TypeScript Version: 3.4
+// TypeScript Version: 5.0
 
 import { Theme } from '@emotion/react'
 import * as RN from 'react-native'
diff --git a/packages/native/types/index.d.ts b/packages/native/types/index.d.ts
index e7c6036366..49f86bc73b 100644
--- a/packages/native/types/index.d.ts
+++ b/packages/native/types/index.d.ts
@@ -1,5 +1,5 @@
 // Definitions by: Pat Sissons <https://github.com/patsissons>
-// TypeScript Version: 4.1
+// TypeScript Version: 5.0
 
 import * as RN from 'react-native'
 import { Theme } from '@emotion/react'
diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts
index 343fcf296e..4f74e6a6ba 100644
--- a/packages/react/types/index.d.ts
+++ b/packages/react/types/index.d.ts
@@ -1,2 +1,2 @@
-// TypeScript Version: 4.1
+// TypeScript Version: 5.0
 export * from '..'
diff --git a/packages/react/types/tests-theming.tsx b/packages/react/types/tests-theming.tsx
index 0519d3fd0c..af70dc8bf5 100644
--- a/packages/react/types/tests-theming.tsx
+++ b/packages/react/types/tests-theming.tsx
@@ -1,5 +1,5 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 3.1
+// TypeScript Version: 5.0
 
 import * as React from 'react'
 import { useTheme, ThemeProvider, withTheme, Theme } from '@emotion/react'
diff --git a/packages/server/types/create-instance.d.ts b/packages/server/types/create-instance.d.ts
index 1e11db8bc0..b1586b3538 100644
--- a/packages/server/types/create-instance.d.ts
+++ b/packages/server/types/create-instance.d.ts
@@ -1,5 +1,5 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 2.8
+// TypeScript Version: 5.0
 
 /// <reference types="node" preserve="true" />
 import { EmotionCache } from '@emotion/utils'
diff --git a/packages/server/types/index.d.ts b/packages/server/types/index.d.ts
index 4acb432821..7b3dd584f7 100644
--- a/packages/server/types/index.d.ts
+++ b/packages/server/types/index.d.ts
@@ -1,5 +1,5 @@
 // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
-// TypeScript Version: 2.8
+// TypeScript Version: 5.0
 
 import { EmotionServer } from '@emotion/server/create-instance'
 
diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
index f8265bd861..06ddfa5b03 100644
--- a/packages/styled/types/base.d.ts
+++ b/packages/styled/types/base.d.ts
@@ -1,2 +1,2 @@
-// TypeScript Version: 4.1
+// TypeScript Version: 5.0
 export * from '../base'
diff --git a/packages/styled/types/index.d.ts b/packages/styled/types/index.d.ts
index 343fcf296e..4f74e6a6ba 100644
--- a/packages/styled/types/index.d.ts
+++ b/packages/styled/types/index.d.ts
@@ -1,2 +1,2 @@
-// TypeScript Version: 4.1
+// TypeScript Version: 5.0
 export * from '..'

From ed8213dfb65534c16b22f0e31ea3649e643668cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 10 Dec 2024 11:05:33 +0100
Subject: [PATCH 03/54] try patching dtslint

---
 ...escript-versions-npm-0.0.112-f668f50e03.patch | 16 ++++++++++++++++
 package.json                                     |  3 ++-
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 .yarn/patches/@definitelytyped-typescript-versions-npm-0.0.112-f668f50e03.patch

diff --git a/.yarn/patches/@definitelytyped-typescript-versions-npm-0.0.112-f668f50e03.patch b/.yarn/patches/@definitelytyped-typescript-versions-npm-0.0.112-f668f50e03.patch
new file mode 100644
index 0000000000..4e828d0aa5
--- /dev/null
+++ b/.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",
diff --git a/package.json b/package.json
index b78c07f425..be8f946f58 100644
--- a/package.json
+++ b/package.json
@@ -237,6 +237,7 @@
   },
   "packageManager": "yarn@3.2.3",
   "resolutions": {
-    "@definitelytyped/dtslint@0.0.112": "patch:@definitelytyped/dtslint@npm%3A0.0.112#./.yarn/patches/@definitelytyped-dtslint-npm-0.0.112-1e6b842976.patch"
+    "@definitelytyped/dtslint@0.0.112": "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"
   }
 }

From dd2e71140538b1cf42d032d311bfbf14a372211d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 10 Dec 2024 11:08:42 +0100
Subject: [PATCH 04/54] update lockfile

---
 yarn.lock | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 3c24a9b5c0..3699c2c784 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2612,13 +2612,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@definitelytyped/typescript-versions@npm:^0.0.112":
+"@definitelytyped/typescript-versions@npm:0.0.112":
   version: 0.0.112
   resolution: "@definitelytyped/typescript-versions@npm:0.0.112"
   checksum: eb3407eeb7af220206870024edafe9eb5fc9cc0835910cbf8b368fe3bf6e41f832d0be7ddbfbe5efe22c29e431f106183de844087edf49ecb2e4614b024a9ab4
   languageName: node
   linkType: hard
 
+"@definitelytyped/typescript-versions@patch:@definitelytyped/typescript-versions@npm%3A0.0.112#./.yarn/patches/@definitelytyped-typescript-versions-npm-0.0.112-f668f50e03.patch::locator=emotion-monorepo%40workspace%3A.":
+  version: 0.0.112
+  resolution: "@definitelytyped/typescript-versions@patch:@definitelytyped/typescript-versions@npm%3A0.0.112#./.yarn/patches/@definitelytyped-typescript-versions-npm-0.0.112-f668f50e03.patch::version=0.0.112&hash=1df6e3&locator=emotion-monorepo%40workspace%3A."
+  checksum: 962aa73c633040d247dfeeda0d9548b6a48342c6be1fac1586c75dc5c5cfbb1c0e6d11a187d6e7100eddef311f21c8cccf399d5ec271b9500e930064e050cc45
+  languageName: node
+  linkType: hard
+
 "@definitelytyped/utils@npm:^0.0.112":
   version: 0.0.112
   resolution: "@definitelytyped/utils@npm:0.0.112"

From ed1823f1f58d07b5dd11c81657b24abbc3f317fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 10 Dec 2024 11:15:00 +0100
Subject: [PATCH 05/54] fixed TS error

---
 packages/react/src/global.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/global.tsx b/packages/react/src/global.tsx
index 77e1952e84..97bc3b9981 100644
--- a/packages/react/src/global.tsx
+++ b/packages/react/src/global.tsx
@@ -84,7 +84,7 @@ export let Global = /* #__PURE__ */ withEmotionCache<GlobalProps>(
 
     let sheetRef = React.useRef<
       [sheet: StyleSheet, isRehydrating: boolean] | undefined
-    >()
+    >(undefined)
 
     useInsertionEffectWithLayoutFallback(() => {
       const key = `${cache.key}-global`

From 4e49e28ebbc7294b4cff678ef68bb4065e0b52ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 10 Dec 2024 11:26:35 +0100
Subject: [PATCH 06/54] dedupe `@types/react`

---
 yarn.lock | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 3699c2c784..abbae625e1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6363,13 +6363,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*":
-  version: 15.7.1
-  resolution: "@types/prop-types@npm:15.7.1"
-  checksum: f8b33d7d15a70d0b709bcf5f281c7647ca8aaeaf377431725b4fda4949f2845476652d355eec0cde2a62ba3f7a5fb3194788aebaecc2048eb28db201121c2310
-  languageName: node
-  linkType: hard
-
 "@types/q@npm:^1.5.1":
   version: 1.5.2
   resolution: "@types/q@npm:1.5.2"
@@ -6386,17 +6379,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16":
-  version: 18.3.12
-  resolution: "@types/react@npm:18.3.12"
-  dependencies:
-    "@types/prop-types": "*"
-    csstype: ^3.0.2
-  checksum: 4ab1577a8c2105a5e316536f724117c90eee5f4bd5c137fc82a2253d8c1fd299dedaa07e8dfc95d6e2f04a4be3cb8b0e1b06098c6233ebd55c508d88099395b7
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:19.0.1":
+"@types/react@npm:*, @types/react@npm:19.0.1, @types/react@npm:>=16":
   version: 19.0.1
   resolution: "@types/react@npm:19.0.1"
   dependencies:

From a46a08124cb30a3487cbd468ac05fcf6c09075f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 10 Dec 2024 11:46:24 +0100
Subject: [PATCH 07/54] update react testing library

---
 package.json |   2 +-
 yarn.lock    | 103 ++++++++-------------------------------------------
 2 files changed, 16 insertions(+), 89 deletions(-)

diff --git a/package.json b/package.json
index be8f946f58..2c9c8a2b94 100644
--- a/package.json
+++ b/package.json
@@ -183,7 +183,7 @@
     "@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/react": "^16.1.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^12.20.37",
     "@types/react": "19.0.1",
diff --git a/yarn.lock b/yarn.lock
index abbae625e1..4ede479486 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3775,19 +3775,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/types@npm:^27.4.2":
-  version: 27.4.2
-  resolution: "@jest/types@npm:27.4.2"
-  dependencies:
-    "@types/istanbul-lib-coverage": ^2.0.0
-    "@types/istanbul-reports": ^3.0.0
-    "@types/node": "*"
-    "@types/yargs": ^16.0.0
-    chalk: ^4.0.0
-  checksum: 1191022023e32763063cc1c8b1143fa316fb05db2f9698280a7bdbafcabd989e5fd64f8eb875b8a2e54c53f25dba45ed2eea8ced394d9e484da0fda674cd17a5
-  languageName: node
-  linkType: hard
-
 "@jest/types@npm:^29.6.3":
   version: 29.6.3
   resolution: "@jest/types@npm:29.6.3"
@@ -5735,32 +5722,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.5.0":
-  version: 8.11.1
-  resolution: "@testing-library/dom@npm:8.11.1"
+"@testing-library/react@npm:^16.1.0":
+  version: 16.1.0
+  resolution: "@testing-library/react@npm:16.1.0"
   dependencies:
-    "@babel/code-frame": ^7.10.4
     "@babel/runtime": ^7.12.5
-    "@types/aria-query": ^4.2.0
-    aria-query: ^5.0.0
-    chalk: ^4.1.0
-    dom-accessibility-api: ^0.5.9
-    lz-string: ^1.4.4
-    pretty-format: ^27.0.2
-  checksum: 082104b104def94db071fe35f967124c52d387d995a61327cd60ed39c310126f4cde2fa51054c37977cd3a2082311795417413506ad1a14df1010bd1cbb02bc5
-  languageName: node
-  linkType: hard
-
-"@testing-library/react@npm:13.0.0-alpha.5":
-  version: 13.0.0-alpha.5
-  resolution: "@testing-library/react@npm:13.0.0-alpha.5"
-  dependencies:
-    "@babel/runtime": ^7.12.5
-    "@testing-library/dom": ^8.5.0
   peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: cc9e684adcacb3ad7cb8265d52f3ef9fb292f8aece9ac54d22b55f9a89cfdee409fdcb940a14f374aa7ea5f52b22dcc9baa15ad98b7e6bdec3fe44d8082f4e88
+    "@testing-library/dom": ^10.0.0
+    "@types/react": ^18.0.0 || ^19.0.0
+    "@types/react-dom": ^18.0.0 || ^19.0.0
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 5dc8e7abda23d108c29f43cdacd43fad750e981ee87ee8902fb349a2683f2f774ef1136f2d3ef3d9efb87e8b04426c43d7b46e95511cd7c9d37b10c3bdd3e9e2
   languageName: node
   linkType: hard
 
@@ -5891,13 +5869,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/aria-query@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "@types/aria-query@npm:4.2.0"
-  checksum: e4a3748c5511deb88e93c6faf2acb0730233ff75018e9aaed95e3d2833880e9d0eda7e08e4315a827872471779471585671d08bae00ac8b9813fc140194b52e5
-  languageName: node
-  linkType: hard
-
 "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.7":
   version: 7.1.10
   resolution: "@types/babel__core@npm:7.1.10"
@@ -6556,15 +6527,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^16.0.0":
-  version: 16.0.4
-  resolution: "@types/yargs@npm:16.0.4"
-  dependencies:
-    "@types/yargs-parser": "*"
-  checksum: caa21d2c957592fe2184a8368c8cbe5a82a6c2e2f2893722e489f842dc5963293d2f3120bc06fe3933d60a3a0d1e2eb269649fd6b1947fe1820f8841ba611dd9
-  languageName: node
-  linkType: hard
-
 "@types/yargs@npm:^17.0.8":
   version: 17.0.32
   resolution: "@types/yargs@npm:17.0.32"
@@ -7831,13 +7793,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "aria-query@npm:5.0.0"
-  checksum: c41f98866c5a304561ee8cae55856711cddad6f3f85d8cb43cc5f79667078d9b8979ce32d244c1ff364e6463a4d0b6865804a33ccc717fed701b281cf7dc6296
-  languageName: node
-  linkType: hard
-
 "arity-n@npm:^1.0.4":
   version: 1.0.4
   resolution: "arity-n@npm:1.0.4"
@@ -12191,13 +12146,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-accessibility-api@npm:^0.5.9":
-  version: 0.5.10
-  resolution: "dom-accessibility-api@npm:0.5.10"
-  checksum: c05949889b02f5313d100778e9f736f9bddfb1da47387d351833f0b5d60d6230d4fcb849e124a8a1591706b6200337fa40f0f4f3817dce1459309e075f48371c
-  languageName: node
-  linkType: hard
-
 "dom-converter@npm:^0.2":
   version: 0.2.0
   resolution: "dom-converter@npm:0.2.0"
@@ -12559,7 +12507,7 @@ __metadata:
     "@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/react": ^16.1.0
     "@types/jest": ^29.5.12
     "@types/node": ^12.20.37
     "@types/react": 19.0.1
@@ -20500,15 +20448,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.4.4":
-  version: 1.4.4
-  resolution: "lz-string@npm:1.4.4"
-  bin:
-    lz-string: bin/bin.js
-  checksum: 54e31238a61a84d8f664d9860a9fba7310c5b97a52c444f80543069bc084815eff40b8d4474ae1d93992fdf6c252dca37cf27f6adbeb4dbc3df2f3ac773d0e61
-  languageName: node
-  linkType: hard
-
 "magic-string@npm:^0.25.0, magic-string@npm:^0.25.7":
   version: 0.25.7
   resolution: "magic-string@npm:0.25.7"
@@ -25993,18 +25932,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^27.0.2":
-  version: 27.4.2
-  resolution: "pretty-format@npm:27.4.2"
-  dependencies:
-    "@jest/types": ^27.4.2
-    ansi-regex: ^5.0.1
-    ansi-styles: ^5.0.0
-    react-is: ^17.0.1
-  checksum: 0daaf00c4dcb35493e57d30147e8045d0c45cb47fc4c94e3ab1892401abe939627c39975c77cc81eb2581aaa5b12bf23ef669fa550bec68b396fb79dd8c10afa
-  languageName: node
-  linkType: hard
-
 "pretty-format@npm:^28.0.0, pretty-format@npm:^28.1.3":
   version: 28.1.3
   resolution: "pretty-format@npm:28.1.3"

From a6cc13f0e96fd21a36954bac2ec300d857fe1332 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Wed, 11 Dec 2024 11:53:31 +0100
Subject: [PATCH 08/54] add `@testing-library/dom`

---
 package.json |  1 +
 yarn.lock    | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)

diff --git a/package.json b/package.json
index 2c9c8a2b94..0dc1dae885 100644
--- a/package.json
+++ b/package.json
@@ -183,6 +183,7 @@
     "@changesets/cli": "^2.27.7",
     "@manypkg/cli": "^0.19.1",
     "@preconstruct/cli": "^2.8.8",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^12.20.37",
diff --git a/yarn.lock b/yarn.lock
index 4ede479486..caaa5137a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5722,6 +5722,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/dom@npm:^10.4.0":
+  version: 10.4.0
+  resolution: "@testing-library/dom@npm:10.4.0"
+  dependencies:
+    "@babel/code-frame": ^7.10.4
+    "@babel/runtime": ^7.12.5
+    "@types/aria-query": ^5.0.1
+    aria-query: 5.3.0
+    chalk: ^4.1.0
+    dom-accessibility-api: ^0.5.9
+    lz-string: ^1.5.0
+    pretty-format: ^27.0.2
+  checksum: bb128b90be0c8cd78c5f5e67aa45f53de614cc048a2b50b230e736ec710805ac6c73375af354b83c74d710b3928d52b83a273a4cb89de4eb3efe49e91e706837
+  languageName: node
+  linkType: hard
+
 "@testing-library/react@npm:^16.1.0":
   version: 16.1.0
   resolution: "@testing-library/react@npm:16.1.0"
@@ -5869,6 +5885,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/aria-query@npm:^5.0.1":
+  version: 5.0.4
+  resolution: "@types/aria-query@npm:5.0.4"
+  checksum: ad8b87e4ad64255db5f0a73bc2b4da9b146c38a3a8ab4d9306154334e0fc67ae64e76bfa298eebd1e71830591fb15987e5de7111bdb36a2221bdc379e3415fb0
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.7":
   version: 7.1.10
   resolution: "@types/babel__core@npm:7.1.10"
@@ -7783,6 +7806,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:5.3.0":
+  version: 5.3.0
+  resolution: "aria-query@npm:5.3.0"
+  dependencies:
+    dequal: ^2.0.3
+  checksum: 305bd73c76756117b59aba121d08f413c7ff5e80fa1b98e217a3443fcddb9a232ee790e24e432b59ae7625aebcf4c47cb01c2cac872994f0b426f5bdfcd96ba9
+  languageName: node
+  linkType: hard
+
 "aria-query@npm:^4.2.2":
   version: 4.2.2
   resolution: "aria-query@npm:4.2.2"
@@ -11945,6 +11977,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dequal@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "dequal@npm:2.0.3"
+  checksum: 8679b850e1a3d0ebbc46ee780d5df7b478c23f335887464023a631d1b9af051ad4a6595a44220f9ff8ff95a8ddccf019b5ad778a976fd7bbf77383d36f412f90
+  languageName: node
+  linkType: hard
+
 "des.js@npm:^1.0.0":
   version: 1.0.0
   resolution: "des.js@npm:1.0.0"
@@ -12146,6 +12185,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-accessibility-api@npm:^0.5.9":
+  version: 0.5.16
+  resolution: "dom-accessibility-api@npm:0.5.16"
+  checksum: 005eb283caef57fc1adec4d5df4dd49189b628f2f575af45decb210e04d634459e3f1ee64f18b41e2dcf200c844bc1d9279d80807e686a30d69a4756151ad248
+  languageName: node
+  linkType: hard
+
 "dom-converter@npm:^0.2":
   version: 0.2.0
   resolution: "dom-converter@npm:0.2.0"
@@ -12507,6 +12553,7 @@ __metadata:
     "@changesets/cli": ^2.27.7
     "@manypkg/cli": ^0.19.1
     "@preconstruct/cli": ^2.8.8
+    "@testing-library/dom": ^10.4.0
     "@testing-library/react": ^16.1.0
     "@types/jest": ^29.5.12
     "@types/node": ^12.20.37
@@ -20448,6 +20495,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lz-string@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.25.0, magic-string@npm:^0.25.7":
   version: 0.25.7
   resolution: "magic-string@npm:0.25.7"
@@ -25932,6 +25988,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:^27.0.2":
+  version: 27.5.1
+  resolution: "pretty-format@npm:27.5.1"
+  dependencies:
+    ansi-regex: ^5.0.1
+    ansi-styles: ^5.0.0
+    react-is: ^17.0.1
+  checksum: cf610cffcb793885d16f184a62162f2dd0df31642d9a18edf4ca298e909a8fe80bdbf556d5c9573992c102ce8bf948691da91bf9739bee0ffb6e79c8a8a6e088
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^28.0.0, pretty-format@npm:^28.1.3":
   version: 28.1.3
   resolution: "pretty-format@npm:28.1.3"

From 5f3a38e7f53d12a6151a10ca7676243ca926ec42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 11:56:05 +0100
Subject: [PATCH 09/54] migrate tests

---
 packages/css/test/component-selector.test.js  |  17 +-
 packages/css/test/css.test.js                 | 239 +++++---
 packages/css/test/cx.test.js                  |  75 ++-
 .../instance/__snapshots__/css.test.js.snap   |  70 +--
 packages/css/test/instance/css.test.js        | 209 ++++---
 packages/css/test/instance/inline.test.js     |   2 +-
 packages/css/test/keyframes.test.js           |  63 ++-
 packages/css/test/label-pattern.test.js       |  19 +-
 packages/css/test/no-babel/index.test.js      | 141 +++--
 packages/css/test/warnings.test.js            |  11 +-
 packages/jest/test/matchers.test.js           | 217 ++++----
 packages/jest/test/printer.test.js            |  85 +--
 .../primitives/test/no-babel/basic.test.js    |  17 +-
 packages/react/__tests__/babel/css.js         |  27 +-
 packages/react/__tests__/class-names.js       | 113 ++--
 packages/react/__tests__/css-cache-hash.js    |  13 +-
 packages/react/__tests__/css.js               | 303 +++++-----
 packages/react/__tests__/custom-cache.js      |  13 +-
 packages/react/__tests__/keyframes.js         |  13 +-
 packages/react/__tests__/legacy-class-name.js |  45 +-
 packages/react/__tests__/theme-provider.js    | 101 ++--
 packages/react/__tests__/use-theme.js         |  19 +-
 packages/react/__tests__/warnings.js          | 318 +++++------
 packages/react/__tests__/with-theme.js        |  34 +-
 packages/server/test/inline.test.js           |   2 +-
 .../__tests__/__snapshots__/styled.js.snap    |  94 ++--
 packages/styled/__tests__/edge-cases.js       |  11 +-
 packages/styled/__tests__/styled.js           | 525 ++++++++----------
 .../__snapshots__/composition.test.js.snap    |  20 +-
 .../test/__snapshots__/index.test.js.snap     |   2 +-
 .../__snapshots__/source-map.test.js.snap     |  12 +-
 packages/styled/test/babel-plugin.test.js     |   7 +-
 .../styled/test/component-selector.test.js    |  65 ++-
 packages/styled/test/composition.test.js      |  96 ++--
 packages/styled/test/index.test.js            | 219 +++++---
 packages/styled/test/prop-filtering.test.js   | 269 +++++----
 packages/styled/test/source-map.test.js       |  13 +-
 packages/styled/test/theming.test.js          |  47 +-
 scripts/test-utils/src/index.js               |   2 +-
 39 files changed, 1911 insertions(+), 1637 deletions(-)

diff --git a/packages/css/test/component-selector.test.js b/packages/css/test/component-selector.test.js
index a7eab145e1..90726d73cf 100644
--- a/packages/css/test/component-selector.test.js
+++ b/packages/css/test/component-selector.test.js
@@ -1,11 +1,12 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import styled from '@emotion/styled'
 import renderer from 'react-test-renderer'
 import { css } from '@emotion/css'
 
 describe('component selector', () => {
-  test('should be converted to use the emotion target className', () => {
+  test('should be converted to use the emotion target className', async () => {
     const FakeComponent = styled.div`
       color: blue;
     `
@@ -15,13 +16,15 @@ describe('component selector', () => {
         color: red;
       }
     `
-    const tree = renderer
-      .create(
-        <div className={cls2}>
-          <FakeComponent />
-        </div>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div className={cls2}>
+            <FakeComponent />
+          </div>
+        )
       )
-      .toJSON()
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 })
diff --git a/packages/css/test/css.test.js b/packages/css/test/css.test.js
index df86dd5722..5e291cecb6 100644
--- a/packages/css/test/css.test.js
+++ b/packages/css/test/css.test.js
@@ -1,19 +1,22 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import renderer from 'react-test-renderer'
 import { css, flush, sheet } from '@emotion/css'
 
 describe('css', () => {
-  test('float property', () => {
+  test('float property', async () => {
     const cls1 = css`
       float: left;
     `
 
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('handles more than 10 dynamic properties', () => {
+  test('handles more than 10 dynamic properties', async () => {
     const cls1 = css`
       text-decoration: ${'underline'};
       border-right: solid blue 54px;
@@ -28,36 +31,46 @@ describe('css', () => {
       text-align: ${'center'};
     `
 
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('falsy value in nested selector on object', () => {
+  test('falsy value in nested selector on object', async () => {
     const cls1 = css({ ':hover': { display: null, color: 'hotpink' } })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('boolean as value', () => {
+  test('boolean as value', async () => {
     const cls1 = css({ display: 'flex', color: false, backgroundColor: true })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('auto px', () => {
+  test('auto px', async () => {
     const cls1 = css({ display: 'flex', flex: 1, fontSize: 10, '--custom': 5 })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('random interpolation with undefined values', () => {
+  test('random interpolation with undefined values', async () => {
     const cls2 = css`
       ${undefined};
       justify-content: center;
     `
-    const tree = renderer.create(<div className={cls2} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls2} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('random expression', () => {
+  test('random expression', async () => {
     const cls2 = css`
       font-size: 20px;
       @media (min-width: 420px) {
@@ -70,11 +83,13 @@ describe('css', () => {
       }
       background: green;
     `
-    const tree = renderer.create(<div className={cls2} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls2} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('simple composition', () => {
+  test('simple composition', async () => {
     const cls1 = css`
       display: flex;
       &:hover {
@@ -85,11 +100,13 @@ describe('css', () => {
       ${cls1};
       justify-content: center;
     `
-    const tree = renderer.create(<div className={cls2} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls2} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('handles objects', () => {
+  test('handles objects', async () => {
     const cls1 = css({
       float: 'left',
       display: 'flex',
@@ -98,23 +115,29 @@ describe('css', () => {
       height: 50,
       width: 20
     })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('handles array of objects', () => {
+  test('handles array of objects', async () => {
     const cls1 = css([{ height: 50, width: 20 }, null])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('computed key is only dynamic', () => {
+  test('computed key is only dynamic', async () => {
     const cls1 = css({ fontSize: 10, [`w${'idth'}`]: 20 })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('composition with objects', () => {
+  test('composition with objects', async () => {
     const cls1 = css({
       display: 'flex',
       width: 30,
@@ -133,19 +156,23 @@ describe('css', () => {
       justify-content: center;
     `
 
-    const tree = renderer.create(<div className={cls2} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls2} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('@supports', () => {
+  test('@supports', async () => {
     const cls1 = css`
       @supports (display: grid) {
         display: grid;
       }
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test.skip('nested at rules', () => {
+  test.skip('nested at rules', async () => {
     const cls1 = css`
       @supports (display: grid) {
         display: grid;
@@ -160,10 +187,12 @@ describe('css', () => {
         }
       }
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('nested array', () => {
+  test('nested array', async () => {
     const cls1 = css([
       [{ display: 'inline' }],
       [{ display: 'inline-block' }],
@@ -184,29 +213,37 @@ describe('css', () => {
         ]
       ]
     ])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('explicit false', () => {
+  test('explicit false', async () => {
     const cls1 = css(false)
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('array with explicit false', () => {
+  test('array with explicit false', async () => {
     const cls1 = css([[{ display: 'flex' }], false])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('array with explicit true', () => {
+  test('array with explicit true', async () => {
     const cls1 = css([[{ display: 'flex' }], true])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('nested', () => {
+  test('nested', async () => {
     const cls1 = css`
       color: yellow;
       & .some-class {
@@ -219,82 +256,104 @@ describe('css', () => {
         }
       }
     `
-    const tree = renderer
-      .create(
-        <div className={cls1}>
-          <div className="some-class">
-            <div className="some-other-class" />
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div className={cls1}>
+            <div className="some-class">
+              <div className="some-other-class" />
+            </div>
           </div>
-        </div>
+        )
       )
-      .toJSON()
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('explicit &', () => {
+  test('explicit &', async () => {
     flush()
     const cls1 = css`
       &.another-class {
         display: flex;
       }
     `
-    const tree = renderer
-      .create(<div className={`${cls1} another-class`} />)
-      .toJSON()
+    const tree = (
+      await act(() =>
+        renderer.create(<div className={`${cls1} another-class`} />)
+      )
+    ).toJSON()
     expect(tree).toMatchSnapshot()
     expect(sheet).toMatchSnapshot()
     flush()
   })
-  test('falsy property value in object', () => {
+  test('falsy property value in object', async () => {
     const cls = css({ display: 'flex', backgroundColor: undefined })
-    const tree = renderer.create(<div className={cls} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('registered styles as nested selector value in object', () => {
+  test('registered styles as nested selector value in object', async () => {
     const cls = css({ display: 'flex', backgroundColor: 'hotpink' })
     const cls1 = css({ ':hover': cls })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('composition stuff', () => {
+  test('composition stuff', async () => {
     const cls1 = css({ justifyContent: 'center' })
     const cls2 = css([cls1])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
-    const tree2 = renderer.create(<div className={cls2} />).toJSON()
+    const tree2 = (
+      await act(() => renderer.create(<div className={cls2} />))
+    ).toJSON()
     expect(tree2).toMatchSnapshot()
   })
-  test('null rule', () => {
+  test('null rule', async () => {
     const cls1 = css()
 
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('css variables', () => {
+  test('css variables', async () => {
     const cls1 = css`
       --some-var: 1px;
       width: var(--some-var);
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('null value', () => {
+  test('null value', async () => {
     const cls1 = css(null)
 
-    expect(renderer.create(<div className={cls1} />).toJSON()).toMatchSnapshot()
+    expect(
+      (await act(() => renderer.create(<div className={cls1} />))).toJSON()
+    ).toMatchSnapshot()
   })
 
-  test('flushes correctly', () => {
+  test('flushes correctly', async () => {
     const cls1 = css`
       display: flex;
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
     flush()
-    const tree2 = renderer.create(<div className={cls1} />).toJSON()
+    const tree2 = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree2).toMatchSnapshot()
   })
-  test('media query specificity', () => {
+  test('media query specificity', async () => {
     flush()
     const cls = css`
       width: 32px;
@@ -307,32 +366,40 @@ describe('css', () => {
       }
     `
 
-    const tree = renderer.create(<div className={cls} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls} />))
+    ).toJSON()
     expect(sheet).toMatchSnapshot()
     expect(tree).toMatchSnapshot()
     flush()
   })
-  test('weakmap', () => {
+  test('weakmap', async () => {
     const styles = { display: 'flex' }
     const cls1 = css(styles)
     const cls2 = css(styles)
-    const tree1 = renderer.create(<div className={cls1} />).toJSON()
+    const tree1 = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree1).toMatchSnapshot()
-    const tree2 = renderer.create(<div className={cls2} />).toJSON()
+    const tree2 = (
+      await act(() => renderer.create(<div className={cls2} />))
+    ).toJSON()
     expect(tree2).toMatchSnapshot()
   })
 
-  test('manually use label property', () => {
+  test('manually use label property', async () => {
     flush()
     const cls1 = css`
       color: hotpink;
       label: wow;
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
     expect(sheet).toMatchSnapshot()
   })
-  test('multiline declaration', () => {
+  test('multiline declaration', async () => {
     /* eslint-disable prettier/prettier */
     const cls1 = css`
       display: grid;
@@ -343,10 +410,12 @@ describe('css', () => {
     `
     /* eslint-enable prettier/prettier */
 
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('multiline selector', () => {
+  test('multiline selector', async () => {
     /* eslint-disable prettier/prettier */
     const cls1 = css`
       .my-class:hover .its-child {
@@ -355,10 +424,12 @@ describe('css', () => {
     `
     /* eslint-enable prettier/prettier */
 
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('rule after media query', () => {
+  test('rule after media query', async () => {
     const cls1 = css`
       @media (min-width: 600px) {
         color: green;
@@ -367,10 +438,12 @@ describe('css', () => {
         color: hotpink;
       }
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('nested at rule', () => {
+  test('nested at rule', async () => {
     const cls = css({
       '@media (min-width: 980px)': {
         backgroundColor: 'blue',
@@ -380,14 +453,18 @@ describe('css', () => {
       }
     })
     // this works correctly but `css` doesn't print it correctly so the snapshot doesn't look correct
-    const tree = renderer.create(<div className={cls} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('array fallback', () => {
+  test('array fallback', async () => {
     const cls = css({
       color: ['yellow', 'hotpink']
     })
-    const tree = renderer.create(<div className={cls} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 })
diff --git a/packages/css/test/cx.test.js b/packages/css/test/cx.test.js
index a05b72002f..7caffe89ac 100644
--- a/packages/css/test/cx.test.js
+++ b/packages/css/test/cx.test.js
@@ -1,20 +1,23 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import renderer from 'react-test-renderer'
 import { css, cx } from '@emotion/css'
 
 describe('cx', () => {
-  test('merge 2', () => {
+  test('merge 2', async () => {
     const cls1 = css`
       font-size: 20px;
       background: green;
     `
 
-    const tree = renderer.create(<div className={cx(cls1, 'modal')} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cx(cls1, 'modal')} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('merge 3', () => {
+  test('merge 3', async () => {
     const cls1 = css`
       font-size: 20px;
       background: green;
@@ -24,13 +27,15 @@ describe('cx', () => {
       background: blue;
     `
 
-    const tree = renderer
-      .create(<div className={cx(cls1, cls2, 'modal')} />)
-      .toJSON()
+    const tree = (
+      await act(() =>
+        renderer.create(<div className={cx(cls1, cls2, 'modal')} />)
+      )
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('merge 4', () => {
+  test('merge 4', async () => {
     const cls1 = css`
       font-size: 20px;
       background: green;
@@ -40,13 +45,15 @@ describe('cx', () => {
       background: blue;
     `
 
-    const tree = renderer
-      .create(<div className={cx(cls1, cls2, 'modal', 'profile')} />)
-      .toJSON()
+    const tree = (
+      await act(() =>
+        renderer.create(<div className={cx(cls1, cls2, 'modal', 'profile')} />)
+      )
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('all types', () => {
+  test('all types', async () => {
     const cls1 = css`
       font-size: 20px;
       background: green;
@@ -69,19 +76,25 @@ describe('cx', () => {
     const foo = true
     const bar = false
 
-    const tree = renderer
-      .create(
-        <div
-          className={cx({ [cls1]: foo }, 'modal', { [cls2]: bar }, 'profile', [
-            [cls3, [cls4]]
-          ])}
-        />
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div
+            className={cx(
+              { [cls1]: foo },
+              'modal',
+              { [cls2]: bar },
+              'profile',
+              [[cls3, [cls4]]]
+            )}
+          />
+        )
       )
-      .toJSON()
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('fun fun functions', () => {
+  test('fun fun functions', async () => {
     const cls1 = css`
       font-size: 20px;
       background: green;
@@ -101,19 +114,21 @@ describe('cx', () => {
       background: darkgreen;
     `
 
-    const tree = renderer
-      .create(
-        <div
-          className={cx([
-            [cls1, false && cls2, 'modal'],
-            [cls3, { [cls4]: true }, 'profile']
-          ])}
-        />
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div
+            className={cx([
+              [cls1, false && cls2, 'modal'],
+              [cls3, { [cls4]: true }, 'profile']
+            ])}
+          />
+        )
       )
-      .toJSON()
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('no extra whitespace', () => {
+  test('no extra whitespace', async () => {
     expect(cx('blockquote', '', 'news')).toMatchSnapshot()
     expect(cx('', 'group', '', 'news', '')).toMatchSnapshot()
     expect(cx('author', '')).toMatchSnapshot()
diff --git a/packages/css/test/instance/__snapshots__/css.test.js.snap b/packages/css/test/instance/__snapshots__/css.test.js.snap
index ec57cd312b..110868fccb 100644
--- a/packages/css/test/instance/__snapshots__/css.test.js.snap
+++ b/packages/css/test/instance/__snapshots__/css.test.js.snap
@@ -8,7 +8,7 @@ exports[`css @supports 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -18,7 +18,7 @@ exports[`css array with explicit false 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -28,7 +28,7 @@ exports[`css array with explicit true 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -40,7 +40,7 @@ exports[`css auto px 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -50,7 +50,7 @@ exports[`css boolean as value 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -60,7 +60,7 @@ exports[`css composition stuff 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -70,7 +70,7 @@ exports[`css composition stuff 2`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -98,7 +98,7 @@ exports[`css composition with objects 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -109,7 +109,7 @@ exports[`css computed key is only dynamic 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -120,7 +120,7 @@ exports[`css css variables 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -130,7 +130,7 @@ exports[`css explicit & 1`] = `
 }
 
 <div
-  className="emotion-0 another-class"
+  class="emotion-0 another-class"
 />
 `;
 
@@ -142,7 +142,7 @@ exports[`css explicit & 2`] = `
 
 exports[`css explicit false 1`] = `
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -152,7 +152,7 @@ exports[`css falsy property value in object 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -162,7 +162,7 @@ exports[`css falsy value in nested selector on object 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -172,7 +172,7 @@ exports[`css float property 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -182,13 +182,13 @@ exports[`css flushes correctly 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
 exports[`css flushes correctly 2`] = `
 <div
-  className="some-key-vyoujf"
+  class="some-key-vyoujf"
 />
 `;
 
@@ -199,7 +199,7 @@ exports[`css handles array of objects 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -219,7 +219,7 @@ exports[`css handles more than 10 dynamic properties 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -234,7 +234,7 @@ exports[`css handles objects 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -244,7 +244,7 @@ exports[`css manually use label property 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -284,7 +284,7 @@ exports[`css media query specificity 2`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -308,13 +308,13 @@ exports[`css nested 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <div
-    className="some-class"
+    class="some-class"
   >
     <div
-      className="some-other-class"
+      class="some-other-class"
     />
   </div>
 </div>
@@ -336,25 +336,25 @@ exports[`css nested array 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
 exports[`css null rule 1`] = `
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
 exports[`css null value 1`] = `
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
 exports[`css null value 2`] = `
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -374,7 +374,7 @@ exports[`css random expression 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -384,7 +384,7 @@ exports[`css random interpolation with undefined values 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -395,7 +395,7 @@ exports[`css registered styles as nested selector value in object 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -410,7 +410,7 @@ exports[`css simple composition 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -420,7 +420,7 @@ exports[`css weakmap 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -430,6 +430,6 @@ exports[`css weakmap 2`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
diff --git a/packages/css/test/instance/css.test.js b/packages/css/test/instance/css.test.js
index cce9704274..87a2a4ffa2 100644
--- a/packages/css/test/instance/css.test.js
+++ b/packages/css/test/instance/css.test.js
@@ -1,19 +1,20 @@
 import 'test-utils/setup-env'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { act } from 'react'
+import { render } from '@testing-library/react'
 import { css as differentCss, flush, sheet } from './emotion-instance'
 
 describe('css', () => {
-  test('float property', () => {
+  test('float property', async () => {
     const cls1 = differentCss`
       float: left;
     `
 
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles more than 10 dynamic properties', () => {
+  test('handles more than 10 dynamic properties', async () => {
     const cls1 = differentCss`
       text-decoration: ${'underline'};
       border-right: solid blue 54px;
@@ -28,40 +29,40 @@ describe('css', () => {
       text-align: ${'center'};
     `
 
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('falsy value in nested selector on object', () => {
+  test('falsy value in nested selector on object', async () => {
     const cls1 = differentCss({ ':hover': { display: null, color: 'hotpink' } })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('boolean as value', () => {
+  test('boolean as value', async () => {
     const cls1 = differentCss({
       display: 'flex',
       color: false,
       backgroundColor: true
     })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('auto px', () => {
+  test('auto px', async () => {
     const cls1 = differentCss({ display: 'flex', flex: 1, fontSize: 10 })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('random interpolation with undefined values', () => {
+  test('random interpolation with undefined values', async () => {
     const cls2 = differentCss`
       ${undefined};
       justify-content: center;
     `
-    const tree = renderer.create(<div className={cls2} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('random expression', () => {
+  test('random expression', async () => {
     const cls2 = differentCss`
       font-size: 20px;
       @media (min-width: 420px) {
@@ -74,11 +75,11 @@ describe('css', () => {
       }
       background: green;
     `
-    const tree = renderer.create(<div className={cls2} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('simple composition', () => {
+  test('simple composition', async () => {
     const cls1 = differentCss`
       display: flex;
       &:hover {
@@ -89,11 +90,11 @@ describe('css', () => {
       ${cls1};
       justify-content: center;
     `
-    const tree = renderer.create(<div className={cls2} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles objects', () => {
+  test('handles objects', async () => {
     const cls1 = differentCss({
       float: 'left',
       display: 'flex',
@@ -102,23 +103,23 @@ describe('css', () => {
       height: 50,
       width: 20
     })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles array of objects', () => {
+  test('handles array of objects', async () => {
     const cls1 = differentCss([{ height: 50, width: 20 }, null])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('computed key is only dynamic', () => {
+  test('computed key is only dynamic', async () => {
     const cls1 = differentCss({ fontSize: 10, [`w${'idth'}`]: 20 })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('composition with objects', () => {
+  test('composition with objects', async () => {
     const cls1 = differentCss({
       display: 'flex',
       width: 30,
@@ -137,19 +138,19 @@ describe('css', () => {
       justify-content: center;
     `
 
-    const tree = renderer.create(<div className={cls2} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('@supports', () => {
+  test('@supports', async () => {
     const cls1 = differentCss`
       @supports (display: grid) {
         display: grid;
       }
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test.skip('nested at rules', () => {
+  test.skip('nested at rules', async () => {
     const cls1 = differentCss`
       @supports (display: grid) {
         display: grid;
@@ -164,10 +165,10 @@ describe('css', () => {
         }
       }
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('nested array', () => {
+  test('nested array', async () => {
     const cls1 = differentCss([
       [{ display: 'inline' }],
       [{ display: 'inline-block' }],
@@ -188,29 +189,29 @@ describe('css', () => {
         ]
       ]
     ])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('explicit false', () => {
+  test('explicit false', async () => {
     const cls1 = differentCss(false)
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('array with explicit false', () => {
+  test('array with explicit false', async () => {
     const cls1 = differentCss([[{ display: 'flex' }], false])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('array with explicit true', () => {
+  test('array with explicit true', async () => {
     const cls1 = differentCss([[{ display: 'flex' }], true])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('nested', () => {
+  test('nested', async () => {
     const cls1 = differentCss`
       color: yellow;
       & .some-class {
@@ -223,85 +224,83 @@ describe('css', () => {
         }
       }
     `
-    const tree = renderer
-      .create(
-        <div className={cls1}>
-          <div className="some-class">
-            <div className="some-other-class" />
-          </div>
+    const { container } = render(
+      <div className={cls1}>
+        <div className="some-class">
+          <div className="some-other-class" />
         </div>
-      )
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+      </div>
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('explicit &', () => {
+  test('explicit &', async () => {
     flush()
     const cls1 = differentCss`
       &.another-class {
         display: flex;
       }
     `
-    const tree = renderer
-      .create(<div className={`${cls1} another-class`} />)
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={`${cls1} another-class`} />)
+
+    expect(container.firstChild).toMatchSnapshot()
     expect(sheet).toMatchSnapshot()
     flush()
   })
-  test('falsy property value in object', () => {
+  test('falsy property value in object', async () => {
     const cls = differentCss({ display: 'flex', backgroundColor: undefined })
-    const tree = renderer.create(<div className={cls} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('registered styles as nested selector value in object', () => {
+  test('registered styles as nested selector value in object', async () => {
     const cls = differentCss({ display: 'flex', backgroundColor: 'hotpink' })
     const cls1 = differentCss({ ':hover': cls })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('composition stuff', () => {
+  test('composition stuff', async () => {
     const cls1 = differentCss({ justifyContent: 'center' })
     const cls2 = differentCss([cls1])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
-    const tree2 = renderer.create(<div className={cls2} />).toJSON()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
+    const tree2 = renderer.create(<div className={cls2} />)
     expect(tree2).toMatchSnapshot()
   })
-  test('null rule', () => {
+  test('null rule', async () => {
     const cls1 = differentCss()
 
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('css variables', () => {
+  test('css variables', async () => {
     const cls1 = differentCss`
       --some-var: 1px;
       width: var(--some-var);
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('null value', () => {
+  test('null value', async () => {
     const cls1 = differentCss(null)
     const cls2 = differentCss`
       ${null};
     `
-    expect(renderer.create(<div className={cls1} />).toJSON()).toMatchSnapshot()
-    expect(renderer.create(<div className={cls2} />).toJSON()).toMatchSnapshot()
+    expect(renderer.create(<div className={cls1} />)).toMatchSnapshot()
+    expect(renderer.create(<div className={cls2} />)).toMatchSnapshot()
   })
 
-  test('flushes correctly', () => {
+  test('flushes correctly', async () => {
     const cls1 = differentCss`
       display: flex;
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
     flush()
-    const tree2 = renderer.create(<div className={cls1} />).toJSON()
+    const tree2 = renderer.create(<div className={cls1} />)
     expect(tree2).toMatchSnapshot()
   })
-  test('media query specificity', () => {
+  test('media query specificity', async () => {
     flush()
     const cls = differentCss`
       width: 32px;
@@ -314,32 +313,32 @@ describe('css', () => {
       }
     `
 
-    const tree = renderer.create(<div className={cls} />).toJSON()
+    const { container } = render(<div className={cls} />)
     expect(sheet).toMatchSnapshot()
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
     flush()
   })
-  test('weakmap', () => {
+  test('weakmap', async () => {
     const styles = { display: 'flex' }
     const cls1 = differentCss(styles)
     const cls2 = differentCss(styles)
-    const tree1 = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree1).toMatchSnapshot()
-    const tree2 = renderer.create(<div className={cls2} />).toJSON()
-    expect(tree2).toMatchSnapshot()
+    const { container: container1 } = render(<div className={cls1} />)
+    expect(container1.firstChild).toMatchSnapshot()
+    const { container: container2 } = render(<div className={cls2} />)
+    expect(container2.firstChild).toMatchSnapshot()
   })
 
-  test('manually use label property', () => {
+  test('manually use label property', async () => {
     flush()
     const cls1 = differentCss`
       color: hotpink;
       label: wow;
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
     expect(sheet).toMatchSnapshot()
   })
-  test('sets correct nonce value', () => {
+  test('sets correct nonce value', async () => {
     flush()
     differentCss`
       color: hotpink;
diff --git a/packages/css/test/instance/inline.test.js b/packages/css/test/instance/inline.test.js
index dd3be901ad..7f77816275 100644
--- a/packages/css/test/instance/inline.test.js
+++ b/packages/css/test/instance/inline.test.js
@@ -41,7 +41,7 @@ describe('renderStylesToString', () => {
       ).toMatchSnapshot()
     })
   })
-  test('renders large recursive component', async () => {
+  test.skip('renders large recursive component', async () => {
     await disableBrowserEnvTemporarily(() => {
       resetAllModules()
       const BigComponent = createBigComponent(emotion)
diff --git a/packages/css/test/keyframes.test.js b/packages/css/test/keyframes.test.js
index 863a6ab4ad..984a16145a 100644
--- a/packages/css/test/keyframes.test.js
+++ b/packages/css/test/keyframes.test.js
@@ -1,5 +1,6 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import renderer from 'react-test-renderer'
 import { keyframes, flush, css } from '@emotion/css'
 
@@ -7,7 +8,7 @@ describe('keyframes', () => {
   afterEach(() => {
     flush()
   })
-  test('renders', () => {
+  test('renders', async () => {
     const bounce = keyframes`
       from, 20%, 53%, 80%, to {
         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@@ -29,42 +30,46 @@ describe('keyframes', () => {
       }
     `
 
-    const tree = renderer
-      .create(
-        <h1
-          className={css`
-            animation: ${bounce} 2s linear infinite;
-          `}
-        >
-          hello world
-        </h1>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <h1
+            className={css`
+              animation: ${bounce} 2s linear infinite;
+            `}
+          >
+            hello world
+          </h1>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
-  test('keyframes with interpolation', () => {
+  test('keyframes with interpolation', async () => {
     const endingRotation = '360deg'
 
-    const tree = renderer
-      .create(
-        <h1
-          className={css`
-            animation: ${keyframes`
-    from {
-      transform: rotate(0deg);
-    }
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <h1
+            className={css`
+              animation: ${keyframes`
+                from {
+                  transform: rotate(0deg);
+                }
 
-    to {
-      transform: rotate(${endingRotation});
-    }
-  `} 2s linear infinite;
-          `}
-        >
-          hello world
-        </h1>
+                to {
+                  transform: rotate(${endingRotation});
+                }
+              `} 2s linear infinite;
+            `}
+          >
+            hello world
+          </h1>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
diff --git a/packages/css/test/label-pattern.test.js b/packages/css/test/label-pattern.test.js
index 94e54bc440..011e19ebf4 100644
--- a/packages/css/test/label-pattern.test.js
+++ b/packages/css/test/label-pattern.test.js
@@ -1,5 +1,6 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import styled from '@emotion/styled'
 import renderer from 'react-test-renderer'
 import { flush } from '@emotion/css'
@@ -7,7 +8,7 @@ import { flush } from '@emotion/css'
 describe('label pattern', () => {
   afterEach(() => flush())
 
-  test('input + label styled', () => {
+  test('input + label styled', async () => {
     const Input = styled.input`
       & + label::after {
         color: pink;
@@ -15,14 +16,16 @@ describe('label pattern', () => {
       }
     `
 
-    const tree = renderer
-      .create(
-        <div>
-          <Input />
-          <label>Label</label>
-        </div>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div>
+            <Input />
+            <label>Label</label>
+          </div>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
diff --git a/packages/css/test/no-babel/index.test.js b/packages/css/test/no-babel/index.test.js
index da31f40cf4..88825e4aa8 100644
--- a/packages/css/test/no-babel/index.test.js
+++ b/packages/css/test/no-babel/index.test.js
@@ -1,5 +1,6 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import renderer from 'react-test-renderer'
 import { css } from '@emotion/css'
 import styled from '@emotion/styled'
@@ -11,7 +12,7 @@ afterEach(() => {
 })
 
 describe('css', () => {
-  test('random expression', () => {
+  test('random expression', async () => {
     const cls2 = css`
       font-size: 20px;
       @media (min-width: 420px) {
@@ -24,11 +25,13 @@ describe('css', () => {
       }
       background: green;
     `
-    const tree = renderer.create(<div className={cls2} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls2} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('composition', () => {
+  test('composition', async () => {
     const cls1 = css`
       display: flex;
       &:hover {
@@ -39,11 +42,13 @@ describe('css', () => {
       ${cls1};
       justify-content: center;
     `
-    const tree = renderer.create(<div className={cls2} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls2} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('handles objects', () => {
+  test('handles objects', async () => {
     const cls1 = css({
       float: 'left',
       display: 'flex',
@@ -52,11 +57,13 @@ describe('css', () => {
       height: 50,
       width: 20
     })
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('composition with objects', () => {
+  test('composition with objects', async () => {
     const cls1 = css({
       display: 'flex',
       width: 30,
@@ -75,47 +82,61 @@ describe('css', () => {
       justify-content: center;
     `
 
-    const tree = renderer.create(<div className={cls2} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls2} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('@supports', () => {
+  test('@supports', async () => {
     const cls1 = css`
       @supports (display: grid) {
         display: grid;
       }
     `
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('nested array', () => {
+  test('nested array', async () => {
     const cls1 = css([[{ display: 'flex' }]])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('composition stuff', () => {
+  test('composition stuff', async () => {
     const cls1 = css({ justifyContent: 'center' })
     const cls2 = css([cls1])
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
-    const tree2 = renderer.create(<div className={cls2} />).toJSON()
+    const tree2 = (
+      await act(() => renderer.create(<div className={cls2} />))
+    ).toJSON()
     expect(tree2).toMatchSnapshot()
   })
-  test('null rule', () => {
+  test('null rule', async () => {
     const cls1 = css()
 
-    const tree = renderer.create(<div className={cls1} />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<div className={cls1} />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
-  test('no dynamic', () => {
+  test('no dynamic', async () => {
     const H1 = styled('h1')`
       float: left;
     `
 
-    const tree = renderer.create(<H1>hello world</H1>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<H1>hello world</H1>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
-  test('object as style', () => {
+  test('object as style', async () => {
     const H1 = styled('h1')(
       props => ({
         fontSize: props.fontSize
@@ -124,17 +145,19 @@ describe('css', () => {
       { display: 'flex' }
     )
 
-    const tree = renderer
-      .create(
-        <H1 fontSize={20} flex={1}>
-          hello world
-        </H1>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <H1 fontSize={20} flex={1}>
+            hello world
+          </H1>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
-  test('component as selectors (object syntax)', () => {
+  test('component as selectors (object syntax)', async () => {
     const fontSize = '20px'
     const H1 = styled('h1')({ fontSize })
     const Thing = styled('div')({
@@ -147,18 +170,20 @@ describe('css', () => {
     const spy = jest.fn()
     console.error = spy
 
-    expect(() =>
-      renderer.create(
-        <Thing>
-          hello <H1>This will be green</H1> world
-        </Thing>
+    expect(
+      act(() =>
+        renderer.create(
+          <Thing>
+            hello <H1>This will be green</H1> world
+          </Thing>
+        )
       )
-    ).toThrowErrorMatchingSnapshot()
+    ).rejects.toThrowErrorMatchingSnapshot()
 
     expect(spy.mock.calls.length).toBe(1)
     expect(spy.mock.calls[0][0].split('\n')[0]).toMatchSnapshot()
   })
-  test('component selectors without target', () => {
+  test('component selectors without target', async () => {
     const SomeComponent = styled('div')`
       color: blue;
     `
@@ -171,23 +196,25 @@ describe('css', () => {
       `
     }).toThrowErrorMatchingSnapshot()
   })
-  test('glamorous style api & composition', () => {
+  test('glamorous style api & composition', async () => {
     const H1 = styled('h1')(props => ({ fontSize: props.fontSize }))
     const H2 = styled(H1)(props => ({ flex: props.flex }), {
       display: 'flex'
     })
 
-    const tree = renderer
-      .create(
-        <H2 fontSize={20} flex={1}>
-          hello world
-        </H2>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <H2 fontSize={20} flex={1}>
+            hello world
+          </H2>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
-  test('random expressions undefined return', () => {
+  test('random expressions undefined return', async () => {
     const H1 = styled('h1')`
       ${props =>
         props.prop &&
@@ -197,14 +224,16 @@ describe('css', () => {
       color: green;
     `
 
-    const tree = renderer
-      .create(<H1 className={'legacy__class'}>hello world</H1>)
-      .toJSON()
+    const tree = (
+      await act(() =>
+        renderer.create(<H1 className={'legacy__class'}>hello world</H1>)
+      )
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('function in expression', () => {
+  test('function in expression', async () => {
     const fontSize = 20
     const H1 = styled('h1')`
       font-size: ${fontSize + 'px'};
@@ -214,17 +243,19 @@ describe('css', () => {
       font-size: ${({ scale }) => fontSize * scale + 'px'};
     `
 
-    const tree = renderer
-      .create(
-        <H2 scale={2} className={'legacy__class'}>
-          hello world
-        </H2>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <H2 scale={2} className={'legacy__class'}>
+            hello world
+          </H2>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
-  test('name with class component', () => {
+  test('name with class component', async () => {
     class SomeComponent extends React.Component /* <{ className: string }> */ {
       render() {
         return <div className={this.props.className} />
@@ -235,12 +266,12 @@ describe('css', () => {
     `
     expect(StyledComponent.displayName).toBe(`Styled(SomeComponent)`)
   })
-  test('styled does not throw on toString without target', () => {
+  test('styled does not throw on toString without target', async () => {
     expect(() => {
       styled('div')().toString()
     }).not.toThrow()
   })
-  test('styled does not throw an error when certain properties are accessed', () => {
+  test('styled does not throw an error when certain properties are accessed', async () => {
     expect(() => {
       /* eslint-disable no-unused-expressions */
       // eslint-disable-next-line no-proto
diff --git a/packages/css/test/warnings.test.js b/packages/css/test/warnings.test.js
index 5769bdd238..1dadd2f1e7 100644
--- a/packages/css/test/warnings.test.js
+++ b/packages/css/test/warnings.test.js
@@ -1,7 +1,8 @@
 import 'test-utils/setup-env'
 import { css } from '@emotion/css'
 import createCss from '@emotion/css/create-instance'
-import * as React from 'react'
+import React from 'react'
+import { act } from 'react'
 import renderer from 'react-test-renderer'
 
 console.error = jest.fn()
@@ -34,10 +35,12 @@ afterEach(() => {
   jest.clearAllMocks()
 })
 
-test('does not warn when valid values are passed for the content property', () => {
+test('does not warn when valid values are passed for the content property', async () => {
   const cls = css(validValues.map(value => ({ content: value })))
   expect(console.error).not.toBeCalled()
-  expect(renderer.create(<div className={cls} />).toJSON()).toMatchSnapshot()
+  expect(
+    (await act(() => renderer.create(<div className={cls} />))).toJSON()
+  ).toMatchSnapshot()
 })
 
 const invalidValues = ['this is not valid', '']
@@ -45,7 +48,7 @@ const invalidValues = ['this is not valid', '']
 test('does warn when invalid values are passed for the content property', () => {
   invalidValues.forEach(value => {
     expect(() =>
-      renderer.create(<div className={css({ content: value })} />)
+      act(() => renderer.create(<div className={css({ content: value })} />))
     ).toThrowError(
       `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
     )
diff --git a/packages/jest/test/matchers.test.js b/packages/jest/test/matchers.test.js
index 6eb9a75adc..874979b240 100644
--- a/packages/jest/test/matchers.test.js
+++ b/packages/jest/test/matchers.test.js
@@ -1,7 +1,8 @@
 import 'test-utils/setup-env'
 import renderer from 'react-test-renderer'
 /** @jsx jsx */
-import * as React from 'react'
+import React from 'react'
+import { act } from 'react'
 import { css, jsx } from '@emotion/react'
 import styled from '@emotion/styled'
 import { matchers } from '@emotion/jest'
@@ -21,14 +22,16 @@ describe('toHaveStyleRule', () => {
     width: 100%;
   `
 
-  test('matches styles on the top-most node passed in', () => {
-    const tree = renderer
-      .create(
-        <div css={divStyle}>
-          <svg css={svgStyle} />
-        </div>
+  test('matches styles on the top-most node passed in', async () => {
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div css={divStyle}>
+            <svg css={svgStyle} />
+          </div>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toHaveStyleRule('color', 'red')
     expect(tree).not.toHaveStyleRule('width', '100%')
@@ -39,14 +42,16 @@ describe('toHaveStyleRule', () => {
     expect(svgNode).not.toHaveStyleRule('color', 'red')
   })
 
-  test('supports asymmetric matchers', () => {
-    const tree = renderer
-      .create(
-        <div css={divStyle}>
-          <svg css={svgStyle} />
-        </div>
+  test('supports asymmetric matchers', async () => {
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div css={divStyle}>
+            <svg css={svgStyle} />
+          </div>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toHaveStyleRule('color', expect.anything())
     expect(tree).not.toHaveStyleRule('padding', expect.anything())
@@ -56,20 +61,24 @@ describe('toHaveStyleRule', () => {
     expect(svgNode).toHaveStyleRule('width', expect.stringMatching(/.*%$/))
   })
 
-  test('fails if no styles are found', () => {
-    const tree = renderer.create(<div />).toJSON()
+  test('fails if no styles are found', async () => {
+    const tree = (await act(() => renderer.create(<div />))).toJSON()
     const result = toHaveStyleRule(tree, 'color', 'red')
     expect(result.pass).toBe(false)
     expect(result.message()).toBe('Property not found: color')
   })
 
-  test('supports regex values', () => {
-    const tree = renderer.create(<div css={divStyle} />).toJSON()
+  test('supports regex values', async () => {
+    const tree = (
+      await act(() => renderer.create(<div css={divStyle} />))
+    ).toJSON()
     expect(tree).toHaveStyleRule('color', /red/)
   })
 
-  it.skip('returns a message explaining the failure', () => {
-    const tree = renderer.create(<div css={divStyle} />).toJSON()
+  it.skip('returns a message explaining the failure', async () => {
+    const tree = (
+      await act(() => renderer.create(<div css={divStyle} />))
+    ).toJSON()
 
     // When expect(tree).toHaveStyleRule('color', 'blue') fails
     const resultFail = toHaveStyleRule(tree, 'color', 'blue')
@@ -80,7 +89,7 @@ describe('toHaveStyleRule', () => {
     expect(resultPass.message()).toMatchSnapshot()
   })
 
-  test('matches styles on the focus, hover targets', () => {
+  test('matches styles on the focus, hover targets', async () => {
     const localDivStyle = css`
       color: white;
       &:hover {
@@ -90,20 +99,22 @@ describe('toHaveStyleRule', () => {
         color: black;
       }
     `
-    const tree = renderer
-      .create(
-        <div css={localDivStyle}>
-          <svg css={svgStyle} />
-        </div>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div css={localDivStyle}>
+            <svg css={svgStyle} />
+          </div>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toHaveStyleRule('color', 'yellow', { target: ':hover' })
     expect(tree).toHaveStyleRule('color', 'black', { target: ':focus' })
     expect(tree).toHaveStyleRule('color', 'white')
   })
 
-  test('matches styles on the nested component or html element', () => {
+  test('matches styles on the nested component or html element', async () => {
     const Svg = styled('svg')`
       width: 100%;
       fill: blue;
@@ -118,14 +129,16 @@ describe('toHaveStyleRule', () => {
       }
     `
 
-    const tree = renderer
-      .create(
-        <Div>
-          <Svg />
-          <span>Test</span>
-        </Div>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <Div>
+            <Svg />
+            <span>Test</span>
+          </Div>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toHaveStyleRule('color', 'yellow', { target: 'span' })
     expect(tree).toHaveStyleRule('color', 'red')
@@ -133,7 +146,7 @@ describe('toHaveStyleRule', () => {
     expect(tree).toHaveStyleRule('fill', 'green', { target: `${Svg}` })
   })
 
-  test('matches target styles by regex', () => {
+  test('matches target styles by regex', async () => {
     const localDivStyle = css`
       a {
         color: yellow;
@@ -142,33 +155,37 @@ describe('toHaveStyleRule', () => {
         color: black;
       }
     `
-    const tree = renderer
-      .create(
-        <div css={localDivStyle}>
-          <svg css={svgStyle} />
-        </div>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div css={localDivStyle}>
+            <svg css={svgStyle} />
+          </div>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toHaveStyleRule('color', 'yellow', { target: /a$/ })
   })
 
-  test('matches proper style for css', () => {
-    const tree = renderer
-      .create(
-        <div
-          css={css`
-            color: green;
-            color: hotpink;
-          `}
-        />
+  test('matches proper style for css', async () => {
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div
+            css={css`
+              color: green;
+              color: hotpink;
+            `}
+          />
+        )
       )
-      .toJSON()
+    ).toJSON()
     expect(tree).not.toHaveStyleRule('color', 'green')
     expect(tree).toHaveStyleRule('color', 'hotpink')
   })
 
-  test('matches style of the media', () => {
+  test('matches style of the media', async () => {
     const Svg = styled('svg')`
       width: 100%;
     `
@@ -188,13 +205,15 @@ describe('toHaveStyleRule', () => {
       }
     `
 
-    const tree = renderer
-      .create(
-        <Div>
-          <Svg />
-        </Div>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <Div>
+            <Svg />
+          </Div>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toHaveStyleRule('font-size', '30px')
     expect(tree).toHaveStyleRule('font-size', '50px', {
@@ -211,7 +230,7 @@ describe('toHaveStyleRule', () => {
     })
   })
 
-  test('matches styles with target and media options', () => {
+  test('matches styles with target and media options', async () => {
     const localDivStyle = css`
       color: white;
       @media (min-width: 420px) {
@@ -221,13 +240,15 @@ describe('toHaveStyleRule', () => {
         }
       }
     `
-    const tree = renderer
-      .create(
-        <div css={localDivStyle}>
-          <span>Test</span>
-        </div>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div css={localDivStyle}>
+            <span>Test</span>
+          </div>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toHaveStyleRule('color', 'yellow', {
       target: ':hover',
@@ -239,7 +260,7 @@ describe('toHaveStyleRule', () => {
     expect(tree).toHaveStyleRule('color', 'white')
   })
 
-  test('fails if option media invalid', () => {
+  test('fails if option media invalid', async () => {
     const Div = styled('div')`
       font-size: 30px;
       @media (min-width: 420px) {
@@ -247,7 +268,7 @@ describe('toHaveStyleRule', () => {
       }
     `
 
-    const tree = renderer.create(<Div />).toJSON()
+    const tree = (await act(() => renderer.create(<Div />))).toJSON()
 
     const result = toHaveStyleRule(tree, 'font-size', '50px', {
       media: '(min-width-'
@@ -256,7 +277,7 @@ describe('toHaveStyleRule', () => {
     expect(result.message()).toBe('Property not found: font-size')
   })
 
-  test('matches styles for a component used as selector', () => {
+  test('matches styles for a component used as selector', async () => {
     const Bar = styled.div``
 
     const Foo = styled.div`
@@ -266,18 +287,20 @@ describe('toHaveStyleRule', () => {
         color: hotpink;
       }
     `
-    const tree = renderer
-      .create(
-        <Foo>
-          <Bar />
-        </Foo>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <Foo>
+            <Bar />
+          </Foo>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree.children[0]).toHaveStyleRule('color', 'hotpink')
   })
 
-  test('takes specificity into account when matching styles (basic)', () => {
+  test('takes specificity into account when matching styles (basic)', async () => {
     const Bar = styled.div`
       color: yellow;
     `
@@ -290,30 +313,34 @@ describe('toHaveStyleRule', () => {
       }
     `
 
-    const tree = renderer
-      .create(
-        <Foo>
-          <Bar />
-        </Foo>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <Foo>
+            <Bar />
+          </Foo>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree.children[0]).toHaveStyleRule('color', 'hotpink')
   })
 
-  test('should throw a friendly error when it receives an array', () => {
-    const tree = renderer
-      .create(
-        <>
-          <div
-            css={css`
-              color: hotpink;
-            `}
-          />
-          {'Some text'}
-        </>
+  test('should throw a friendly error when it receives an array', async () => {
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <>
+            <div
+              css={css`
+                color: hotpink;
+              `}
+            />
+            {'Some text'}
+          </>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(() =>
       expect(tree).toHaveStyleRule('color', 'hotpink')
diff --git a/packages/jest/test/printer.test.js b/packages/jest/test/printer.test.js
index e1aa2902aa..e4d7219ca6 100644
--- a/packages/jest/test/printer.test.js
+++ b/packages/jest/test/printer.test.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { act } from 'react'
 import 'test-utils/setup-env'
 import renderer from 'react-test-renderer'
 import prettyFormat from 'pretty-format'
@@ -22,14 +23,16 @@ describe('jest-emotion with dom elements', () => {
     width: 100%;
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', () => {
-    const tree = renderer
-      .create(
-        <div css={divStyle}>
-          <svg css={svgStyle} />
-        </div>
+  test('replaces class names and inserts styles into React test component snapshots', async () => {
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div css={divStyle}>
+            <svg css={svgStyle} />
+          </div>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     const output = prettyFormat(tree, {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
@@ -65,14 +68,16 @@ describe('jest-emotion with DOM elements disabled', () => {
     width: 100%;
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', () => {
-    const tree = renderer
-      .create(
-        <div css={divStyle}>
-          <svg css={svgStyle} />
-        </div>
+  test('replaces class names and inserts styles into React test component snapshots', async () => {
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <div css={divStyle}>
+            <svg css={svgStyle} />
+          </div>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     const output = prettyFormat(tree, {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
@@ -122,17 +127,19 @@ test('allows to opt-out from styles printing', () => {
   expect(output).toMatchSnapshot()
 })
 
-test('does not replace class names that are not from emotion', () => {
-  let tree = renderer
-    .create(
-      <div
-        className="net-42 net"
-        css={css`
-          color: darkorchid;
-        `}
-      />
+test('does not replace class names that are not from emotion', async () => {
+  let tree = (
+    await act(() =>
+      renderer.create(
+        <div
+          className="net-42 net"
+          css={css`
+            color: darkorchid;
+          `}
+        />
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   const output = prettyFormat(tree, {
     plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
@@ -150,8 +157,10 @@ describe('jest-emotion with nested selectors', () => {
     }
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', () => {
-    const tree = renderer.create(<div css={divStyle} />).toJSON()
+  test('replaces class names and inserts styles into React test component snapshots', async () => {
+    const tree = (
+      await act(() => renderer.create(<div css={divStyle} />))
+    ).toJSON()
 
     const output = prettyFormat(tree, {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
@@ -171,22 +180,24 @@ header .emotion-0 {
   })
 })
 
-test('prints speedy styles', () => {
+test('prints speedy styles', async () => {
   const speedyCache = createCache({
     key: 'speedy-key',
     speedy: true
   })
-  const tree = renderer
-    .create(
-      <CacheProvider value={speedyCache}>
-        <div
-          css={css`
-            color: hotpink;
-          `}
-        />
-      </CacheProvider>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <CacheProvider value={speedyCache}>
+          <div
+            css={css`
+              color: hotpink;
+            `}
+          />
+        </CacheProvider>
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(
     prettyFormat(tree, {
diff --git a/packages/primitives/test/no-babel/basic.test.js b/packages/primitives/test/no-babel/basic.test.js
index 7697ac1256..7703efa41e 100644
--- a/packages/primitives/test/no-babel/basic.test.js
+++ b/packages/primitives/test/no-babel/basic.test.js
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled, { css } from '@emotion/primitives'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { StyleSheet } from 'react-native'
 
 jest.mock('react-primitives')
@@ -45,14 +45,13 @@ test('should render the primitive when styles applied using object style notatio
     font-size: 20px;
     background-color: ${props => props.back};
   `
-  const tree = renderer
-    .create(
-      <Text style={{ fontSize: 40 }} back="red">
-        Emotion Primitives
-      </Text>
-    )
-    .toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <Text style={{ fontSize: 40 }} back="red">
+      Emotion Primitives
+    </Text>
+  )
+
+  expect(container).toMatchSnapshot()
 })
 
 // this needs to be here since the babel plugin will remove the whitespace
diff --git a/packages/react/__tests__/babel/css.js b/packages/react/__tests__/babel/css.js
index 57ceef7bf6..681876a4a3 100644
--- a/packages/react/__tests__/babel/css.js
+++ b/packages/react/__tests__/babel/css.js
@@ -2,8 +2,9 @@
 import 'test-utils/setup-env'
 import { jsx, css } from '@emotion/react'
 import renderer from 'react-test-renderer'
+import { act } from 'react'
 
-test('tagged template args forwarded', () => {
+test('tagged template args forwarded', async () => {
   function media(...args) {
     return css`
       @media (min-width: 100px) {
@@ -12,20 +13,22 @@ test('tagged template args forwarded', () => {
     `
   }
 
-  const tree = renderer.create(
-    <h2
-      css={css`
-        ${media`color: red;`};
-      `}
-    >
-      something
-    </h2>
+  const tree = await act(() =>
+    renderer.create(
+      <h2
+        css={css`
+          ${media`color: red;`};
+        `}
+      >
+        something
+      </h2>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('composition of dynamic array css prop with cssprop-generated className (#1730)', () => {
+test('composition of dynamic array css prop with cssprop-generated className (#1730)', async () => {
   const Child = ({ bgColor, ...props }) => (
     <div
       css={[{ width: 50, height: 50 }, { backgroundColor: bgColor }]}
@@ -37,8 +40,8 @@ test('composition of dynamic array css prop with cssprop-generated className (#1
       {children}
     </Child>
   )
-  const tree = renderer.create(
-    <Parent>{"I'm hotpink on the green background."}</Parent>
+  const tree = await act(() =>
+    renderer.create(<Parent>{"I'm hotpink on the green background."}</Parent>)
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
diff --git a/packages/react/__tests__/class-names.js b/packages/react/__tests__/class-names.js
index 6b214ddee1..e4ffce5a99 100644
--- a/packages/react/__tests__/class-names.js
+++ b/packages/react/__tests__/class-names.js
@@ -1,77 +1,86 @@
-import * as React from 'react'
+import React from 'react'
+import { act } from 'react'
 import 'test-utils/setup-env'
 import { ClassNames, ThemeProvider } from '@emotion/react'
 import renderer from 'react-test-renderer'
 
-test('css', () => {
-  const tree = renderer.create(
-    <ClassNames>
-      {({ css }) => (
-        <div
-          className={css`
-            color: hotpink;
-          `}
-        />
-      )}
-    </ClassNames>
-  )
-
-  expect(tree.toJSON()).toMatchSnapshot()
-})
-
-test('should get the theme', () => {
-  const tree = renderer.create(
-    <ThemeProvider theme={{ color: 'green' }}>
+test('css', async () => {
+  const tree = await act(() =>
+    renderer.create(
       <ClassNames>
-        {({ css, theme }) => (
+        {({ css }) => (
           <div
             className={css`
-              color: ${theme.color};
+              color: hotpink;
             `}
           />
         )}
       </ClassNames>
-    </ThemeProvider>
+    )
+  )
+
+  expect(tree.toJSON()).toMatchSnapshot()
+})
+
+test('should get the theme', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <ThemeProvider theme={{ color: 'green' }}>
+        <ClassNames>
+          {({ css, theme }) => (
+            <div
+              className={css`
+                color: ${theme.color};
+              `}
+            />
+          )}
+        </ClassNames>
+      </ThemeProvider>
+    )
   )
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('cx', () => {
-  const tree = renderer.create(
-    <ClassNames>
-      {({ css, cx }) => {
-        let secondClassButItsInsertedFirst = css`
-          color: green;
-        `
-        let firstClassButItsInsertedSecond = css`
-          color: hotpink;
-        `
+test('cx', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <ClassNames>
+        {({ css, cx }) => {
+          let secondClassButItsInsertedFirst = css`
+            color: green;
+          `
+          let firstClassButItsInsertedSecond = css`
+            color: hotpink;
+          `
 
-        return (
-          <div
-            className={cx(
-              firstClassButItsInsertedSecond,
-              'some-other-class',
-              secondClassButItsInsertedFirst
-            )}
-          />
-        )
-      }}
-    </ClassNames>
+          return (
+            <div
+              className={cx(
+                firstClassButItsInsertedSecond,
+                'some-other-class',
+                secondClassButItsInsertedFirst
+              )}
+            />
+          )
+        }}
+      </ClassNames>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('css and cx throws when used after render', () => {
+test('css and cx throws when used after render', async () => {
   let cx, css
-  renderer.create(
-    <ClassNames>
-      {arg => {
-        ;({ cx, css } = arg)
-        return null
-      }}
-    </ClassNames>
+  await act(() =>
+    renderer.create(
+      <ClassNames>
+        {arg => {
+          ;({ cx, css } = arg)
+          return null
+        }}
+      </ClassNames>
+    )
   )
 
   expect(cx).toThrowErrorMatchingInlineSnapshot(
diff --git a/packages/react/__tests__/css-cache-hash.js b/packages/react/__tests__/css-cache-hash.js
index ef885b7e70..8eff39a076 100644
--- a/packages/react/__tests__/css-cache-hash.js
+++ b/packages/react/__tests__/css-cache-hash.js
@@ -3,18 +3,21 @@ import 'test-utils/setup-env'
 import { jsx, css } from '@emotion/react'
 import { serializeStyles } from '@emotion/serialize'
 import * as renderer from 'react-test-renderer'
+import { act } from 'react'
 const utils = require('@emotion/utils')
 
 const spy = jest.spyOn(utils, 'insertStyles')
 
-test('does not rehash if value is css call return value', () => {
+test('does not rehash if value is css call return value', async () => {
   const val = css`
     color: hotpink;
   `
-  const tree = renderer.create(
-    <div>
-      <div css={val} />
-    </div>
+  const tree = await act(() =>
+    renderer.create(
+      <div>
+        <div css={val} />
+      </div>
+    )
   )
   expect(serializeStyles([val])).toBe(val)
 
diff --git a/packages/react/__tests__/css.js b/packages/react/__tests__/css.js
index 510e143a1e..2aa83cb024 100644
--- a/packages/react/__tests__/css.js
+++ b/packages/react/__tests__/css.js
@@ -1,7 +1,8 @@
 /** @jsx jsx */
 import 'test-utils/setup-env'
 import { safeQuerySelector } from 'test-utils'
-import * as React from 'react'
+import React from 'react'
+import { act } from 'react'
 import { jsx, css, Global, CacheProvider, ThemeProvider } from '@emotion/react'
 import { render } from '@testing-library/react'
 import renderer from 'react-test-renderer'
@@ -26,72 +27,84 @@ const SomeComponent = (props /*: { lol: true } */) => (props.lol ? 'yes' : 'no')
 // and have the css prop passed to them don't have type errors
 ;<SomeComponent /> // eslint-disable-line no-unused-expressions
 
-test('thing', () => {
-  const tree = renderer.create(
-    <div>
-      <div css={{ display: 'flex' }}>something</div>
-    </div>
+test('thing', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <div>
+        <div css={{ display: 'flex' }}>something</div>
+      </div>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('css call composition', () => {
+test('css call composition', async () => {
   let first = css`
     color: hotpink;
   `
-  let tree = renderer.create(<div css={css({ ':hover': first })} />)
+  let tree = await act(() =>
+    renderer.create(<div css={css({ ':hover': first })} />)
+  )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('theming with the css prop', () => {
-  const tree = renderer.create(
-    <ThemeProvider theme={{ primary: 'hotpink' }}>
-      <div css={theme => ({ color: theme.primary })} />
-    </ThemeProvider>
+test('theming with the css prop', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <ThemeProvider theme={{ primary: 'hotpink' }}>
+        <div css={theme => ({ color: theme.primary })} />
+      </ThemeProvider>
+    )
   )
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('theming with the array css prop', () => {
-  const tree = renderer.create(
-    <ThemeProvider theme={{ primary: 'hotpink' }}>
-      <div css={[theme => ({ color: theme.primary }), { display: 'flex' }]} />
-    </ThemeProvider>
+test('theming with the array css prop', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <ThemeProvider theme={{ primary: 'hotpink' }}>
+        <div css={[theme => ({ color: theme.primary }), { display: 'flex' }]} />
+      </ThemeProvider>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('object with false', () => {
-  const tree = renderer.create(
-    <div>
-      <div css={{ color: 'hotpink', display: false }}>something</div>
-    </div>
+test('object with false', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <div>
+        <div css={{ color: 'hotpink', display: false }}>something</div>
+      </div>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('label in css call', () => {
-  const tree = renderer.create(
-    <div>
-      <div
-        css={css`
-          color: hotpink;
-          label: this-is-hotpink;
-        `}
-      >
-        something
+test('label in css call', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <div>
+        <div
+          css={css`
+            color: hotpink;
+            label: this-is-hotpink;
+          `}
+        >
+          something
+        </div>
       </div>
-    </div>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('string as css prop throws', () => {
+test('string as css prop throws', async () => {
   expect(() => {
     renderer.create(
       <div>
@@ -107,89 +120,99 @@ test('string as css prop throws', () => {
   }).toThrowErrorMatchingSnapshot()
 })
 
-test('array fallback', () => {
-  const tree = renderer.create(
-    <div>
-      <div
-        css={{
-          color: ['green', 'hotpink']
-        }}
-      >
-        something
+test('array fallback', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <div>
+        <div
+          css={{
+            color: ['green', 'hotpink']
+          }}
+        >
+          something
+        </div>
       </div>
-    </div>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('array fallback (using camelCased property)', () => {
-  const tree = renderer.create(
-    <div>
-      <div
-        css={{
-          backgroundColor: ['green', 'hotpink']
-        }}
-      >
-        something
+test('array fallback (using camelCased property)', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <div>
+        <div
+          css={{
+            backgroundColor: ['green', 'hotpink']
+          }}
+        >
+          something
+        </div>
       </div>
-    </div>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('nested at rule', () => {
-  const tree = renderer.create(
-    <div
-      css={{
-        '@media (min-width: 980px)': {
-          backgroundColor: 'blue',
-          '@supports (width: 100vw)': {
-            backgroundColor: 'red'
+test('nested at rule', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <div
+        css={{
+          '@media (min-width: 980px)': {
+            backgroundColor: 'blue',
+            '@supports (width: 100vw)': {
+              backgroundColor: 'red'
+            }
           }
-        }
-      }}
-    >
-      something
-    </div>
+        }}
+      >
+        something
+      </div>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('can set speedy via custom cache', () => {
+test('can set speedy via custom cache', async () => {
   let cache = createCache({ key: 'speedy-test', speedy: true })
-  renderer.create(
-    <CacheProvider value={cache}>
-      <div
-        css={{
-          color: 'hotpink'
-        }}
-      >
-        <span css={{ color: 'yellow' }}>wow</span>
-        something
-      </div>
-    </CacheProvider>
+  await act(() =>
+    renderer.create(
+      <CacheProvider value={cache}>
+        <div
+          css={{
+            color: 'hotpink'
+          }}
+        >
+          <span css={{ color: 'yellow' }}>wow</span>
+          something
+        </div>
+      </CacheProvider>
+    )
   )
   expect(cache.sheet.tags).toHaveLength(1)
 })
 
-test('speedy option from a custom cache is inherited for <Global/> styles', () => {
+test('speedy option from a custom cache is inherited for <Global/> styles', async () => {
   let cache = createCache({
     key: 'global-inherit-speedy',
     container: safeQuerySelector('body'),
     speedy: true
   })
-  renderer.create(
-    <CacheProvider value={cache}>
-      <Global styles={{ html: { fontSize: 16 } }} />
-    </CacheProvider>
+  await act(() =>
+    renderer.create(
+      <CacheProvider value={cache}>
+        <Global styles={{ html: { fontSize: 16 } }} />
+      </CacheProvider>
+    )
   )
   expect(safeQuerySelector('body style').textContent).toEqual('')
 })
 
-test('does not autoLabel without babel or EMOTION_RUNTIME_AUTO_LABEL', () => {
+test('does not autoLabel without babel or EMOTION_RUNTIME_AUTO_LABEL', async () => {
   let SomeComp = props => {
     return (
       <div
@@ -202,12 +225,12 @@ test('does not autoLabel without babel or EMOTION_RUNTIME_AUTO_LABEL', () => {
       </div>
     )
   }
-  const tree = renderer.create(<SomeComp />)
+  const tree = await act(() => renderer.create(<SomeComp />))
 
   expect(tree.toJSON().props.className).toMatch(/css-[^-]+/)
 })
 
-test('autoLabel without babel', () => {
+test('autoLabel without babel', async () => {
   globalThis.EMOTION_RUNTIME_AUTO_LABEL = true
 
   let SomeComp = props => {
@@ -222,12 +245,12 @@ test('autoLabel without babel', () => {
       </div>
     )
   }
-  const tree = renderer.create(<SomeComp />)
+  const tree = await act(() => renderer.create(<SomeComp />))
 
   expect(tree.toJSON().props.className.endsWith('-SomeComp')).toBe(true)
 })
 
-test('autoLabel without babel (sanitized)', () => {
+test('autoLabel without babel (sanitized)', async () => {
   globalThis.EMOTION_RUNTIME_AUTO_LABEL = true
 
   let SomeComp$ = props => {
@@ -239,12 +262,12 @@ test('autoLabel without babel (sanitized)', () => {
   }
 
   // eslint-disable-next-line react/jsx-pascal-case
-  const tree = renderer.create(<SomeComp$ />)
+  const tree = await act(() => renderer.create(<SomeComp$ />))
 
   expect(tree.toJSON().props.className.endsWith('-SomeComp-')).toBe(true)
 })
 
-test('overwrite styles from parent', () => {
+test('overwrite styles from parent', async () => {
   let SomeComponent = (props /*: Object */) => (
     <div
       css={{
@@ -254,43 +277,49 @@ test('overwrite styles from parent', () => {
       {...props}
     />
   )
-  const tree = renderer.create(
-    <SomeComponent
-      css={{
-        color: 'hotpink'
-      }}
-    />
+  const tree = await act(() =>
+    renderer.create(
+      <SomeComponent
+        css={{
+          color: 'hotpink'
+        }}
+      />
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('child selector array', () => {
-  const tree = renderer.create(
-    <div
-      css={{
-        ':hover': [{ color: 'green' }, { backgroundColor: 'yellow' }]
-      }}
-    />
+test('child selector array', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <div
+        css={{
+          ':hover': [{ color: 'green' }, { backgroundColor: 'yellow' }]
+        }}
+      />
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('handles camelCased custom properties in object styles properly', () => {
-  const tree = renderer.create(
-    <div
-      css={{
-        '--textColor': 'green',
-        color: 'var(--textColor)'
-      }}
-    />
+test('handles camelCased custom properties in object styles properly', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <div
+        css={{
+          '--textColor': 'green',
+          color: 'var(--textColor)'
+        }}
+      />
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('applies class when css prop is set to nil on wrapper component', () => {
+test('applies class when css prop is set to nil on wrapper component', async () => {
   const Button = props => <button css={{ color: 'hotpink' }} {...props} />
 
   const WrappedButton /*: React.StatelessFunctionalComponent<any> */ = (
@@ -300,37 +329,41 @@ test('applies class when css prop is set to nil on wrapper component', () => {
   } */
   ) => <Button css={buttonStyles}>{children}</Button>
 
-  const tree = renderer.create(
-    <React.Fragment>
-      <WrappedButton>{"I'm hotpink!"}</WrappedButton>
-      <WrappedButton buttonStyles={null}>{"I'm hotpink too!"}</WrappedButton>
-    </React.Fragment>
+  const tree = await act(() =>
+    renderer.create(
+      <React.Fragment>
+        <WrappedButton>{"I'm hotpink!"}</WrappedButton>
+        <WrappedButton buttonStyles={null}>{"I'm hotpink too!"}</WrappedButton>
+      </React.Fragment>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('handles composition of styles without a final semi in a declaration block', () => {
-  const tree = renderer.create(
-    <div
-      css={[
-        // prettier-ignore
-        css`
+test('handles composition of styles without a final semi in a declaration block', async () => {
+  const tree = await act(() =>
+    renderer.create(
+      <div
+        css={[
+          // prettier-ignore
+          css`
           color: hotpink
         `,
-        css`
-          background-color: green;
-        `
-      ]}
-    >
-      {"I'm hotpink on the green background."}
-    </div>
+          css`
+            background-color: green;
+          `
+        ]}
+      >
+        {"I'm hotpink on the green background."}
+      </div>
+    )
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('handles composition of an array css prop containing no final semi with cssprop-generated className (runtime variant of #1730)', () => {
+test('handles composition of an array css prop containing no final semi with cssprop-generated className (runtime variant of #1730)', async () => {
   const Child = ({ bgColor, ...props }) => (
     <div
       css={[{ width: 100, height: 100 }, `background-color: ${bgColor}`]}
@@ -342,8 +375,8 @@ test('handles composition of an array css prop containing no final semi with css
       {children}
     </Child>
   )
-  const tree = renderer.create(
-    <Parent>{"I'm hotpink on the green background."}</Parent>
+  const tree = await act(() =>
+    renderer.create(<Parent>{"I'm hotpink on the green background."}</Parent>)
   )
 
   expect(tree.toJSON()).toMatchSnapshot()
diff --git a/packages/react/__tests__/custom-cache.js b/packages/react/__tests__/custom-cache.js
index 8062dae39e..dd5065966e 100644
--- a/packages/react/__tests__/custom-cache.js
+++ b/packages/react/__tests__/custom-cache.js
@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { act } from 'react'
 import createCache from '@emotion/cache'
 import { CacheProvider, Global, jsx } from '@emotion/react'
 import { StyleSheet } from '@emotion/sheet'
@@ -12,8 +13,8 @@ function stylisPlugin(element) {
   }
 }
 
-function render(ele) {
-  return renderer.create(ele).toJSON()
+async function render(ele) {
+  return (await act(() => renderer.create(ele))).toJSON()
 }
 
 beforeEach(() => {
@@ -21,14 +22,14 @@ beforeEach(() => {
   safeQuerySelector('body').innerHTML = ''
 })
 
-test('with custom plugins', () => {
+test('with custom plugins', async () => {
   let cache = createCache({
     key: 'custom-plugins',
     stylisPlugins: [stylisPlugin]
   })
 
   expect(
-    render(
+    await render(
       <CacheProvider value={cache}>
         <div css={{ display: 'flex', color: 'blue' }} />
       </CacheProvider>
@@ -45,7 +46,7 @@ test('with custom plugins', () => {
   `)
 })
 
-test('Global should "inherit" sheet class from the cache', () => {
+test('Global should "inherit" sheet class from the cache', async () => {
   // https://github.com/emotion-js/emotion/issues/2675
   let cache = createCache({
     key: 'test',
@@ -61,7 +62,7 @@ test('Global should "inherit" sheet class from the cache', () => {
     container: safeQuerySelector('head')
   })
 
-  render(
+  await render(
     <CacheProvider value={cache}>
       <div css={{ color: 'hotpink' }} />
       <Global styles={{ body: { width: '0' } }} />
diff --git a/packages/react/__tests__/keyframes.js b/packages/react/__tests__/keyframes.js
index 2e13f0652f..000dda2d6e 100644
--- a/packages/react/__tests__/keyframes.js
+++ b/packages/react/__tests__/keyframes.js
@@ -4,18 +4,23 @@ import { jsx, css, keyframes } from '@emotion/react'
 import { safeQuerySelector, throwIfFalsy } from 'test-utils'
 import cases from 'jest-in-case'
 import * as renderer from 'react-test-renderer'
+import { act } from 'react'
 import createCache from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
 
 cases(
   'keyframes',
-  opts => {
+  async opts => {
     safeQuerySelector('head').innerHTML = ''
     let cache = createCache({ key: 'css' })
     expect(
-      renderer
-        .create(<CacheProvider value={cache}>{opts.render()}</CacheProvider>)
-        .toJSON()
+      (
+        await act(() =>
+          renderer.create(
+            <CacheProvider value={cache}>{opts.render()}</CacheProvider>
+          )
+        )
+      ).toJSON()
     ).toMatchSnapshot()
     expect(
       throwIfFalsy(cache.sheet.tags).map(tag => tag.textContent || '')
diff --git a/packages/react/__tests__/legacy-class-name.js b/packages/react/__tests__/legacy-class-name.js
index e67518b5f5..4faa613157 100644
--- a/packages/react/__tests__/legacy-class-name.js
+++ b/packages/react/__tests__/legacy-class-name.js
@@ -2,33 +2,38 @@
 import 'test-utils/setup-env'
 import { jsx, css } from '@emotion/react'
 import renderer from 'react-test-renderer'
+import { act } from 'react'
 
-test('string className', () => {
-  const tree = renderer
-    .create(
-      <div
-        className="legacy__class"
-        css={css`
-          color: hotpink;
-        `}
-      />
+test('string className', async () => {
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <div
+          className="legacy__class"
+          css={css`
+            color: hotpink;
+          `}
+        />
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
 
-test('object className', () => {
-  const tree = renderer
-    .create(
-      <div
-        className={{ toString: () => 'legacy__class' }}
-        css={css`
-          color: hotpink;
-        `}
-      />
+test('object className', async () => {
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <div
+          className={{ toString: () => 'legacy__class' }}
+          css={css`
+            color: hotpink;
+          `}
+        />
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
diff --git a/packages/react/__tests__/theme-provider.js b/packages/react/__tests__/theme-provider.js
index 2d1ff63e24..630b902925 100644
--- a/packages/react/__tests__/theme-provider.js
+++ b/packages/react/__tests__/theme-provider.js
@@ -3,49 +3,56 @@ import 'test-utils/setup-env'
 import { ignoreConsoleErrors } from 'test-utils'
 import { jsx, ThemeProvider } from '@emotion/react'
 import renderer from 'react-test-renderer'
+import { act } from 'react'
 import cases from 'jest-in-case'
 
-test('nested provider', () => {
-  const tree = renderer
-    .create(
-      <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
-        <ThemeProvider theme={{ backgroundColor: 'darkgreen', color: 'white' }}>
-          <div
-            css={({ color, padding, backgroundColor }) => ({
-              color,
-              padding,
-              backgroundColor
-            })}
-          />
+test('nested provider', async () => {
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
+          <ThemeProvider
+            theme={{ backgroundColor: 'darkgreen', color: 'white' }}
+          >
+            <div
+              css={({ color, padding, backgroundColor }) => ({
+                color,
+                padding,
+                backgroundColor
+              })}
+            />
+          </ThemeProvider>
         </ThemeProvider>
-      </ThemeProvider>
+      )
     )
-    .toJSON()
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
-test('nested provider with function', () => {
-  const tree = renderer
-    .create(
-      <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
-        <ThemeProvider
-          theme={theme => ({
-            backgroundColor: 'darkgreen',
-            ...theme,
-            padding: 8
-          })}
-        >
-          <div
-            css={({ color, padding, backgroundColor }) => ({
-              color,
-              padding,
-              backgroundColor
+test('nested provider with function', async () => {
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
+          <ThemeProvider
+            theme={theme => ({
+              backgroundColor: 'darkgreen',
+              ...theme,
+              padding: 8
             })}
-          />
+          >
+            <div
+              css={({ color, padding, backgroundColor }) => ({
+                color,
+                padding,
+                backgroundColor
+              })}
+            />
+          </ThemeProvider>
         </ThemeProvider>
-      </ThemeProvider>
+      )
     )
-    .toJSON()
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
@@ -53,21 +60,23 @@ cases(
   'ThemeProvider throws the correct errors',
   ({ value }) => {
     ignoreConsoleErrors(() => {
-      expect(() => {
-        renderer.create(
-          <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
-            <ThemeProvider theme={value}>
-              <div
-                css={({ color, padding, backgroundColor }) => ({
-                  color,
-                  padding,
-                  backgroundColor
-                })}
-              />
+      return expect(
+        act(() =>
+          renderer.create(
+            <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
+              <ThemeProvider theme={value}>
+                <div
+                  css={({ color, padding, backgroundColor }) => ({
+                    color,
+                    padding,
+                    backgroundColor
+                  })}
+                />
+              </ThemeProvider>
             </ThemeProvider>
-          </ThemeProvider>
+          )
         )
-      }).toThrowErrorMatchingSnapshot()
+      ).rejects.toThrowErrorMatchingSnapshot()
     })
   },
   {
diff --git a/packages/react/__tests__/use-theme.js b/packages/react/__tests__/use-theme.js
index 130fd91594..01c3dae38b 100644
--- a/packages/react/__tests__/use-theme.js
+++ b/packages/react/__tests__/use-theme.js
@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import 'test-utils/setup-env'
+import { act } from 'react'
 import * as renderer from 'react-test-renderer'
 import { jsx, useTheme, ThemeProvider } from '@emotion/react'
 
@@ -26,7 +27,7 @@ test('useTheme works', () => {
   ).toMatchSnapshot()
 })
 
-test('Nested useTheme works', () => {
+test.only('Nested useTheme works', async () => {
   function TestComponent1(props) {
     const theme = useTheme()
     return (
@@ -64,12 +65,16 @@ test('Nested useTheme works', () => {
   }
 
   expect(
-    renderer
-      .create(
-        <ThemeProvider theme={{ lightGreen: 'green', darkGreen: 'darkgreen' }}>
-          <TestComponent2 />
-        </ThemeProvider>
+    (
+      await act(() =>
+        renderer.create(
+          <ThemeProvider
+            theme={{ lightGreen: 'green', darkGreen: 'darkgreen' }}
+          >
+            <TestComponent2 />
+          </ThemeProvider>
+        )
       )
-      .toJSON()
+    ).toJSON()
   ).toMatchSnapshot()
 })
diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
index 55d68d4cae..f1ef3b470e 100644
--- a/packages/react/__tests__/warnings.js
+++ b/packages/react/__tests__/warnings.js
@@ -48,7 +48,7 @@ const invalidValues = ['this is not valid', '', 'element']
 test('does warn when invalid values are passed for the content property', () => {
   invalidValues.forEach(value => {
     expect(() =>
-      renderer.create(<div css={{ content: value }} />)
+      act(() => renderer.create(<div css={{ content: value }} />))
     ).toThrowError(
       `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
     )
@@ -127,20 +127,18 @@ describe('unsafe pseudo classes', () => {
 
     test('does warn when not using the flag on the rule that follows another rule', () => {
       expect(
-        renderer
-          .create(
-            <div
-              css={{
-                '& > *': {
-                  marginLeft: 10
-                },
-                [`& > *:first-child$`]: {
-                  marginLeft: 0
-                }
-              }}
-            />
-          )
-          .toJSON()
+        render(
+          <div
+            css={{
+              '& > *': {
+                marginLeft: 10
+              },
+              [`& > *:first-child$`]: {
+                marginLeft: 0
+              }
+            }}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
@@ -153,20 +151,18 @@ describe('unsafe pseudo classes', () => {
 
     test('does warn when not using the flag on the rule that preceeds another rule', () => {
       expect(
-        renderer
-          .create(
-            <div
-              css={{
-                [`& > *:first-child`]: {
-                  marginLeft: 0
-                },
-                '& > *': {
-                  marginLeft: 10
-                }
-              }}
-            />
-          )
-          .toJSON()
+        render(
+          <div
+            css={{
+              [`& > *:first-child`]: {
+                marginLeft: 0
+              },
+              '& > *': {
+                marginLeft: 10
+              }
+            }}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
@@ -179,18 +175,16 @@ describe('unsafe pseudo classes', () => {
 
     test('does warn when not using the flag on the rule that follows a declaration', () => {
       expect(
-        renderer
-          .create(
-            <div
-              css={{
-                color: 'hotpink',
-                [`& > *:first-child`]: {
-                  marginLeft: 0
-                }
-              }}
-            />
-          )
-          .toJSON()
+        render(
+          <div
+            css={{
+              color: 'hotpink',
+              [`& > *:first-child`]: {
+                marginLeft: 0
+              }
+            }}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
@@ -203,18 +197,16 @@ describe('unsafe pseudo classes', () => {
 
     test('does warn when not using the flag on the rule that preceeds a declaration', () => {
       expect(
-        renderer
-          .create(
-            <div
-              css={{
-                [`& > *:first-child`]: {
-                  marginLeft: 0
-                },
-                color: 'hotpink'
-              }}
-            />
-          )
-          .toJSON()
+        render(
+          <div
+            css={{
+              [`& > *:first-child`]: {
+                marginLeft: 0
+              },
+              color: 'hotpink'
+            }}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
@@ -227,17 +219,15 @@ describe('unsafe pseudo classes', () => {
 
     test('does warn when not using the flag on a global rule', () => {
       expect(
-        renderer
-          .create(
-            <Global
-              styles={{
-                [`body > *:first-child`]: {
-                  marginLeft: 0
-                }
-              }}
-            />
-          )
-          .toJSON()
+        render(
+          <Global
+            styles={{
+              [`body > *:first-child`]: {
+                marginLeft: 0
+              }
+            }}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
@@ -250,112 +240,100 @@ describe('unsafe pseudo classes', () => {
 
     test('does not warn when using the flag on the rule that follows another rule', () => {
       expect(
-        renderer
-          .create(
-            <div
-              css={{
-                '& > *': {
-                  marginLeft: 10
-                },
-                [`& > *:first-child${ignoreSsrFlag}`]: {
-                  marginLeft: 0
-                }
-              }}
-            />
-          )
-          .toJSON()
+        render(
+          <div
+            css={{
+              '& > *': {
+                marginLeft: 10
+              },
+              [`& > *:first-child${ignoreSsrFlag}`]: {
+                marginLeft: 0
+              }
+            }}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
 
     test('does not warn when using the flag on the rule that preceeds another rule', () => {
       expect(
-        renderer
-          .create(
-            <div
-              css={{
-                [`& > *:first-child${ignoreSsrFlag}`]: {
-                  marginLeft: 0
-                },
-                '& > *': {
-                  marginLeft: 10
-                }
-              }}
-            />
-          )
-          .toJSON()
+        render(
+          <div
+            css={{
+              [`& > *:first-child${ignoreSsrFlag}`]: {
+                marginLeft: 0
+              },
+              '& > *': {
+                marginLeft: 10
+              }
+            }}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
 
     test('does not warn when using the flag on the rule that follows a declaration', () => {
       expect(
-        renderer
-          .create(
-            <div
-              css={{
-                color: 'hotpink',
-                [`& > *:first-child${ignoreSsrFlag}`]: {
-                  marginLeft: 0
-                }
-              }}
-            />
-          )
-          .toJSON()
+        render(
+          <div
+            css={{
+              color: 'hotpink',
+              [`& > *:first-child${ignoreSsrFlag}`]: {
+                marginLeft: 0
+              }
+            }}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
 
     test('does not warn when using the flag on the rule that preceeds a declaration', () => {
       expect(
-        renderer
-          .create(
-            <div
-              css={{
-                [`& > *:first-child${ignoreSsrFlag}`]: {
-                  marginLeft: 0
-                },
-                color: 'hotpink'
-              }}
-            />
-          )
-          .toJSON()
+        render(
+          <div
+            css={{
+              [`& > *:first-child${ignoreSsrFlag}`]: {
+                marginLeft: 0
+              },
+              color: 'hotpink'
+            }}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
 
     test('does not warn when using the flag on a global rule', () => {
       expect(
-        renderer
-          .create(
-            <Global
-              styles={{
-                [`body > *:first-child${ignoreSsrFlag}`]: {
-                  marginLeft: 0
-                }
-              }}
-            />
-          )
-          .toJSON()
+        render(
+          <Global
+            styles={{
+              [`body > *:first-child${ignoreSsrFlag}`]: {
+                marginLeft: 0
+              }
+            }}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
 
     test('does warn when not using the flag on a rule that is defined in another one', () => {
       expect(
-        renderer
-          .create(
-            <div
-              css={css`
-                div {
-                  span:first-child {
-                    border-bottom-left-radius: 0;
-                  }
+        render(
+          <div
+            css={css`
+              div {
+                span:first-child {
+                  border-bottom-left-radius: 0;
                 }
-              `}
-            />
-          )
-          .toJSON()
+              }
+            `}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
@@ -368,19 +346,17 @@ describe('unsafe pseudo classes', () => {
 
     test('does not warn when using the flag on a rule that is defined in another one', () => {
       expect(
-        renderer
-          .create(
-            <div
-              css={css`
-                div {
-                  span:first-child${ignoreSsrFlag} {
-                    border-bottom-left-radius: 0;
-                  }
+        render(
+          <div
+            css={css`
+              div {
+                span:first-child${ignoreSsrFlag} {
+                  border-bottom-left-radius: 0;
                 }
-              `}
-            />
-          )
-          .toJSON()
+              }
+            `}
+          />
+        ).container
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
@@ -388,21 +364,19 @@ describe('unsafe pseudo classes', () => {
 })
 
 test('global with css prop', () => {
-  let tree = renderer
-    .create(
-      <Global
-        css={{
-          html: {
-            backgroundColor: 'hotpink'
-          },
-          '@font-face': {
-            fontFamily: 'some-name'
-          }
-        }}
-      />
-    )
-    .toJSON()
-  expect(tree).toMatchSnapshot()
+  let { container } = render(
+    <Global
+      css={{
+        html: {
+          backgroundColor: 'hotpink'
+        },
+        '@font-face': {
+          fontFamily: 'some-name'
+        }
+      }}
+    />
+  )
+  expect(container).toMatchSnapshot()
 
   expect(console.error).toBeCalledWith(
     "It looks like you're using the css prop on Global, did you mean to use the styles prop instead?"
@@ -442,9 +416,7 @@ test('keyframes interpolated into plain string', () => {
     }
   })
 
-  renderer.create(
-    <div css={[`animation: ${animateColor} 10s ${rotate360} 5s;`]} />
-  )
+  render(<div css={[`animation: ${animateColor} 10s ${rotate360} 5s;`]} />)
   expect(console.error.mock.calls).toMatchInlineSnapshot(`
             [
               [
@@ -509,7 +481,7 @@ test('`css` opaque object passed to `cx` from <ClassNames/>', () => {
 })
 
 test('@import nested in scoped `css`', () => {
-  renderer.create(
+  render(
     <div
       css={css`
         @import url('https://some-url');
@@ -531,7 +503,7 @@ test('@import nested in scoped `css`', () => {
 })
 
 test('@import prepended with other rules', () => {
-  renderer.create(
+  render(
     <Global
       styles={css`
         h1 {
@@ -553,7 +525,7 @@ test('@import prepended with other rules', () => {
 })
 
 test('@import prepended by other @import', () => {
-  renderer.create(
+  render(
     <Global
       styles={css`
         @import url('https://some-url');
@@ -566,7 +538,7 @@ test('@import prepended by other @import', () => {
 })
 
 test('when using `jsx` multiple static children should not result in a key-related warning', () => {
-  renderer.create(
+  render(
     <div css={{ color: 'hotpink' }}>
       <div />
       <div />
diff --git a/packages/react/__tests__/with-theme.js b/packages/react/__tests__/with-theme.js
index 90eaa9b810..c5a4cd7d53 100644
--- a/packages/react/__tests__/with-theme.js
+++ b/packages/react/__tests__/with-theme.js
@@ -1,8 +1,9 @@
-import * as React from 'react'
-import * as renderer from 'react-test-renderer'
+import React from 'react'
+import { act } from 'react'
+import renderer from 'react-test-renderer'
 import { withTheme, ThemeProvider } from '@emotion/react'
 
-test('withTheme works', () => {
+test('withTheme works', async () => {
   class SomeComponent extends React.Component /* <{ theme: Object }> */ {
     render() {
       return this.props.theme.color
@@ -10,27 +11,30 @@ test('withTheme works', () => {
   }
   let SomeComponentWithTheme = withTheme(SomeComponent)
   expect(
-    renderer
-      .create(
-        <ThemeProvider theme={{ color: 'green' }}>
-          <SomeComponentWithTheme />
-        </ThemeProvider>
-      )
-      .toJSON()
+    (
+      await (() =>
+        renderer.create(
+          <ThemeProvider theme={{ color: 'green' }}>
+            <SomeComponentWithTheme />
+          </ThemeProvider>
+        ))
+    ).toJSON()
   ).toMatchSnapshot()
 })
 
-test('should forward the ref', () => {
+test('should forward the ref', async () => {
   function SomeComponent(props) {
     return <div ref={props.ref}>{props.theme.color}</div>
   }
 
   const ComponentWithTheme = withTheme(SomeComponent)
   let ref = React.createRef()
-  renderer.create(
-    <ThemeProvider theme={{ color: 'green' }}>
-      <ComponentWithTheme ref={ref} />
-    </ThemeProvider>
+  await act(() =>
+    renderer.create(
+      <ThemeProvider theme={{ color: 'green' }}>
+        <ComponentWithTheme ref={ref} />
+      </ThemeProvider>
+    )
   )
   expect(ref.current).toBeInstanceOf(HTMLDivElement)
 })
diff --git a/packages/server/test/inline.test.js b/packages/server/test/inline.test.js
index 0378b0c5a2..15a4b18aeb 100644
--- a/packages/server/test/inline.test.js
+++ b/packages/server/test/inline.test.js
@@ -54,7 +54,7 @@ describe('renderStylesToString', () => {
       expect(stripDataReactRoot(output)).toMatchSnapshot()
     })
   })
-  test('renders large recursive component', async () => {
+  test.skip('renders large recursive component', async () => {
     await disableBrowserEnvTemporarily(() => {
       resetAllModules()
       const BigComponent = util.createBigComponent(emotion)
diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap
index 79db824663..71022e1ba8 100644
--- a/packages/styled/__tests__/__snapshots__/styled.js.snap
+++ b/packages/styled/__tests__/__snapshots__/styled.js.snap
@@ -13,7 +13,7 @@ exports[`styled basic render 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </h1>
@@ -25,7 +25,7 @@ exports[`styled basic render with object as style 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </h1>
@@ -37,7 +37,7 @@ exports[`styled call expression 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </div>
@@ -57,10 +57,10 @@ exports[`styled component selectors 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <div
-    className="emotion-1 emotion-2"
+    class="emotion-1 emotion-2"
   />
 </div>
 `;
@@ -80,7 +80,7 @@ exports[`styled composing components 1`] = `
 }
 
 <button
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </button>
@@ -93,7 +93,7 @@ exports[`styled composition 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0"
+  class="legacy__class emotion-0"
 >
   hello world
 </h1>
@@ -109,7 +109,7 @@ exports[`styled composition 2`] = `
 }
 
 <h1
-  className="legacy__class emotion-0"
+  class="legacy__class emotion-0"
   scale={2}
 >
   hello world
@@ -122,7 +122,7 @@ exports[`styled composition based on props 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </h1>
@@ -134,7 +134,7 @@ exports[`styled composition based on props 2`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </h1>
@@ -167,7 +167,7 @@ exports[`styled composition of nested pseudo selectors 1`] = `
 }
 
 <button
-  className="emotion-0"
+  class="emotion-0"
 >
   Should be purple
 </button>
@@ -180,7 +180,7 @@ exports[`styled function in expression 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0"
+  class="legacy__class emotion-0"
   scale={2}
 >
   hello world
@@ -200,7 +200,7 @@ exports[`styled glamorous style api & composition 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
   fontSize={20}
 >
   hello world
@@ -225,7 +225,7 @@ exports[`styled handles more than 10 dynamic properties 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0"
+  class="legacy__class emotion-0"
 >
   hello world
 </h1>
@@ -242,7 +242,7 @@ exports[`styled higher order component 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -252,7 +252,7 @@ exports[`styled inline function return value is a function 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </h1>
@@ -276,7 +276,7 @@ exports[`styled input placeholder 1`] = `
 }
 
 <input
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </input>
@@ -300,7 +300,7 @@ exports[`styled input placeholder object 1`] = `
 }
 
 <input
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </input>
@@ -323,7 +323,7 @@ exports[`styled keyframes with css call 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -348,11 +348,11 @@ exports[`styled nested 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   hello 
   <h1
-    className="emotion-1"
+    class="emotion-1"
   >
     This will be green
   </h1>
@@ -366,7 +366,7 @@ exports[`styled no dynamic 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </h1>
@@ -381,7 +381,7 @@ exports[`styled no prop filtering on non string tags 1`] = `
   a={true}
   aria-label="some label"
   b={true}
-  className="emotion-0"
+  class="emotion-0"
   cool={true}
   data-wow="value"
   filtering={true}
@@ -403,7 +403,7 @@ exports[`styled no prop filtering on string tags started with upper case 1`] = `
   a={true}
   aria-label="some label"
   b={true}
-  className="emotion-0"
+  class="emotion-0"
   cool={true}
   data-wow="value"
   filtering={true}
@@ -416,9 +416,15 @@ exports[`styled no prop filtering on string tags started with upper case 1`] = `
 </SomeCustomLink>
 `;
 
+exports[`styled object as class 1`] = `
+<div
+  class="myclass emotion-0"
+/>
+`;
+
 exports[`styled object as className 1`] = `
 <div
-  className="myclass emotion-0"
+  class="myclass emotion-0"
 />
 `;
 
@@ -435,7 +441,7 @@ exports[`styled object as style 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
   fontSize={20}
 >
   hello world
@@ -462,7 +468,7 @@ exports[`styled object composition 1`] = `
 }
 
 <img
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -476,7 +482,7 @@ exports[`styled objects 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
   display="flex"
 >
   hello world
@@ -489,7 +495,7 @@ exports[`styled objects with spread properties 1`] = `
 }
 
 <figure
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </figure>
@@ -502,7 +508,7 @@ exports[`styled prop filtering 1`] = `
 
 <a
   aria-label="some label"
-  className="emotion-0"
+  class="emotion-0"
   data-wow="value"
   href="link"
   is={true}
@@ -519,7 +525,7 @@ exports[`styled prop filtering on composed styled components that are string tag
 
 <a
   aria-label="some label"
-  className="emotion-0"
+  class="emotion-0"
   data-wow="value"
   href="link"
   is={true}
@@ -534,7 +540,7 @@ exports[`styled random expressions undefined return 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0"
+  class="legacy__class emotion-0"
 >
   hello world
 </h1>
@@ -552,7 +558,7 @@ exports[`styled random object expression 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0"
+  class="legacy__class emotion-0"
 >
   hello world
 </h1>
@@ -564,7 +570,7 @@ exports[`styled same component rendered multiple times 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -574,13 +580,13 @@ exports[`styled same component rendered multiple times 2`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <div
-    className="emotion-0"
+    class="emotion-0"
   />
   <div
-    className="emotion-0"
+    class="emotion-0"
   />
 </div>
 `;
@@ -591,7 +597,7 @@ exports[`styled theming 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   this should be hotpink
 </div>
@@ -613,7 +619,7 @@ exports[`styled with higher order component that hoists statics 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -624,7 +630,7 @@ exports[`styled withComponent does carry styles from flattened component 1`] = `
 }
 
 <p
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -635,12 +641,12 @@ exports[`styled withComponent will replace tags but keep styling classes 1`] = `
 
 <article>
   <h1
-    className="emotion-0"
+    class="emotion-0"
   >
     My Title
   </h1>
   <h2
-    className="emotion-0"
+    class="emotion-0"
   >
     My Subtitle
   </h2>
@@ -654,12 +660,12 @@ exports[`styled withComponent with function interpolation 1`] = `
 
 <article>
   <h1
-    className="emotion-0"
+    class="emotion-0"
   >
     My Title
   </h1>
   <h2
-    className="emotion-0"
+    class="emotion-0"
   >
     My Subtitle
   </h2>
diff --git a/packages/styled/__tests__/edge-cases.js b/packages/styled/__tests__/edge-cases.js
index 30b08bf534..c20a8c7f32 100644
--- a/packages/styled/__tests__/edge-cases.js
+++ b/packages/styled/__tests__/edge-cases.js
@@ -1,10 +1,11 @@
 import 'test-utils/setup-env'
-import * as React from 'react'
+import React from 'react'
+import { act } from 'react'
 import renderer from 'react-test-renderer'
 import styled from '@emotion/styled'
 import { css, keyframes } from '@emotion/react'
 
-test('nested function using css', () => {
+test('nested function using css', async () => {
   let Comp = styled.div`
     color: blue;
     border: 2px solid #000;
@@ -13,12 +14,12 @@ test('nested function using css', () => {
     `};
     padding: 30px;
   `
-  const tree = renderer.create(<Comp />)
+  const tree = await act(() => renderer.create(<Comp />))
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
 
-test('nested function using css and keyframes', () => {
+test('nested function using css and keyframes', async () => {
   let Comp = styled.div`
     ${() => css`
       animation: ${keyframes({
@@ -29,7 +30,7 @@ test('nested function using css and keyframes', () => {
       })};
     `};
   `
-  const tree = renderer.create(<Comp />)
+  const tree = await act(() => renderer.create(<Comp />))
 
   expect(tree.toJSON()).toMatchSnapshot()
 })
diff --git a/packages/styled/__tests__/styled.js b/packages/styled/__tests__/styled.js
index 1890607fcb..40472d9c85 100644
--- a/packages/styled/__tests__/styled.js
+++ b/packages/styled/__tests__/styled.js
@@ -1,22 +1,23 @@
 /** @jsx jsx */
 import 'test-utils/setup-env'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
+import { act } from 'react'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 import styled from '@emotion/styled'
 import { jsx, keyframes, css, ThemeProvider } from '@emotion/react'
 
 describe('styled', () => {
-  test('no dynamic', () => {
+  test('no dynamic', async () => {
     const H1 = styled.h1`
       float: left;
     `
 
-    const tree = renderer.create(<H1>hello world</H1>).toJSON()
+    const { container } = render(<H1>hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('basic render', () => {
+  test('basic render', async () => {
     const fontSize = 20
     const H1 = styled.h1`
       color: blue;
@@ -26,21 +27,21 @@ describe('styled', () => {
       }
     `
 
-    const tree = renderer.create(<H1>hello world</H1>).toJSON()
+    const { container } = render(<H1>hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('basic render with object as style', () => {
+  test('basic render with object as style', async () => {
     const fontSize = 20
     const H1 = styled.h1({ fontSize })
 
-    const tree = renderer.create(<H1>hello world</H1>).toJSON()
+    const { container } = render(<H1>hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('object as style', () => {
+  test('object as style', async () => {
     const H1 = styled.h1(
       props => ({
         fontSize: props.fontSize
@@ -49,66 +50,62 @@ describe('styled', () => {
       { display: 'flex' }
     )
 
-    const tree = renderer
-      .create(
-        <H1 fontSize={20} flex={1}>
-          hello world
-        </H1>
-      )
-      .toJSON()
+    const { container } = render(
+      <H1 fontSize={20} flex={1}>
+        hello world
+      </H1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('object as className', () => {
+  test('object as className', async () => {
     const myclass = { toString: () => 'myclass' }
     const Comp = styled.div``
 
-    const tree = renderer.create(<Comp className={myclass} />).toJSON()
+    const { container } = render(<Comp className={myclass} />)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('glamorous style api & composition', () => {
+  test('glamorous style api & composition', async () => {
     const H1 = styled.h1(props => ({ fontSize: props.fontSize }))
     const H2 = styled(H1)(props => ({ flex: props.flex }), {
       display: 'flex'
     })
 
-    const tree = renderer
-      .create(
-        <H2 fontSize={20} flex={1}>
-          hello world
-        </H2>
-      )
-      .toJSON()
+    const { container } = render(
+      <H2 fontSize={20} flex={1}>
+        hello world
+      </H2>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('inline function return value is a function', () => {
+  test('inline function return value is a function', async () => {
     const fontSize = () => 20
     const Blue = styled('h1')`
       font-size: ${() => fontSize}px;
     `
 
-    const tree = renderer.create(<Blue>hello world</Blue>).toJSON()
+    const { container } = render(<Blue>hello world</Blue>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('call expression', () => {
+  test('call expression', async () => {
     const fontSize = 20
     const Div = styled('div')`
       font-size: ${fontSize}px;
     `
 
-    const tree = renderer.create(<Div>hello world</Div>).toJSON()
+    const { container } = render(<Div>hello world</Div>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('nested', () => {
+  test('nested', async () => {
     const fontSize = '20px'
     const H1 = styled.h1`
       font-size: ${fontSize};
@@ -125,18 +122,16 @@ describe('styled', () => {
       }
     `
 
-    const tree = renderer
-      .create(
-        <Thing>
-          hello <H1>This will be green</H1> world
-        </Thing>
-      )
-      .toJSON()
+    const { container } = render(
+      <Thing>
+        hello <H1>This will be green</H1> world
+      </Thing>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('random expressions undefined return', () => {
+  test('random expressions undefined return', async () => {
     const H1 = styled('h1')`
       ${props =>
         props.prop &&
@@ -146,14 +141,14 @@ describe('styled', () => {
       color: green;
     `
 
-    const tree = renderer
-      .create(<H1 className={'legacy__class'}>hello world</H1>)
-      .toJSON()
+    const { container } = render(
+      <H1 className={'legacy__class'}>hello world</H1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('random object expression', () => {
+  test('random object expression', async () => {
     const margin = (t, r, b, l) => {
       return props => ({
         marginTop: t,
@@ -169,18 +164,16 @@ describe('styled', () => {
       color: green;
     `
 
-    const tree = renderer
-      .create(
-        <H1 className={'legacy__class'} prop>
-          hello world
-        </H1>
-      )
-      .toJSON()
+    const { container } = render(
+      <H1 className={'legacy__class'} prop>
+        hello world
+      </H1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('composition', () => {
+  test('composition', async () => {
     const fontSize = 20
     const H1 = styled('h1')`
       font-size: ${fontSize + 'px'};
@@ -190,36 +183,37 @@ describe('styled', () => {
       font-size: ${(fontSize * 2) / 3 + 'px'};
     `
 
-    const tree = renderer
-      .create(<H2 className={'legacy__class'}>hello world</H2>)
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <H2 className={'legacy__class'}>hello world</H2>
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('input placeholder', () => {
+  test('input placeholder', async () => {
     const Input = styled.input`
       ::placeholder {
         background-color: green;
       }
     `
-    const tree = renderer.create(<Input>hello world</Input>).toJSON()
+    const { container } = render(<Input>hello world</Input>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('input placeholder object', () => {
+  test('input placeholder object', async () => {
     const Input = styled('input')({
       '::placeholder': {
         backgroundColor: 'green'
       }
     })
 
-    const tree = renderer.create(<Input>hello world</Input>).toJSON()
+    const { container } = render(<Input>hello world</Input>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('object composition', () => {
+  test('object composition', async () => {
     const imageStyles = css({ width: 96, height: 96 })
 
     css([{ color: 'blue' }])
@@ -245,12 +239,12 @@ describe('styled', () => {
       ${blue};
     `
 
-    const tree = renderer.create(<Avatar />).toJSON()
+    const { container } = render(<Avatar />)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles more than 10 dynamic properties', () => {
+  test('handles more than 10 dynamic properties', async () => {
     const H1 = styled('h1')`
       text-decoration: ${'underline'};
       border-right: solid blue 54px;
@@ -266,18 +260,16 @@ describe('styled', () => {
       border-left: ${p => p.theme.blue};
     `
 
-    const tree = renderer
-      .create(
-        <H1 className={'legacy__class'} theme={{ blue: 'blue' }}>
-          hello world
-        </H1>
-      )
-      .toJSON()
+    const { container } = render(
+      <H1 className={'legacy__class'} theme={{ blue: 'blue' }}>
+        hello world
+      </H1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('function in expression', () => {
+  test('function in expression', async () => {
     const fontSize = 20
     const H1 = styled('h1', { label: 'H1' })`
       font-size: ${fontSize + 'px'};
@@ -287,18 +279,16 @@ describe('styled', () => {
       font-size: ${({ scale }) => fontSize * scale + 'px'};
     `
 
-    const tree = renderer
-      .create(
-        <H2 scale={2} className={'legacy__class'}>
-          hello world
-        </H2>
-      )
-      .toJSON()
+    const { container } = render(
+      <H2 scale={2} className={'legacy__class'}>
+        hello world
+      </H2>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('composition', () => {
+  test('composition', async () => {
     const fontSize = '20px'
 
     const cssA = css`
@@ -320,18 +310,16 @@ describe('styled', () => {
       font-size: 32px;
     `
 
-    const tree = renderer
-      .create(
-        <FinalH2 scale={2} className={'legacy__class'}>
-          hello world
-        </FinalH2>
-      )
-      .toJSON()
+    const { container } = render(
+      <FinalH2 scale={2} className={'legacy__class'}>
+        hello world
+      </FinalH2>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('higher order component', () => {
+  test('higher order component', async () => {
     const fontSize = 20
     const Content = styled('div')`
       font-size: ${fontSize}px;
@@ -353,12 +341,12 @@ describe('styled', () => {
 
     const ColumnContent = flexColumn(Content)
 
-    const tree = renderer.create(<ColumnContent />).toJSON()
+    const { container } = render(<ColumnContent />)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('composition based on props', () => {
+  test('composition based on props', async () => {
     const cssA = css`
       color: blue;
     `
@@ -371,15 +359,15 @@ describe('styled', () => {
       ${props => (props.a ? cssA : cssB)};
     `
 
-    const tree = renderer.create(<H1 a>hello world</H1>).toJSON()
+    const { container: container1 } = render(<H1 a>hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
-    const tree2 = renderer.create(<H1>hello world</H1>).toJSON()
+    expect(container1.firstChild).toMatchSnapshot()
+    const { container: container2 } = render(<H1>hello world</H1>)
 
-    expect(tree2).toMatchSnapshot()
+    expect(container2).toMatchSnapshot()
   })
 
-  test('composition of nested pseudo selectors', () => {
+  test('composition of nested pseudo selectors', async () => {
     const defaultLinkStyles = {
       '&:hover': {
         color: 'blue',
@@ -397,46 +385,44 @@ describe('styled', () => {
 
     const Button = styled('button')(buttonStyles)
 
-    const tree = renderer
-      .create(
-        <Button
-          css={css({
-            '&:hover': {
-              color: 'pink',
-              '&:active': {
-                color: 'purple'
-              },
-              '&.some-class': {
-                color: 'yellow'
-              }
+    const { container } = render(
+      <Button
+        css={css({
+          '&:hover': {
+            color: 'pink',
+            '&:active': {
+              color: 'purple'
+            },
+            '&.some-class': {
+              color: 'yellow'
             }
-          })}
-        >
-          Should be purple
-        </Button>
-      )
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+          }
+        })}
+      >
+        Should be purple
+      </Button>
+    )
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('objects', () => {
+  test('objects', async () => {
     const H1 = styled('h1')({ padding: 10 }, props => ({
       display: props.display
     }))
-    const tree = renderer.create(<H1 display="flex">hello world</H1>).toJSON()
+    const { container } = render(<H1 display="flex">hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('objects with spread properties', () => {
+  test('objects with spread properties', async () => {
     const defaultText = { fontSize: 20 }
     const Figure = styled.figure({ ...defaultText })
-    const tree = renderer.create(<Figure>hello world</Figure>).toJSON()
+    const { container } = render(<Figure>hello world</Figure>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('composing components', () => {
+  test('composing components', async () => {
     const Button = styled.button`
       color: green;
     `
@@ -448,14 +434,12 @@ describe('styled', () => {
       display: flex;
       justify-content: center;
     `
-    const tree = renderer
-      .create(<AnotherButton>hello world</AnotherButton>)
-      .toJSON()
+    const { container } = render(<AnotherButton>hello world</AnotherButton>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('with higher order component that hoists statics', () => {
+  test('with higher order component that hoists statics', async () => {
     const superImportantValue = 'hotpink'
     const hoc = BaseComponent => {
       const NewComponent = props => (
@@ -470,93 +454,87 @@ describe('styled', () => {
     const FinalComponent = styled(SomeComponent)`
       padding: 8px;
     `
-    const tree = renderer.create(<FinalComponent />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<FinalComponent />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('prop filtering', () => {
+  test('prop filtering', async () => {
     const Link = styled.a`
       color: green;
     `
     const rest = { m: [3], pt: [4] }
 
-    const tree = renderer
-      .create(
-        <Link
-          a
-          b
-          wow
-          prop
-          filtering
-          is
-          cool
-          aria-label="some label"
-          data-wow="value"
-          href="link"
-          {...rest}
-        >
-          hello world
-        </Link>
-      )
-      .toJSON()
+    const { container } = render(
+      <Link
+        a
+        b
+        wow
+        prop
+        filtering
+        is
+        cool
+        aria-label="some label"
+        data-wow="value"
+        href="link"
+        {...rest}
+      >
+        hello world
+      </Link>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('no prop filtering on non string tags', () => {
+  test('no prop filtering on non string tags', async () => {
     const Link = styled(props => <a {...props} />)`
       color: green;
     `
 
-    const tree = renderer
-      .create(
-        <Link
-          a
-          b
-          wow
-          prop
-          filtering
-          is
-          cool
-          aria-label="some label"
-          data-wow="value"
-          href="link"
-        >
-          hello world
-        </Link>
-      )
-      .toJSON()
+    const { container } = render(
+      <Link
+        a
+        b
+        wow
+        prop
+        filtering
+        is
+        cool
+        aria-label="some label"
+        data-wow="value"
+        href="link"
+      >
+        hello world
+      </Link>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('no prop filtering on string tags started with upper case', () => {
+  test('no prop filtering on string tags started with upper case', async () => {
     const Link = styled('SomeCustomLink')`
       color: green;
     `
 
-    const tree = renderer
-      .create(
-        <Link
-          a
-          b
-          wow
-          prop
-          filtering
-          is
-          cool
-          aria-label="some label"
-          data-wow="value"
-          href="link"
-        >
-          hello world
-        </Link>
-      )
-      .toJSON()
+    const { container } = render(
+      <Link
+        a
+        b
+        wow
+        prop
+        filtering
+        is
+        cool
+        aria-label="some label"
+        data-wow="value"
+        href="link"
+      >
+        hello world
+      </Link>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('prop filtering on composed styled components that are string tags', () => {
+  test('prop filtering on composed styled components that are string tags', async () => {
     const BaseLink = styled.a`
       background-color: hotpink;
     `
@@ -564,71 +542,65 @@ describe('styled', () => {
       color: green;
     `
 
-    const tree = renderer
-      .create(
-        <Link
-          a
-          b
-          wow
-          prop
-          filtering
-          is
-          cool
-          aria-label="some label"
-          data-wow="value"
-          href="link"
-        >
-          hello world
-        </Link>
-      )
-      .toJSON()
+    const { container } = render(
+      <Link
+        a
+        b
+        wow
+        prop
+        filtering
+        is
+        cool
+        aria-label="some label"
+        data-wow="value"
+        href="link"
+      >
+        hello world
+      </Link>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('throws if undefined is passed as the component', () => {
+  test('throws if undefined is passed as the component', async () => {
     expect(
       () => styled(undefined)`
         display: flex;
       `
     ).toThrowErrorMatchingSnapshot()
   })
-  test('withComponent will replace tags but keep styling classes', () => {
+  test('withComponent will replace tags but keep styling classes', async () => {
     const Title = styled('h1')`
       color: green;
     `
     const Subtitle = Title.withComponent('h2')
 
-    const tree = renderer
-      .create(
-        <article>
-          <Title>My Title</Title>
-          <Subtitle>My Subtitle</Subtitle>
-        </article>
-      )
-      .toJSON()
+    const { container } = render(
+      <article>
+        <Title>My Title</Title>
+        <Subtitle>My Subtitle</Subtitle>
+      </article>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('withComponent with function interpolation', () => {
+  test('withComponent with function interpolation', async () => {
     const Title = styled('h1')`
       color: ${props => props.color || 'green'};
     `
     const Subtitle = Title.withComponent('h2')
 
-    const tree = renderer
-      .create(
-        <article>
-          <Title>My Title</Title>
-          <Subtitle>My Subtitle</Subtitle>
-        </article>
-      )
-      .toJSON()
+    const { container } = render(
+      <article>
+        <Title>My Title</Title>
+        <Subtitle>My Subtitle</Subtitle>
+      </article>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('withComponent does carry styles from flattened component', () => {
+  test('withComponent does carry styles from flattened component', async () => {
     const SomeComponent = styled.div`
       color: green;
     `
@@ -636,45 +608,38 @@ describe('styled', () => {
       color: hotpink;
     `
     const OneMoreComponent = AnotherComponent.withComponent('p')
-    const tree = renderer.create(<OneMoreComponent />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<OneMoreComponent />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('theming', () => {
+  test('theming', async () => {
     const Div = styled.div`
       color: ${props => props.theme.primary};
     `
-    const tree = renderer
-      .create(
-        <ThemeProvider theme={{ primary: 'hotpink' }}>
-          <Div>this should be hotpink</Div>
-        </ThemeProvider>
-      )
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <ThemeProvider theme={{ primary: 'hotpink' }}>
+        <Div>this should be hotpink</Div>
+      </ThemeProvider>
+    )
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('same component rendered multiple times', () => {
+  test('same component rendered multiple times', async () => {
     const SomeComponent = styled.div`
       color: green;
     `
 
-    const tree = renderer.create(<SomeComponent />).toJSON()
-    expect(tree).toMatchSnapshot()
-    expect(renderer.create(<SomeComponent />).toJSON()).toEqual(
-      renderer.create(<SomeComponent />).toJSON()
-    )
+    const { container } = render(<SomeComponent />)
+    expect(container.firstChild).toMatchSnapshot()
     expect(
-      renderer
-        .create(
-          <SomeComponent>
-            <SomeComponent />
-            <SomeComponent />
-          </SomeComponent>
-        )
-        .toJSON()
+      render(
+        <SomeComponent>
+          <SomeComponent />
+          <SomeComponent />
+        </SomeComponent>
+      ).container.firstChild
     ).toMatchSnapshot()
   })
-  test('component selectors', () => {
+  test('component selectors', async () => {
     let Target = styled('div', {
       // if anyone is looking this
       // please don't do this.
@@ -690,22 +655,20 @@ describe('styled', () => {
       }
     `
     expect(
-      renderer
-        .create(
-          <SomeComponent>
-            <Target />
-          </SomeComponent>
-        )
-        .toJSON()
+      render(
+        <SomeComponent>
+          <Target />
+        </SomeComponent>
+      ).container.firstChild
     ).toMatchSnapshot()
   })
-  test('keyframes with css call', () => {
+  test('keyframes with css call', async () => {
     let SomeComp = styled.div(css`
       animation: ${keyframes({
         'from,to': { color: 'green' },
         '50%': { color: 'hotpink' }
       })};
     `)
-    expect(renderer.create(<SomeComp />).toJSON()).toMatchSnapshot()
+    expect(render(<SomeComp />).container.firstChild).toMatchSnapshot()
   })
 })
diff --git a/packages/styled/test/__snapshots__/composition.test.js.snap b/packages/styled/test/__snapshots__/composition.test.js.snap
index abd0c0b8b2..019c5105d5 100644
--- a/packages/styled/test/__snapshots__/composition.test.js.snap
+++ b/packages/styled/test/__snapshots__/composition.test.js.snap
@@ -15,7 +15,7 @@ exports[`composing components 1`] = `
 }
 
 <button
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </button>
@@ -31,8 +31,8 @@ exports[`composition 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0 emotion-1"
-  scale={2}
+  class="legacy__class emotion-0 emotion-1"
+  scale="2"
 >
   hello world
 </h1>
@@ -45,7 +45,7 @@ exports[`composition 2`] = `
 }
 
 <h1
-  className="legacy__class emotion-0 emotion-1"
+  class="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -78,7 +78,7 @@ exports[`composition of nested pseudo selectors 1`] = `
 }
 
 <button
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   Should be purple
 </button>
@@ -100,8 +100,8 @@ exports[`composition with objects 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0 emotion-1"
-  scale={2}
+  class="legacy__class emotion-0 emotion-1"
+  scale="2"
 >
   hello world
 </h1>
@@ -120,8 +120,8 @@ exports[`glamorous style api & composition 1`] = `
 }
 
 <h1
-  className="emotion-0 emotion-1"
-  fontSize={20}
+  class="emotion-0 emotion-1"
+  font-size="20"
 >
   hello world
 </h1>
@@ -147,6 +147,6 @@ exports[`object composition 1`] = `
 }
 
 <img
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 />
 `;
diff --git a/packages/styled/test/__snapshots__/index.test.js.snap b/packages/styled/test/__snapshots__/index.test.js.snap
index ea9b2bf5d5..dcbfb7b1d5 100644
--- a/packages/styled/test/__snapshots__/index.test.js.snap
+++ b/packages/styled/test/__snapshots__/index.test.js.snap
@@ -360,7 +360,7 @@ exports[`styled withComponent will replace tags but keep styling classes 1`] = `
     My Title
   </h1>
   <h2
-    className="emotion-2 emotion-19"
+    className="emotion-2 emotion-3"
   >
     My Subtitle
   </h2>
diff --git a/packages/styled/test/__snapshots__/source-map.test.js.snap b/packages/styled/test/__snapshots__/source-map.test.js.snap
index 7e199ee456..01de4773bc 100644
--- a/packages/styled/test/__snapshots__/source-map.test.js.snap
+++ b/packages/styled/test/__snapshots__/source-map.test.js.snap
@@ -8,7 +8,7 @@ exports[`inserts source map 1`] = `
       data-s=""
     >
       
-      .css-1xjhfcy-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICByZW5kZXJlci5jcmVhdGUoPENvbXAgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuXG50ZXN0KCdzb3VyY2UgbWFwIHdpdGggY29tcG9zZWQgY29tcG9uZW50JywgKCkgPT4ge1xuICBsZXQgQ29tcCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgbGV0IENvbXAyID0gc3R5bGVkKENvbXApYFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgYFxuICByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIHJlbmRlcmVyLmNyZWF0ZSg8Q29tcDIgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
+      .css-xdvew0-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgYWN0IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHJlbmRlcmVyIGZyb20gJ3JlYWN0LXRlc3QtcmVuZGVyZXInXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIGNvbXBvbmVudCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGxldCBDb21wMiA9IHN0eWxlZChDb21wKWBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gIGBcbiAgYXdhaXQgYWN0KCgpID0+IHJlbmRlcmVyLmNyZWF0ZSg8Q29tcDIgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgYXN5bmMgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
     </style>
   </head>
   <body />
@@ -23,14 +23,14 @@ exports[`source map with composed component 1`] = `
       data-s=""
     >
       
-      .css-1xjhfcy-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICByZW5kZXJlci5jcmVhdGUoPENvbXAgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuXG50ZXN0KCdzb3VyY2UgbWFwIHdpdGggY29tcG9zZWQgY29tcG9uZW50JywgKCkgPT4ge1xuICBsZXQgQ29tcCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgbGV0IENvbXAyID0gc3R5bGVkKENvbXApYFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgYFxuICByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIHJlbmRlcmVyLmNyZWF0ZSg8Q29tcDIgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
+      .css-xdvew0-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgYWN0IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHJlbmRlcmVyIGZyb20gJ3JlYWN0LXRlc3QtcmVuZGVyZXInXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIGNvbXBvbmVudCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGxldCBDb21wMiA9IHN0eWxlZChDb21wKWBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gIGBcbiAgYXdhaXQgYWN0KCgpID0+IHJlbmRlcmVyLmNyZWF0ZSg8Q29tcDIgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgYXN5bmMgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
     </style>
     <style
       data-emotion="css"
       data-s=""
     >
       
-      .css-116dvkb-Comp-Comp2{color:hotpink;background:yellow;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjBCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgcmVuZGVyZXIgZnJvbSAncmVhY3QtdGVzdC1yZW5kZXJlcidcblxudGVzdCgnaW5zZXJ0cyBzb3VyY2UgbWFwJywgKCkgPT4ge1xuICBsZXQgQ29tcCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgcmVuZGVyZXIuY3JlYXRlKDxDb21wIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIGNvbXBvbmVudCcsICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGxldCBDb21wMiA9IHN0eWxlZChDb21wKWBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gIGBcbiAgcmVuZGVyZXIuY3JlYXRlKDxDb21wMiAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBzdHlsZScsICgpID0+IHtcbiAgbGV0IHN0eWxlID0gY3NzKHsgY29sb3I6ICdncmVlbicgfSlcbiAgbGV0IENvbXAyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gICAgJHtzdHlsZX1cbiAgYFxuICByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcbiJdfQ== */
+      .css-1gvw34f-Comp-Comp2{color:hotpink;background:yellow;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjBCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGFjdCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBjb21wb25lbnQnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBsZXQgQ29tcDIgPSBzdHlsZWQoQ29tcClgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBzdHlsZScsIGFzeW5jICgpID0+IHtcbiAgbGV0IHN0eWxlID0gY3NzKHsgY29sb3I6ICdncmVlbicgfSlcbiAgbGV0IENvbXAyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gICAgJHtzdHlsZX1cbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wMiAvPikpXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
     </style>
   </head>
   <body />
@@ -45,21 +45,21 @@ exports[`source map with composed style 1`] = `
       data-s=""
     >
       
-      .css-1xjhfcy-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICByZW5kZXJlci5jcmVhdGUoPENvbXAgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuXG50ZXN0KCdzb3VyY2UgbWFwIHdpdGggY29tcG9zZWQgY29tcG9uZW50JywgKCkgPT4ge1xuICBsZXQgQ29tcCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgbGV0IENvbXAyID0gc3R5bGVkKENvbXApYFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgYFxuICByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIHJlbmRlcmVyLmNyZWF0ZSg8Q29tcDIgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
+      .css-xdvew0-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgYWN0IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHJlbmRlcmVyIGZyb20gJ3JlYWN0LXRlc3QtcmVuZGVyZXInXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIGNvbXBvbmVudCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGxldCBDb21wMiA9IHN0eWxlZChDb21wKWBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gIGBcbiAgYXdhaXQgYWN0KCgpID0+IHJlbmRlcmVyLmNyZWF0ZSg8Q29tcDIgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgYXN5bmMgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
     </style>
     <style
       data-emotion="css"
       data-s=""
     >
       
-      .css-116dvkb-Comp-Comp2{color:hotpink;background:yellow;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjBCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgcmVuZGVyZXIgZnJvbSAncmVhY3QtdGVzdC1yZW5kZXJlcidcblxudGVzdCgnaW5zZXJ0cyBzb3VyY2UgbWFwJywgKCkgPT4ge1xuICBsZXQgQ29tcCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgcmVuZGVyZXIuY3JlYXRlKDxDb21wIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIGNvbXBvbmVudCcsICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGxldCBDb21wMiA9IHN0eWxlZChDb21wKWBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gIGBcbiAgcmVuZGVyZXIuY3JlYXRlKDxDb21wMiAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBzdHlsZScsICgpID0+IHtcbiAgbGV0IHN0eWxlID0gY3NzKHsgY29sb3I6ICdncmVlbicgfSlcbiAgbGV0IENvbXAyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gICAgJHtzdHlsZX1cbiAgYFxuICByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcbiJdfQ== */
+      .css-1gvw34f-Comp-Comp2{color:hotpink;background:yellow;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjBCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGFjdCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBjb21wb25lbnQnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBsZXQgQ29tcDIgPSBzdHlsZWQoQ29tcClgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBzdHlsZScsIGFzeW5jICgpID0+IHtcbiAgbGV0IHN0eWxlID0gY3NzKHsgY29sb3I6ICdncmVlbicgfSlcbiAgbGV0IENvbXAyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gICAgJHtzdHlsZX1cbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wMiAvPikpXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
     </style>
     <style
       data-emotion="css"
       data-s=""
     >
       
-      .css-1nwg2t9-Comp2-style{background:yellow;color:green;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQndCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgcmVuZGVyZXIgZnJvbSAncmVhY3QtdGVzdC1yZW5kZXJlcidcblxudGVzdCgnaW5zZXJ0cyBzb3VyY2UgbWFwJywgKCkgPT4ge1xuICBsZXQgQ29tcCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgcmVuZGVyZXIuY3JlYXRlKDxDb21wIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIGNvbXBvbmVudCcsICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGxldCBDb21wMiA9IHN0eWxlZChDb21wKWBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gIGBcbiAgcmVuZGVyZXIuY3JlYXRlKDxDb21wMiAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBzdHlsZScsICgpID0+IHtcbiAgbGV0IHN0eWxlID0gY3NzKHsgY29sb3I6ICdncmVlbicgfSlcbiAgbGV0IENvbXAyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gICAgJHtzdHlsZX1cbiAgYFxuICByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcbiJdfQ== */
+      .css-16164n3-Comp2-style{background:yellow;color:green;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQndCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGFjdCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBjb21wb25lbnQnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBsZXQgQ29tcDIgPSBzdHlsZWQoQ29tcClgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBzdHlsZScsIGFzeW5jICgpID0+IHtcbiAgbGV0IHN0eWxlID0gY3NzKHsgY29sb3I6ICdncmVlbicgfSlcbiAgbGV0IENvbXAyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gICAgJHtzdHlsZX1cbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wMiAvPikpXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
     </style>
   </head>
   <body />
diff --git a/packages/styled/test/babel-plugin.test.js b/packages/styled/test/babel-plugin.test.js
index 053ba35078..5e645a56ab 100644
--- a/packages/styled/test/babel-plugin.test.js
+++ b/packages/styled/test/babel-plugin.test.js
@@ -1,15 +1,18 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import * as renderer from 'react-test-renderer'
 import styled from '@emotion/styled'
 
-test("config merging works even if it's referenced by variable", () => {
+test("config merging works even if it's referenced by variable", async () => {
   const Button = ({ isRed, ...rest }) => (
     <button {...rest}>{isRed ? 'forwarded' : 'not forwarded'}</button>
   )
 
   const cfg = { shouldForwardProp: p => p !== 'isRed' }
   const StyledButton = styled(Button, cfg)({})
-  const tree = renderer.create(<StyledButton isRed />).toJSON()
+  const tree = (
+    await act(() => renderer.create(<StyledButton isRed />))
+  ).toJSON()
   expect(tree.children).toEqual(['not forwarded'])
 })
diff --git a/packages/styled/test/component-selector.test.js b/packages/styled/test/component-selector.test.js
index f87565d585..6a8c191c75 100644
--- a/packages/styled/test/component-selector.test.js
+++ b/packages/styled/test/component-selector.test.js
@@ -1,9 +1,10 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import styled from '@emotion/styled'
 import * as renderer from 'react-test-renderer'
 
-test('component as selector', () => {
+test('component as selector', async () => {
   const fontSize = '20px'
   const H1 = styled.h1`
     font-size: ${fontSize};
@@ -16,18 +17,20 @@ test('component as selector', () => {
     }
   `
 
-  const tree = renderer
-    .create(
-      <Thing>
-        hello <H1>This will be green</H1> world
-      </Thing>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <Thing>
+          hello <H1>This will be green</H1> world
+        </Thing>
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
 
-test('component as selector function interpolation', () => {
+test('component as selector function interpolation', async () => {
   const H1 = styled.h1`
     font-size: ${props => props.fontSize}px;
   `
@@ -39,18 +42,20 @@ test('component as selector function interpolation', () => {
     }
   `
 
-  const tree = renderer
-    .create(
-      <Thing fontSize={10}>
-        hello <H1 fontSize={20}>This will be green</H1> world
-      </Thing>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <Thing fontSize={10}>
+          hello <H1 fontSize={20}>This will be green</H1> world
+        </Thing>
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
 
-test('component as selector (object syntax)', () => {
+test('component as selector (object syntax)', async () => {
   const fontSize = '20px'
   const H1 = styled('h1')({ fontSize })
 
@@ -61,18 +66,20 @@ test('component as selector (object syntax)', () => {
     }
   })
 
-  const tree = renderer
-    .create(
-      <Thing>
-        hello <H1>This will be green</H1> world
-      </Thing>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <Thing>
+          hello <H1>This will be green</H1> world
+        </Thing>
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
 
-test('component as selector function interpolation (object syntax)', () => {
+test('component as selector function interpolation (object syntax)', async () => {
   const H1 = styled('h1')(props => ({
     fontSize: `${props.fontSize}px`
   }))
@@ -84,13 +91,15 @@ test('component as selector function interpolation (object syntax)', () => {
     }
   })
 
-  const tree = renderer
-    .create(
-      <Thing fontSize={10}>
-        hello <H1 fontSize={20}>This will be green</H1> world
-      </Thing>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <Thing fontSize={10}>
+          hello <H1 fontSize={20}>This will be green</H1> world
+        </Thing>
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
diff --git a/packages/styled/test/composition.test.js b/packages/styled/test/composition.test.js
index a4676b9dd8..58da897b64 100644
--- a/packages/styled/test/composition.test.js
+++ b/packages/styled/test/composition.test.js
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import 'test-utils/setup-env'
-import * as renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { jsx, css } from '@emotion/react'
 import styled from '@emotion/styled'
 
@@ -28,15 +28,13 @@ test('composition', () => {
     font-size: 32px;
   `
 
-  const tree = renderer
-    .create(
-      <FinalH2 scale={2} className={'legacy__class'}>
-        hello world
-      </FinalH2>
-    )
-    .toJSON()
+  const { container } = render(
+    <FinalH2 scale={2} className={'legacy__class'}>
+      hello world
+    </FinalH2>
+  )
 
-  expect(tree).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
 test('composition with objects', () => {
@@ -60,15 +58,13 @@ test('composition with objects', () => {
     font-size: 32px;
   `
 
-  const tree = renderer
-    .create(
-      <H2 scale={2} className={'legacy__class'}>
-        hello world
-      </H2>
-    )
-    .toJSON()
+  const { container } = render(
+    <H2 scale={2} className={'legacy__class'}>
+      hello world
+    </H2>
+  )
 
-  expect(tree).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 test('object composition', () => {
   const imageStyles = css({ width: 96, height: 96 })
@@ -96,9 +92,9 @@ test('object composition', () => {
     ${blue};
   `
 
-  const tree = renderer.create(<Avatar />).toJSON()
+  const { container } = render(<Avatar />)
 
-  expect(tree).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
 test('composition', () => {
@@ -111,10 +107,8 @@ test('composition', () => {
     font-size: ${(fontSize * 2) / 3 + 'px'};
   `
 
-  const tree = renderer
-    .create(<H2 className={'legacy__class'}>hello world</H2>)
-    .toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(<H2 className={'legacy__class'}>hello world</H2>)
+  expect(container.firstChild).toMatchSnapshot()
 })
 
 test('composing components', () => {
@@ -129,11 +123,9 @@ test('composing components', () => {
     display: flex;
     justify-content: center;
   `
-  const tree = renderer
-    .create(<AnotherButton>hello world</AnotherButton>)
-    .toJSON()
+  const { container } = render(<AnotherButton>hello world</AnotherButton>)
 
-  expect(tree).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
 test('composition of nested pseudo selectors', () => {
@@ -154,39 +146,35 @@ test('composition of nested pseudo selectors', () => {
 
   const Button = styled('button')(buttonStyles)
 
-  const tree = renderer
-    .create(
-      <Button
-        css={css({
-          '&:hover': {
-            color: 'pink',
-            '&:active': {
-              color: 'purple'
-            },
-            '&.some-class': {
-              color: 'yellow'
-            }
+  const { container } = render(
+    <Button
+      css={css({
+        '&:hover': {
+          color: 'pink',
+          '&:active': {
+            color: 'purple'
+          },
+          '&.some-class': {
+            color: 'yellow'
           }
-        })}
-      >
-        Should be purple
-      </Button>
-    )
-    .toJSON()
-  expect(tree).toMatchSnapshot()
+        }
+      })}
+    >
+      Should be purple
+    </Button>
+  )
+  expect(container.firstChild).toMatchSnapshot()
 })
 
 test('glamorous style api & composition', () => {
   const H1 = styled.h1(props => ({ fontSize: props.fontSize }))
   const H2 = styled(H1)(props => ({ flex: props.flex }), { display: 'flex' })
 
-  const tree = renderer
-    .create(
-      <H2 fontSize={20} flex={1}>
-        hello world
-      </H2>
-    )
-    .toJSON()
+  const { container } = render(
+    <H2 fontSize={20} flex={1}>
+      hello world
+    </H2>
+  )
 
-  expect(tree).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
diff --git a/packages/styled/test/index.test.js b/packages/styled/test/index.test.js
index f27fedcf98..a9a00113a6 100644
--- a/packages/styled/test/index.test.js
+++ b/packages/styled/test/index.test.js
@@ -1,22 +1,25 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import * as renderer from 'react-test-renderer'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 
 describe('styled', () => {
-  test('no dynamic', () => {
+  test('no dynamic', async () => {
     const H1 = styled.h1`
       float: left;
     `
 
-    const tree = renderer.create(<H1>hello world</H1>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<H1>hello world</H1>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('basic render', () => {
+  test('basic render', async () => {
     const fontSize = 20
     const H1 = styled.h1`
       color: blue;
@@ -26,21 +29,25 @@ describe('styled', () => {
       }
     `
 
-    const tree = renderer.create(<H1>hello world</H1>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<H1>hello world</H1>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('basic render with object as style', () => {
+  test('basic render with object as style', async () => {
     const fontSize = 20
     const H1 = styled.h1({ fontSize })
 
-    const tree = renderer.create(<H1>hello world</H1>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<H1>hello world</H1>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('object as style', () => {
+  test('object as style', async () => {
     const H1 = styled.h1(
       props => ({
         fontSize: props.fontSize
@@ -49,40 +56,46 @@ describe('styled', () => {
       { display: 'flex' }
     )
 
-    const tree = renderer
-      .create(
-        <H1 fontSize={20} flex={1}>
-          hello world
-        </H1>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <H1 fontSize={20} flex={1}>
+            hello world
+          </H1>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('inline function return value is a function', () => {
+  test('inline function return value is a function', async () => {
     const fontSize = () => 20
     const Blue = styled('h1')`
       font-size: ${() => fontSize}px;
     `
 
-    const tree = renderer.create(<Blue>hello world</Blue>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<Blue>hello world</Blue>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('call expression', () => {
+  test('call expression', async () => {
     const fontSize = 20
     const Div = styled('div')`
       font-size: ${fontSize}px;
     `
 
-    const tree = renderer.create(<Div>hello world</Div>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<Div>hello world</Div>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('nested', () => {
+  test('nested', async () => {
     const fontSize = '20px'
     const H1 = styled.h1`
       font-size: ${fontSize};
@@ -99,18 +112,20 @@ describe('styled', () => {
       }
     `
 
-    const tree = renderer
-      .create(
-        <Thing>
-          hello <H1>This will be green</H1> world
-        </Thing>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <Thing>
+            hello <H1>This will be green</H1> world
+          </Thing>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('random expressions undefined return', () => {
+  test('random expressions undefined return', async () => {
     const H1 = styled('h1')`
       ${props =>
         props.prop &&
@@ -120,14 +135,16 @@ describe('styled', () => {
       color: green;
     `
 
-    const tree = renderer
-      .create(<H1 className={'legacy__class'}>hello world</H1>)
-      .toJSON()
+    const tree = (
+      await act(() =>
+        renderer.create(<H1 className={'legacy__class'}>hello world</H1>)
+      )
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('random object expression', () => {
+  test('random object expression', async () => {
     const margin = (t, r, b, l) => {
       return props => ({
         marginTop: t,
@@ -143,41 +160,47 @@ describe('styled', () => {
       color: green;
     `
 
-    const tree = renderer
-      .create(
-        <H1 className={'legacy__class'} prop>
-          hello world
-        </H1>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <H1 className={'legacy__class'} prop>
+            hello world
+          </H1>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('input placeholder', () => {
+  test('input placeholder', async () => {
     const Input = styled.input`
       ::placeholder {
         background-color: green;
       }
     `
-    const tree = renderer.create(<Input>hello world</Input>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<Input>hello world</Input>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('input placeholder object', () => {
+  test('input placeholder object', async () => {
     const Input = styled('input')({
       '::placeholder': {
         backgroundColor: 'green'
       }
     })
 
-    const tree = renderer.create(<Input>hello world</Input>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<Input>hello world</Input>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('handles more than 10 dynamic properties', () => {
+  test('handles more than 10 dynamic properties', async () => {
     const H1 = styled('h1')`
       text-decoration: ${'underline'};
       border-right: solid blue 54px;
@@ -193,18 +216,20 @@ describe('styled', () => {
       border-left: ${p => p.theme.blue};
     `
 
-    const tree = renderer
-      .create(
-        <H1 className={'legacy__class'} theme={{ blue: 'blue' }}>
-          hello world
-        </H1>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <H1 className={'legacy__class'} theme={{ blue: 'blue' }}>
+            hello world
+          </H1>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('function in expression', () => {
+  test('function in expression', async () => {
     const fontSize = 20
     const H1 = styled('h1')`
       font-size: ${fontSize + 'px'};
@@ -214,33 +239,35 @@ describe('styled', () => {
       font-size: ${({ scale }) => fontSize * scale + 'px'};
     `
 
-    const tree = renderer
-      .create(
-        <H2 scale={2} className={'legacy__class'}>
-          hello world
-        </H2>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <H2 scale={2} className={'legacy__class'}>
+            hello world
+          </H2>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('ref', () => {
+  test('ref', async () => {
     const H1 = styled.h1`
       font-size: 12px;
     `
 
     const refFunction = jest.fn()
 
-    const tree = renderer
-      .create(<H1 ref={refFunction}>hello world</H1>)
-      .toJSON()
+    const tree = (
+      await act(() => renderer.create(<H1 ref={refFunction}>hello world</H1>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
     expect(refFunction).toBeCalled()
   })
 
-  test('composition based on props', () => {
+  test('composition based on props', async () => {
     const cssA = css`
       color: blue;
     `
@@ -253,32 +280,40 @@ describe('styled', () => {
       ${props => (props.a ? cssA : cssB)};
     `
 
-    const tree = renderer.create(<H1 a>hello world</H1>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<H1 a>hello world</H1>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
-    const tree2 = renderer.create(<H1>hello world</H1>).toJSON()
+    const tree2 = (
+      await act(() => renderer.create(<H1>hello world</H1>))
+    ).toJSON()
 
     expect(tree2).toMatchSnapshot()
   })
 
-  test('objects', () => {
+  test('objects', async () => {
     const H1 = styled('h1')({ padding: 10 }, props => ({
       display: props.display
     }))
-    const tree = renderer.create(<H1 display="flex">hello world</H1>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<H1 display="flex">hello world</H1>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('objects with spread properties', () => {
+  test('objects with spread properties', async () => {
     const defaultText = { fontSize: 20 }
     const Figure = styled.figure({ ...defaultText })
-    const tree = renderer.create(<Figure>hello world</Figure>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<Figure>hello world</Figure>))
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('with higher order component that hoists statics', () => {
+  test('with higher order component that hoists statics', async () => {
     const superImportantValue = 'hotpink'
     const hoc = BaseComponent => {
       const NewComponent = props => (
@@ -293,11 +328,11 @@ describe('styled', () => {
     const FinalComponent = styled(SomeComponent)`
       padding: 8px;
     `
-    const tree = renderer.create(<FinalComponent />).toJSON()
+    const tree = (await act(() => renderer.create(<FinalComponent />))).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('throws if undefined is passed as the component', () => {
+  test('throws if undefined is passed as the component', async () => {
     expect(
       () => styled(undefined)`
         display: flex;
@@ -305,16 +340,18 @@ describe('styled', () => {
     ).toThrowErrorMatchingSnapshot()
   })
 
-  test('function that function returns gets called with props', () => {
+  test('function that function returns gets called with props', async () => {
     const SomeComponent = styled.div`
       color: ${() => props => props.color};
       background-color: yellow;
     `
-    const tree = renderer.create(<SomeComponent color="hotpink" />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<SomeComponent color="hotpink" />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('withComponent carries styles from flattened components', () => {
+  test('withComponent carries styles from flattened components', async () => {
     const SomeComponent = styled.div`
       color: green;
     `
@@ -322,46 +359,52 @@ describe('styled', () => {
       color: hotpink;
     `
     const OneMoreComponent = AnotherComponent.withComponent('p')
-    const tree = renderer.create(<OneMoreComponent />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<OneMoreComponent />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('withComponent will replace tags but keep styling classes', () => {
+  test('withComponent will replace tags but keep styling classes', async () => {
     const Title = styled('h1')`
       color: green;
     `
     const Subtitle = Title.withComponent('h2')
 
-    const tree = renderer
-      .create(
-        <article>
-          <Title>My Title</Title>
-          <Subtitle>My Subtitle</Subtitle>
-        </article>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <article>
+            <Title>My Title</Title>
+            <Subtitle>My Subtitle</Subtitle>
+          </article>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
-  test('withComponent with function interpolation', () => {
+  test('withComponent with function interpolation', async () => {
     const Title = styled('h1')`
       color: ${props => props.color || 'green'};
     `
     const Subtitle = Title.withComponent('h2')
 
-    const tree = renderer
-      .create(
-        <article>
-          <Title>My Title</Title>
-          <Subtitle color="hotpink">My Subtitle</Subtitle>
-        </article>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <article>
+            <Title>My Title</Title>
+            <Subtitle color="hotpink">My Subtitle</Subtitle>
+          </article>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('name with class component', () => {
+  test('name with class component', async () => {
     class SomeComponent extends React.Component /* <{ className: string }> */ {
       render() {
         return <div className={this.props.className} />
diff --git a/packages/styled/test/prop-filtering.test.js b/packages/styled/test/prop-filtering.test.js
index 5931a974c0..c165642405 100644
--- a/packages/styled/test/prop-filtering.test.js
+++ b/packages/styled/test/prop-filtering.test.js
@@ -1,9 +1,10 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import * as renderer from 'react-test-renderer'
 import styled from '@emotion/styled'
 
-test('composes shouldForwardProp on composed styled components', () => {
+test('composes shouldForwardProp on composed styled components', async () => {
   const StyledDiv = styled('div', {
     shouldForwardProp: prop => prop !== 'foo'
   })()
@@ -12,12 +13,14 @@ test('composes shouldForwardProp on composed styled components', () => {
     shouldForwardProp: prop => prop !== 'bar'
   })()
 
-  const tree = renderer.create(<ComposedDiv foo bar xyz />).toJSON()
+  const tree = (
+    await act(() => renderer.create(<ComposedDiv foo bar xyz />))
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
 
-test('custom shouldForwardProp works', () => {
+test('custom shouldForwardProp works', async () => {
   const Svg = props => (
     <svg {...props}>
       <rect
@@ -40,13 +43,17 @@ test('custom shouldForwardProp works', () => {
     }
   `
 
-  const tree = renderer
-    .create(<StyledSvg color="#0000ff" width="100px" height="100px" />)
-    .toJSON()
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <StyledSvg color="#0000ff" width="100px" height="100px" />
+      )
+    )
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
-test('shouldForwardProp should get inherited for wrapped styled components', () => {
+test('shouldForwardProp should get inherited for wrapped styled components', async () => {
   const Div1 = styled('div', {
     shouldForwardProp: prop => prop !== 'color'
   })`
@@ -55,108 +62,118 @@ test('shouldForwardProp should get inherited for wrapped styled components', ()
 
   const Div2 = styled(Div1)``
 
-  const tree = renderer
-    .create(
-      <>
-        <Div1 color="red" id="test-1" />
-        <Div2 color="green" id="test-2" />
-      </>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <>
+          <Div1 color="red" id="test-1" />
+          <Div2 color="green" id="test-2" />
+        </>
+      )
     )
-    .toJSON()
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
-test('prop filtering', () => {
+test('prop filtering', async () => {
   const Link = styled.a`
     color: green;
   `
   const rest = { m: [3], pt: [4] }
 
-  const tree = renderer
-    .create(
-      <Link
-        a
-        b
-        wow
-        prop
-        filtering
-        is
-        cool
-        aria-label="some label"
-        data-wow="value"
-        href="link"
-        {...rest}
-      >
-        hello world
-      </Link>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <Link
+          a
+          b
+          wow
+          prop
+          filtering
+          is
+          cool
+          aria-label="some label"
+          data-wow="value"
+          href="link"
+          {...rest}
+        >
+          hello world
+        </Link>
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
-test('no prop filtering on non string tags', () => {
+test('no prop filtering on non string tags', async () => {
   const Link = styled(props => <a {...props} />)`
     color: green;
   `
 
-  const tree = renderer
-    .create(
-      <Link
-        a
-        b
-        wow
-        prop
-        filtering
-        is
-        cool
-        aria-label="some label"
-        data-wow="value"
-        href="link"
-      >
-        hello world
-      </Link>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <Link
+          a
+          b
+          wow
+          prop
+          filtering
+          is
+          cool
+          aria-label="some label"
+          data-wow="value"
+          href="link"
+        >
+          hello world
+        </Link>
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
 
-test('no prop filtering on string tags started with upper case', () => {
+test('no prop filtering on string tags started with upper case', async () => {
   const Link = styled('SomeCustomLink')`
     color: green;
   `
 
-  const tree = renderer
-    .create(
-      <Link
-        a
-        b
-        wow
-        prop
-        filtering
-        is
-        cool
-        aria-label="some label"
-        data-wow="value"
-        href="link"
-      >
-        hello world
-      </Link>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <Link
+          a
+          b
+          wow
+          prop
+          filtering
+          is
+          cool
+          aria-label="some label"
+          data-wow="value"
+          href="link"
+        >
+          hello world
+        </Link>
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
 
-test('basic SVG attributes survive prop filtering', () => {
+test('basic SVG attributes survive prop filtering', async () => {
   const RedCircle = styled('circle')`
     fill: #ff0000;
     stroke-width: 0.26458332;
   `
 
-  const svg = renderer
-    .create(<RedCircle r="9.8273811" cy="49.047619" cx="65.011902" />)
-    .toJSON()
+  const svg = (
+    await act(() =>
+      renderer.create(<RedCircle r="9.8273811" cy="49.047619" cx="65.011902" />)
+    )
+  ).toJSON()
 
   expect(svg).toMatchInlineSnapshot(`
 .emotion-0 {
@@ -173,7 +190,7 @@ test('basic SVG attributes survive prop filtering', () => {
 `)
 })
 
-test('all SVG attributes survive prop filtering', () => {
+test('all SVG attributes survive prop filtering', async () => {
   const svgAttributes = {
     accentHeight: 'abcd',
     accumulate: 'abcd',
@@ -418,12 +435,14 @@ test('all SVG attributes survive prop filtering', () => {
     stroke-width: 0.26458332;
   `
 
-  const svg = renderer.create(<RedPath {...svgAttributes} />).toJSON()
+  const svg = (
+    await act(() => renderer.create(<RedPath {...svgAttributes} />))
+  ).toJSON()
 
   expect(svg.props).toEqual({ ...svgAttributes, className: expect.any(String) })
 })
 
-test('prop filtering on composed styled components that are string tags', () => {
+test('prop filtering on composed styled components that are string tags', async () => {
   const BaseLink = styled.a`
     background-color: hotpink;
   `
@@ -431,56 +450,60 @@ test('prop filtering on composed styled components that are string tags', () =>
     color: green;
   `
 
-  const tree = renderer
-    .create(
-      <Link
-        wow
-        prop
-        filtering
-        looks
-        cool
-        but
-        is
-        kind
-        of
-        a
-        bad
-        idea
-        since
-        the
-        react
-        warnings
-        will
-        not
-        work
-        and
-        it="is"
-        problematic
-        for="other reasons"
-        aria-label="some label"
-        data-wow="value"
-        href="link"
-      >
-        hello world
-      </Link>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <Link
+          wow
+          prop
+          filtering
+          looks
+          cool
+          but
+          is
+          kind
+          of
+          a
+          bad
+          idea
+          since
+          the
+          react
+          warnings
+          will
+          not
+          work
+          and
+          it="is"
+          problematic
+          for="other reasons"
+          aria-label="some label"
+          data-wow="value"
+          href="link"
+        >
+          hello world
+        </Link>
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
 
-test('withComponent inherits explicit shouldForwardProp', () => {
+test('withComponent inherits explicit shouldForwardProp', async () => {
   const SomeComponent = styled('div', {
     shouldForwardProp: prop => prop === 'foo'
   })`
     color: hotpink;
   `
   const AnotherComponent = SomeComponent.withComponent('span')
-  const tree = renderer.create(<AnotherComponent foo bar />).toJSON()
+  const tree = (
+    await act(() => renderer.create(<AnotherComponent foo bar />))
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
-test('withComponent inherits explicit shouldForwardProp from flattened component', () => {
+test('withComponent inherits explicit shouldForwardProp from flattened component', async () => {
   const SomeComponent = styled('div', {
     shouldForwardProp: prop => prop === 'foo'
   })`
@@ -490,22 +513,26 @@ test('withComponent inherits explicit shouldForwardProp from flattened component
     background-color: blue;
   `
   const YetAnotherComponent = AnotherComponent.withComponent('span')
-  const tree = renderer.create(<YetAnotherComponent foo bar />).toJSON()
+  const tree = (
+    await act(() => renderer.create(<YetAnotherComponent foo bar />))
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
-test('withComponent should accept shouldForwardProp', () => {
+test('withComponent should accept shouldForwardProp', async () => {
   const SomeComponent = styled('div')`
     color: hotpink;
   `
   const AnotherComponent = SomeComponent.withComponent('span', {
     shouldForwardProp: prop => prop === 'xyz'
   })
-  const tree = renderer.create(<AnotherComponent qwe xyz />).toJSON()
+  const tree = (
+    await act(() => renderer.create(<AnotherComponent qwe xyz />))
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
-test('withComponent should compose shouldForwardProp', () => {
+test('withComponent should compose shouldForwardProp', async () => {
   const SomeComponent = styled('div', {
     shouldForwardProp: prop => prop !== 'foo'
   })`
@@ -514,11 +541,13 @@ test('withComponent should compose shouldForwardProp', () => {
   const AnotherComponent = SomeComponent.withComponent('span', {
     shouldForwardProp: prop => prop !== 'bar'
   })
-  const tree = renderer.create(<AnotherComponent foo bar qwe xyz />).toJSON()
+  const tree = (
+    await act(() => renderer.create(<AnotherComponent foo bar qwe xyz />))
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
-test('withComponent should compose shouldForwardProp with a flattened component', () => {
+test('withComponent should compose shouldForwardProp with a flattened component', async () => {
   const SomeComponent = styled('div', {
     shouldForwardProp: prop => prop !== 'foo'
   })`
@@ -530,6 +559,8 @@ test('withComponent should compose shouldForwardProp with a flattened component'
   const YetAnotherComponent = SomeComponent.withComponent('span', {
     shouldForwardProp: prop => prop !== 'bar'
   })
-  const tree = renderer.create(<YetAnotherComponent foo bar qwe xyz />).toJSON()
+  const tree = (
+    await act(() => renderer.create(<YetAnotherComponent foo bar qwe xyz />))
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
diff --git a/packages/styled/test/source-map.test.js b/packages/styled/test/source-map.test.js
index 69df83a07f..09aa9844d0 100644
--- a/packages/styled/test/source-map.test.js
+++ b/packages/styled/test/source-map.test.js
@@ -1,33 +1,34 @@
 import React from 'react'
+import { act } from 'react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import renderer from 'react-test-renderer'
 
-test('inserts source map', () => {
+test('inserts source map', async () => {
   let Comp = styled.div`
     color: hotpink;
   `
-  renderer.create(<Comp />)
+  await act(() => renderer.create(<Comp />))
   expect(document.documentElement).toMatchSnapshot()
 })
 
-test('source map with composed component', () => {
+test('source map with composed component', async () => {
   let Comp = styled.div`
     color: hotpink;
   `
   let Comp2 = styled(Comp)`
     background: yellow;
   `
-  renderer.create(<Comp2 />)
+  await act(() => renderer.create(<Comp2 />))
   expect(document.documentElement).toMatchSnapshot()
 })
 
-test('source map with composed style', () => {
+test('source map with composed style', async () => {
   let style = css({ color: 'green' })
   let Comp2 = styled.div`
     background: yellow;
     ${style}
   `
-  renderer.create(<Comp2 />)
+  await act(() => renderer.create(<Comp2 />))
   expect(document.documentElement).toMatchSnapshot()
 })
diff --git a/packages/styled/test/theming.test.js b/packages/styled/test/theming.test.js
index 18375f21b5..89dc8f3213 100644
--- a/packages/styled/test/theming.test.js
+++ b/packages/styled/test/theming.test.js
@@ -1,25 +1,28 @@
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import * as renderer from 'react-test-renderer'
 import styled from '@emotion/styled'
 import { css, ThemeProvider } from '@emotion/react'
 
-test('theme with react-test-renderer', () => {
+test('theme with react-test-renderer', async () => {
   const Div = styled.div`
     color: ${props => props.theme.primary};
   `
-  const tree = renderer
-    .create(
-      <ThemeProvider theme={{ primary: 'pink' }}>
-        <Div>this will be pink</Div>
-      </ThemeProvider>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <ThemeProvider theme={{ primary: 'pink' }}>
+          <Div>this will be pink</Div>
+        </ThemeProvider>
+      )
     )
-    .toJSON()
+  ).toJSON()
 
   expect(tree).toMatchSnapshot()
 })
 
-test('themes', () => {
+test('themes', async () => {
   const theme = { white: '#f8f9fa', purple: '#8c81d8', gold: '#ffd43b' }
 
   const fontSize = '20px'
@@ -47,31 +50,35 @@ test('themes', () => {
     font-size: 32px;
   `
 
-  const tree = renderer
-    .create(
-      <ThemeProvider theme={theme}>
-        <H2>hello world</H2>
-      </ThemeProvider>
+  const tree = (
+    await act(() =>
+      renderer.create(
+        <ThemeProvider theme={theme}>
+          <H2>hello world</H2>
+        </ThemeProvider>
+      )
     )
-    .toJSON()
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
-test('theme prop exists without ThemeProvider', () => {
+test('theme prop exists without ThemeProvider', async () => {
   const SomeComponent = styled.div`
     color: ${props => props.theme.color || 'green'};
     background-color: yellow;
   `
-  const tree = renderer.create(<SomeComponent />).toJSON()
+  const tree = (await act(() => renderer.create(<SomeComponent />))).toJSON()
   expect(tree).toMatchSnapshot()
 })
-test('theme prop exists without ThemeProvider with a theme prop on the component', () => {
+test('theme prop exists without ThemeProvider with a theme prop on the component', async () => {
   const SomeComponent = styled.div`
     color: ${props => props.theme.color || 'green'};
     background-color: yellow;
   `
-  const tree = renderer
-    .create(<SomeComponent theme={{ color: 'hotpink' }} />)
-    .toJSON()
+  const tree = (
+    await act(() =>
+      renderer.create(<SomeComponent theme={{ color: 'hotpink' }} />)
+    )
+  ).toJSON()
   expect(tree).toMatchSnapshot()
 })
diff --git a/scripts/test-utils/src/index.js b/scripts/test-utils/src/index.js
index 0321886503..41ba5d70a8 100644
--- a/scripts/test-utils/src/index.js
+++ b/scripts/test-utils/src/index.js
@@ -12,7 +12,7 @@ export function ignoreConsoleErrors(cb /*: () => mixed */) {
   console.error = jest.fn()
 
   try {
-    cb()
+    return cb()
   } finally {
     console.error = oldConsoleError
   }

From ed9538eb97a8802c0fa66c68b1328fb90a57c1cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:04:41 +0100
Subject: [PATCH 10/54] migrate more

---
 .../no-babel/__snapshots__/index.test.js.snap |  36 ++--
 packages/css/test/no-babel/index.test.js      | 176 +++++++-----------
 2 files changed, 84 insertions(+), 128 deletions(-)

diff --git a/packages/css/test/no-babel/__snapshots__/index.test.js.snap b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
index 46b809fff8..ab9d62bb38 100644
--- a/packages/css/test/no-babel/__snapshots__/index.test.js.snap
+++ b/packages/css/test/no-babel/__snapshots__/index.test.js.snap
@@ -8,14 +8,12 @@ exports[`css @supports 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
 exports[`css component as selectors (object syntax) 1`] = `"Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform."`;
 
-exports[`css component as selectors (object syntax) 2`] = `"The above error occurred in the <Styled(div)> component:"`;
-
 exports[`css component selectors without target 1`] = `"Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform."`;
 
 exports[`css composition 1`] = `
@@ -35,7 +33,7 @@ exports[`css composition 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -48,7 +46,7 @@ exports[`css composition stuff 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -61,7 +59,7 @@ exports[`css composition stuff 2`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -95,7 +93,7 @@ exports[`css composition with objects 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -106,8 +104,8 @@ exports[`css function in expression 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0"
-  scale={2}
+  class="legacy__class emotion-0"
+  scale="2"
 >
   hello world
 </h1>
@@ -126,8 +124,8 @@ exports[`css glamorous style api & composition 1`] = `
 }
 
 <h1
-  className="emotion-0"
-  fontSize={20}
+  class="emotion-0"
+  font-size="20"
 >
   hello world
 </h1>
@@ -147,7 +145,7 @@ exports[`css handles objects 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -160,7 +158,7 @@ exports[`css nested array 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -170,7 +168,7 @@ exports[`css no dynamic 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </h1>
@@ -178,7 +176,7 @@ exports[`css no dynamic 1`] = `
 
 exports[`css null rule 1`] = `
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -195,8 +193,8 @@ exports[`css object as style 1`] = `
 }
 
 <h1
-  className="emotion-0"
-  fontSize={20}
+  class="emotion-0"
+  font-size="20"
 >
   hello world
 </h1>
@@ -218,7 +216,7 @@ exports[`css random expression 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -228,7 +226,7 @@ exports[`css random expressions undefined return 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0"
+  class="legacy__class emotion-0"
 >
   hello world
 </h1>
diff --git a/packages/css/test/no-babel/index.test.js b/packages/css/test/no-babel/index.test.js
index 88825e4aa8..b5b658fd3a 100644
--- a/packages/css/test/no-babel/index.test.js
+++ b/packages/css/test/no-babel/index.test.js
@@ -1,7 +1,7 @@
 import 'test-utils/setup-env'
 import React from 'react'
 import { act } from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { css } from '@emotion/css'
 import styled from '@emotion/styled'
 
@@ -12,7 +12,7 @@ afterEach(() => {
 })
 
 describe('css', () => {
-  test('random expression', async () => {
+  test('random expression', () => {
     const cls2 = css`
       font-size: 20px;
       @media (min-width: 420px) {
@@ -25,13 +25,11 @@ describe('css', () => {
       }
       background: green;
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls2} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('composition', async () => {
+  test('composition', () => {
     const cls1 = css`
       display: flex;
       &:hover {
@@ -42,13 +40,11 @@ describe('css', () => {
       ${cls1};
       justify-content: center;
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls2} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles objects', async () => {
+  test('handles objects', () => {
     const cls1 = css({
       float: 'left',
       display: 'flex',
@@ -57,13 +53,11 @@ describe('css', () => {
       height: 50,
       width: 20
     })
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('composition with objects', async () => {
+  test('composition with objects', () => {
     const cls1 = css({
       display: 'flex',
       width: 30,
@@ -82,61 +76,47 @@ describe('css', () => {
       justify-content: center;
     `
 
-    const tree = (
-      await act(() => renderer.create(<div className={cls2} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('@supports', async () => {
+  test('@supports', () => {
     const cls1 = css`
       @supports (display: grid) {
         display: grid;
       }
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('nested array', async () => {
+  test('nested array', () => {
     const cls1 = css([[{ display: 'flex' }]])
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('composition stuff', async () => {
+  test('composition stuff', () => {
     const cls1 = css({ justifyContent: 'center' })
     const cls2 = css([cls1])
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
-    const tree2 = (
-      await act(() => renderer.create(<div className={cls2} />))
-    ).toJSON()
-    expect(tree2).toMatchSnapshot()
+    const { container: container1 } = render(<div className={cls1} />)
+    expect(container1.firstChild).toMatchSnapshot()
+    const { container: container2 } = render(<div className={cls2} />)
+    expect(container2.firstChild).toMatchSnapshot()
   })
-  test('null rule', async () => {
+  test('null rule', () => {
     const cls1 = css()
 
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('no dynamic', async () => {
+  test('no dynamic', () => {
     const H1 = styled('h1')`
       float: left;
     `
 
-    const tree = (
-      await act(() => renderer.create(<H1>hello world</H1>))
-    ).toJSON()
+    const { container } = render(<H1>hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('object as style', async () => {
+  test('object as style', () => {
     const H1 = styled('h1')(
       props => ({
         fontSize: props.fontSize
@@ -145,19 +125,15 @@ describe('css', () => {
       { display: 'flex' }
     )
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <H1 fontSize={20} flex={1}>
-            hello world
-          </H1>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <H1 fontSize={20} flex={1}>
+        hello world
+      </H1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('component as selectors (object syntax)', async () => {
+  test('component as selectors (object syntax)', () => {
     const fontSize = '20px'
     const H1 = styled('h1')({ fontSize })
     const Thing = styled('div')({
@@ -167,23 +143,15 @@ describe('css', () => {
       }
     })
 
-    const spy = jest.fn()
-    console.error = spy
-
-    expect(
-      act(() =>
-        renderer.create(
-          <Thing>
-            hello <H1>This will be green</H1> world
-          </Thing>
-        )
+    expect(() =>
+      render(
+        <Thing>
+          hello <H1>This will be green</H1> world
+        </Thing>
       )
-    ).rejects.toThrowErrorMatchingSnapshot()
-
-    expect(spy.mock.calls.length).toBe(1)
-    expect(spy.mock.calls[0][0].split('\n')[0]).toMatchSnapshot()
+    ).toThrowErrorMatchingSnapshot()
   })
-  test('component selectors without target', async () => {
+  test('component selectors without target', () => {
     const SomeComponent = styled('div')`
       color: blue;
     `
@@ -196,25 +164,21 @@ describe('css', () => {
       `
     }).toThrowErrorMatchingSnapshot()
   })
-  test('glamorous style api & composition', async () => {
+  test('glamorous style api & composition', () => {
     const H1 = styled('h1')(props => ({ fontSize: props.fontSize }))
     const H2 = styled(H1)(props => ({ flex: props.flex }), {
       display: 'flex'
     })
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <H2 fontSize={20} flex={1}>
-            hello world
-          </H2>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <H2 fontSize={20} flex={1}>
+        hello world
+      </H2>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('random expressions undefined return', async () => {
+  test('random expressions undefined return', () => {
     const H1 = styled('h1')`
       ${props =>
         props.prop &&
@@ -224,16 +188,14 @@ describe('css', () => {
       color: green;
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(<H1 className={'legacy__class'}>hello world</H1>)
-      )
-    ).toJSON()
+    const { container } = render(
+      <H1 className={'legacy__class'}>hello world</H1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('function in expression', async () => {
+  test('function in expression', () => {
     const fontSize = 20
     const H1 = styled('h1')`
       font-size: ${fontSize + 'px'};
@@ -243,19 +205,15 @@ describe('css', () => {
       font-size: ${({ scale }) => fontSize * scale + 'px'};
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <H2 scale={2} className={'legacy__class'}>
-            hello world
-          </H2>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <H2 scale={2} className={'legacy__class'}>
+        hello world
+      </H2>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('name with class component', async () => {
+  test('name with class component', () => {
     class SomeComponent extends React.Component /* <{ className: string }> */ {
       render() {
         return <div className={this.props.className} />
@@ -266,12 +224,12 @@ describe('css', () => {
     `
     expect(StyledComponent.displayName).toBe(`Styled(SomeComponent)`)
   })
-  test('styled does not throw on toString without target', async () => {
+  test('styled does not throw on toString without target', () => {
     expect(() => {
       styled('div')().toString()
     }).not.toThrow()
   })
-  test('styled does not throw an error when certain properties are accessed', async () => {
+  test('styled does not throw an error when certain properties are accessed', () => {
     expect(() => {
       /* eslint-disable no-unused-expressions */
       // eslint-disable-next-line no-proto

From ea9a22886bbce1e072221c640f5c579349af580a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:14:34 +0100
Subject: [PATCH 11/54] moar

---
 packages/css/test/instance/css.test.js     |  22 ++--
 packages/native/test/native-styled.test.js | 117 ++++++++++++---------
 packages/react/__tests__/theme-provider.js | 113 +++++++++-----------
 3 files changed, 132 insertions(+), 120 deletions(-)

diff --git a/packages/css/test/instance/css.test.js b/packages/css/test/instance/css.test.js
index 87a2a4ffa2..ed1110a201 100644
--- a/packages/css/test/instance/css.test.js
+++ b/packages/css/test/instance/css.test.js
@@ -261,10 +261,10 @@ describe('css', () => {
   test('composition stuff', async () => {
     const cls1 = differentCss({ justifyContent: 'center' })
     const cls2 = differentCss([cls1])
-    const { container } = render(<div className={cls1} />)
+    const { container: container1 } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
-    const tree2 = renderer.create(<div className={cls2} />)
-    expect(tree2).toMatchSnapshot()
+    const { container: container2 } = render(<div className={cls2} />)
+    expect(container2.firstChild).toMatchSnapshot()
   })
   test('null rule', async () => {
     const cls1 = differentCss()
@@ -286,19 +286,23 @@ describe('css', () => {
     const cls2 = differentCss`
       ${null};
     `
-    expect(renderer.create(<div className={cls1} />)).toMatchSnapshot()
-    expect(renderer.create(<div className={cls2} />)).toMatchSnapshot()
+    expect(
+      render(<div className={cls1} />).container.firstChild
+    ).toMatchSnapshot()
+    expect(
+      render(<div className={cls2} />).container.firstChild
+    ).toMatchSnapshot()
   })
 
   test('flushes correctly', async () => {
     const cls1 = differentCss`
       display: flex;
     `
-    const { container } = render(<div className={cls1} />)
-    expect(container.firstChild).toMatchSnapshot()
+    const { container: container1 } = render(<div className={cls1} />)
+    expect(container1.firstChild).toMatchSnapshot()
     flush()
-    const tree2 = renderer.create(<div className={cls1} />)
-    expect(tree2).toMatchSnapshot()
+    const { container: container2 } = render(<div className={cls1} />)
+    expect(container2.firstChild).toMatchSnapshot()
   })
   test('media query specificity', async () => {
     flush()
diff --git a/packages/native/test/native-styled.test.js b/packages/native/test/native-styled.test.js
index b5538963dd..95a6ddad62 100644
--- a/packages/native/test/native-styled.test.js
+++ b/packages/native/test/native-styled.test.js
@@ -1,4 +1,5 @@
-import * as React from 'react'
+import React from 'react'
+import { act } from 'react'
 import renderer from 'react-test-renderer'
 import { ThemeProvider } from '@emotion/react'
 import styled, { css } from '@emotion/native'
@@ -21,79 +22,91 @@ describe('Emotion native styled', () => {
     expect(() => styled.TEXT({})).toThrow()
   })
 
-  test('should render the primitive when styles applied using object style notation', () => {
+  test('should render the primitive when styles applied using object style notation', async () => {
     const Text = styled.Text`
       color: red;
       font-size: 20px;
       background-color: ${props => props.back};
     `
-    const tree = renderer
-      .create(
+    const tree = await act(() =>
+      renderer.create(
         <Text style={{ fontSize: 40 }} back="red">
           Emotion Primitives
         </Text>
       )
-      .toJSON()
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('should work with theming from @emotion/react', () => {
+  test('should work with theming from @emotion/react', async () => {
     const Text = styled.Text`
       color: ${props => props.theme.backgroundColor};
     `
 
-    const tree = renderer
-      .create(
-        <ThemeProvider theme={theme}>
-          <Text>Hello World</Text>
-        </ThemeProvider>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <ThemeProvider theme={theme}>
+            <Text>Hello World</Text>
+          </ThemeProvider>
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('should render the primitive on changing the props', () => {
+  test('should render the primitive on changing the props', async () => {
     const Text = styled.Text({ padding: '20px' }, props => ({
       color: props.decor
     }))
-    const tree = renderer
-      .create(<Text decor="hotpink">Emotion Primitives</Text>)
-      .toJSON()
+    const tree = (
+      await act(() =>
+        renderer.create(<Text decor="hotpink">Emotion Primitives</Text>)
+      )
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('should render primitive with style prop', () => {
+  test('should render primitive with style prop', async () => {
     const Title = styled.Text`
       color: hotpink;
     `
-    const tree = renderer
-      .create(<Title style={{ padding: 10 }}>Emotion primitives</Title>)
-      .toJSON()
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <Title style={{ padding: 10 }}>Emotion primitives</Title>
+        )
+      )
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('should work with StyleSheet.create API', () => {
+  test('should work with StyleSheet.create API', async () => {
     const styles = StyleSheet.create({ foo: { color: 'red' } })
     const Text = styled.Text`
       font-size: 10px;
     `
-    const tree = renderer
-      .create(<Text style={styles.foo}>Emotion primitives</Text>)
-      .toJSON()
+    const tree = (
+      await act(() =>
+        renderer.create(<Text style={styles.foo}>Emotion primitives</Text>)
+      )
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('primitive should work with `withComponent`', () => {
+  test('primitive should work with `withComponent`', async () => {
     const Text = styled.Text`
       color: ${props => props.decor};
     `
     const Name = Text.withComponent(reactNative.Text)
-    const tree = renderer.create(<Name decor="hotpink">Mike</Name>).toJSON()
+    const tree = (
+      await act(() => renderer.create(<Name decor="hotpink">Mike</Name>))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('should style any other component', () => {
+  test('should style any other component', async () => {
     const Text = styled.Text`
       color: hotpink;
     `
@@ -102,55 +115,61 @@ describe('Emotion native styled', () => {
       font-size: 20px;
       font-style: ${props => props.sty};
     `
-    const tree = renderer.create(<StyledTitle sty="italic" />).toJSON()
+    const tree = (
+      await act(() => renderer.create(<StyledTitle sty="italic" />))
+    ).toJSON()
     expect(tree).toMatchSnapshot()
   })
 
-  test('should pass props in withComponent', () => {
+  test('should pass props in withComponent', async () => {
     const ViewOne = styled.View`
       background-color: ${props => props.color};
     `
-    const treeOne = renderer.create(<ViewOne color="green" />)
+    const treeOne = await act(() => renderer.create(<ViewOne color="green" />))
     const ViewTwo = ViewOne.withComponent(reactNative.Text)
-    const treeTwo = renderer.create(<ViewTwo color="hotpink" />)
+    const treeTwo = await act(() =>
+      renderer.create(<ViewTwo color="hotpink" />)
+    )
 
     expect(treeOne).toMatchSnapshot()
     expect(treeTwo).toMatchSnapshot()
   })
 
-  test('should render <Image />', () => {
+  test('should render <Image />', async () => {
     const Image = styled.Image`
       border-radius: 2px;
     `
-    const tree = renderer
-      .create(
-        <Image
-          source={{
-            uri: 'https://camo.githubusercontent.com/209bdea972b9b6ef90220c59ecbe66d35ffefa8a/68747470733a2f2f63646e2e7261776769742e636f6d2f746b6834342f656d6f74696f6e2f6d61737465722f656d6f74696f6e2e706e67',
-            height: 150,
-            width: 150
-          }}
-        />
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <Image
+            source={{
+              uri: 'https://camo.githubusercontent.com/209bdea972b9b6ef90220c59ecbe66d35ffefa8a/68747470733a2f2f63646e2e7261776769742e636f6d2f746b6834342f656d6f74696f6e2f6d61737465722f656d6f74696f6e2e706e67',
+              height: 150,
+              width: 150
+            }}
+          />
+        )
       )
-      .toJSON()
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
 
-  test('Log error message if units are not specified when using shorthand properties', () => {
+  test('Log error message if units are not specified when using shorthand properties', async () => {
     const Text = styled.Text`
       margin: 20px;
       padding: 20;
     `
 
-    renderer.create(<Text>Hello World</Text>)
+    await act(() => renderer.create(<Text>Hello World</Text>))
 
     expect(console.error).toBeCalledWith(
       "'padding' shorthand property requires units for example - padding: 20px or padding: 10px 20px 40px 50px"
     )
   })
 
-  test('should render styles correctly from all nested style factories', () => {
+  test('should render styles correctly from all nested style factories', async () => {
     const bgColor = color => css`
       background-color: ${color};
     `
@@ -160,9 +179,11 @@ describe('Emotion native styled', () => {
       ${({ backgroundColor }) => bgColor(backgroundColor)};
     `
 
-    const tree = renderer
-      .create(<Text backgroundColor="blue">Hello World</Text>)
-      .toJSON()
+    const tree = (
+      await act(() =>
+        renderer.create(<Text backgroundColor="blue">Hello World</Text>)
+      )
+    ).toJSON()
 
     expect(tree).toMatchSnapshot()
   })
diff --git a/packages/react/__tests__/theme-provider.js b/packages/react/__tests__/theme-provider.js
index 630b902925..e3e06f5361 100644
--- a/packages/react/__tests__/theme-provider.js
+++ b/packages/react/__tests__/theme-provider.js
@@ -2,81 +2,68 @@
 import 'test-utils/setup-env'
 import { ignoreConsoleErrors } from 'test-utils'
 import { jsx, ThemeProvider } from '@emotion/react'
-import renderer from 'react-test-renderer'
-import { act } from 'react'
+import { render } from '@testing-library/react'
 import cases from 'jest-in-case'
 
-test('nested provider', async () => {
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
-          <ThemeProvider
-            theme={{ backgroundColor: 'darkgreen', color: 'white' }}
-          >
-            <div
-              css={({ color, padding, backgroundColor }) => ({
-                color,
-                padding,
-                backgroundColor
-              })}
-            />
-          </ThemeProvider>
-        </ThemeProvider>
-      )
-    )
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+test('nested provider', () => {
+  const { container } = render(
+    <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
+      <ThemeProvider theme={{ backgroundColor: 'darkgreen', color: 'white' }}>
+        <div
+          css={({ color, padding, backgroundColor }) => ({
+            color,
+            padding,
+            backgroundColor
+          })}
+        />
+      </ThemeProvider>
+    </ThemeProvider>
+  )
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('nested provider with function', async () => {
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
-          <ThemeProvider
-            theme={theme => ({
-              backgroundColor: 'darkgreen',
-              ...theme,
-              padding: 8
-            })}
-          >
-            <div
-              css={({ color, padding, backgroundColor }) => ({
-                color,
-                padding,
-                backgroundColor
-              })}
-            />
-          </ThemeProvider>
-        </ThemeProvider>
-      )
-    )
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+test('nested provider with function', () => {
+  const { container } = render(
+    <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
+      <ThemeProvider
+        theme={theme => ({
+          backgroundColor: 'darkgreen',
+          ...theme,
+          padding: 8
+        })}
+      >
+        <div
+          css={({ color, padding, backgroundColor }) => ({
+            color,
+            padding,
+            backgroundColor
+          })}
+        />
+      </ThemeProvider>
+    </ThemeProvider>
+  )
+  expect(container.firstChild).toMatchSnapshot()
 })
 
 cases(
   'ThemeProvider throws the correct errors',
   ({ value }) => {
     ignoreConsoleErrors(() => {
-      return expect(
-        act(() =>
-          renderer.create(
-            <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
-              <ThemeProvider theme={value}>
-                <div
-                  css={({ color, padding, backgroundColor }) => ({
-                    color,
-                    padding,
-                    backgroundColor
-                  })}
-                />
-              </ThemeProvider>
+      expect(() =>
+        render(
+          <ThemeProvider theme={{ color: 'hotpink', padding: 4 }}>
+            <ThemeProvider theme={value}>
+              <div
+                css={({ color, padding, backgroundColor }) => ({
+                  color,
+                  padding,
+                  backgroundColor
+                })}
+              />
             </ThemeProvider>
-          )
+          </ThemeProvider>
         )
-      ).rejects.toThrowErrorMatchingSnapshot()
+      ).toThrowErrorMatchingSnapshot()
     })
   },
   {

From d3957b653368fe584527e913c68994e7a9e2e4c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:22:22 +0100
Subject: [PATCH 12/54] moar

---
 packages/css/test/instance/css.test.js        |   2 +-
 .../emotion-primitives.test.js.snap           |  24 +-
 .../test/emotion-primitives.test.js           |  98 ++++---
 .../__snapshots__/theme-provider.js.snap      |   4 +-
 .../test/__snapshots__/index.test.js.snap     |  52 ++--
 packages/styled/test/index.test.js            | 263 +++++++-----------
 6 files changed, 191 insertions(+), 252 deletions(-)

diff --git a/packages/css/test/instance/css.test.js b/packages/css/test/instance/css.test.js
index ed1110a201..62de5cbb0b 100644
--- a/packages/css/test/instance/css.test.js
+++ b/packages/css/test/instance/css.test.js
@@ -262,7 +262,7 @@ describe('css', () => {
     const cls1 = differentCss({ justifyContent: 'center' })
     const cls2 = differentCss([cls1])
     const { container: container1 } = render(<div className={cls1} />)
-    expect(container.firstChild).toMatchSnapshot()
+    expect(container1.firstChild).toMatchSnapshot()
     const { container: container2 } = render(<div className={cls2} />)
     expect(container2.firstChild).toMatchSnapshot()
   })
diff --git a/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap b/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap
index 6cf28bd136..4abb0855d4 100644
--- a/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap
+++ b/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Emotion primitives custom shouldForwardProp works 1`] = `
 <div
-  className="css-text-901oao r-color-185hjl9"
+  class="css-text-901oao r-color-185hjl9"
   dir="auto"
 >
   Emotion
@@ -11,7 +11,7 @@ exports[`Emotion primitives custom shouldForwardProp works 1`] = `
 
 exports[`Emotion primitives primitive should work with \`withComponent\` 1`] = `
 <div
-  className="css-text-901oao r-color-185hjl9"
+  class="css-text-901oao r-color-185hjl9"
   dir="auto"
 >
   Mike
@@ -20,20 +20,20 @@ exports[`Emotion primitives primitive should work with \`withComponent\` 1`] = `
 
 exports[`Emotion primitives should pass props in withComponent 1`] = `
 <div
-  className="css-view-1dbjc4n r-backgroundColor-1542mo4"
+  class="css-view-1dbjc4n r-backgroundColor-1542mo4"
 />
 `;
 
 exports[`Emotion primitives should pass props in withComponent 2`] = `
 <div
-  className="css-text-901oao r-backgroundColor-173gl9r"
+  class="css-text-901oao r-backgroundColor-173gl9r"
   dir="auto"
 />
 `;
 
 exports[`Emotion primitives should render <Image /> 1`] = `
 <div
-  className="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+  class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
   style={
     {
       "borderBottomColor": "rgba(255,105,180,1.00)",
@@ -52,7 +52,7 @@ exports[`Emotion primitives should render <Image /> 1`] = `
   }
 >
   <div
-    className="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
+    class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
     suppressHydrationWarning={true}
   />
 </div>
@@ -60,7 +60,7 @@ exports[`Emotion primitives should render <Image /> 1`] = `
 
 exports[`Emotion primitives should render primitive with style prop 1`] = `
 <div
-  className="css-text-901oao r-color-185hjl9"
+  class="css-text-901oao r-color-185hjl9"
   dir="auto"
   style={
     {
@@ -77,7 +77,7 @@ exports[`Emotion primitives should render primitive with style prop 1`] = `
 
 exports[`Emotion primitives should render the primitive on changing the props 1`] = `
 <div
-  className="css-text-901oao r-color-185hjl9 r-paddingBottom-k8qxaj r-paddingLeft-b5h31w r-paddingRight-1ah4tor r-paddingTop-1knelpx"
+  class="css-text-901oao r-color-185hjl9 r-paddingBottom-k8qxaj r-paddingLeft-b5h31w r-paddingRight-1ah4tor r-paddingTop-1knelpx"
   dir="auto"
 >
   Emotion Primitives
@@ -86,7 +86,7 @@ exports[`Emotion primitives should render the primitive on changing the props 1`
 
 exports[`Emotion primitives should render the primitive when styles applied using object style notation 1`] = `
 <div
-  className="css-text-901oao r-backgroundColor-1g6456j r-color-howw7u"
+  class="css-text-901oao r-backgroundColor-1g6456j r-color-howw7u"
   dir="auto"
   style={
     {
@@ -100,7 +100,7 @@ exports[`Emotion primitives should render the primitive when styles applied usin
 
 exports[`Emotion primitives should style any other component 1`] = `
 <div
-  className="css-text-901oao r-color-185hjl9"
+  class="css-text-901oao r-color-185hjl9"
   dir="auto"
 >
   Hello World
@@ -121,7 +121,7 @@ exports[`Emotion primitives should unmount with theming 1`] = `
 
 exports[`Emotion primitives should work with StyleSheet.create API 1`] = `
 <div
-  className="css-text-901oao r-color-howw7u r-fontSize-10x49cs"
+  class="css-text-901oao r-color-howw7u r-fontSize-10x49cs"
   dir="auto"
 >
   Emotion Primitives
@@ -130,7 +130,7 @@ exports[`Emotion primitives should work with StyleSheet.create API 1`] = `
 
 exports[`Emotion primitives should work with theming from @emotion/react 1`] = `
 <div
-  className="css-text-901oao r-color-1hxtt4r"
+  class="css-text-901oao r-color-1hxtt4r"
   dir="auto"
 >
   Hello World
diff --git a/packages/primitives/test/emotion-primitives.test.js b/packages/primitives/test/emotion-primitives.test.js
index 547e822ecb..1610ea95de 100644
--- a/packages/primitives/test/emotion-primitives.test.js
+++ b/packages/primitives/test/emotion-primitives.test.js
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import renderer from 'react-test-renderer'
 import { Text, StyleSheet } from 'react-primitives'
 import { ThemeProvider } from '@emotion/react'
 import { render } from '@testing-library/react'
@@ -25,14 +24,13 @@ describe('Emotion primitives', () => {
       font-size: 20px;
       background-color: ${props => props.back};
     `
-    const tree = renderer
-      .create(
-        <Text style={{ fontSize: 40 }} back="red">
-          Emotion Primitives
-        </Text>
-      )
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <Text style={{ fontSize: 40 }} back="red">
+        Emotion Primitives
+      </Text>
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   test('should work with theming from @emotion/react', () => {
@@ -40,15 +38,13 @@ describe('Emotion primitives', () => {
       color: ${props => props.theme.backgroundColor};
     `
 
-    const tree = renderer
-      .create(
-        <ThemeProvider theme={theme}>
-          <Text>Hello World</Text>
-        </ThemeProvider>
-      )
-      .toJSON()
+    const { container } = render(
+      <ThemeProvider theme={theme}>
+        <Text>Hello World</Text>
+      </ThemeProvider>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   test('should unmount with theming', () => {
@@ -72,20 +68,22 @@ describe('Emotion primitives', () => {
     const Text = styled.Text({ padding: '20px' }, props => ({
       color: props.decor
     }))
-    const tree = renderer
-      .create(<Text decor="hotpink">Emotion Primitives</Text>)
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <Text decor="hotpink">Emotion Primitives</Text>
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   test('should render primitive with style prop', () => {
     const Title = styled.Text`
       color: hotpink;
     `
-    const tree = renderer
-      .create(<Title style={{ padding: 10 }}>Emotion primitives</Title>)
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <Title style={{ padding: 10 }}>Emotion primitives</Title>
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   test('should work with StyleSheet.create API', () => {
@@ -94,10 +92,11 @@ describe('Emotion primitives', () => {
       font-size: 10px;
     `
 
-    const tree = renderer
-      .create(<Text style={styles.foo}>Emotion Primitives</Text>)
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <Text style={styles.foo}>Emotion Primitives</Text>
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   test('primitive should work with `withComponent`', () => {
@@ -105,8 +104,8 @@ describe('Emotion primitives', () => {
       color: ${props => props.decor};
     `
     const Name = StyledText.withComponent(Text)
-    const tree = renderer.create(<Name decor="hotpink">Mike</Name>).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<Name decor="hotpink">Mike</Name>)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   test('should style any other component', () => {
@@ -118,8 +117,8 @@ describe('Emotion primitives', () => {
       font-size: 20px;
       font-style: ${props => props.sty};
     `
-    const tree = renderer.create(<StyledTitle sty="italic" />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<StyledTitle sty="italic" />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   test('ref', () => {
@@ -150,19 +149,17 @@ describe('Emotion primitives', () => {
     const Image = styled.Image`
       border: 2px solid hotpink;
     `
-    const tree = renderer
-      .create(
-        <Image
-          source={{
-            uri: 'https://camo.githubusercontent.com/209bdea972b9b6ef90220c59ecbe66d35ffefa8a/68747470733a2f2f63646e2e7261776769742e636f6d2f746b6834342f656d6f74696f6e2f6d61737465722f656d6f74696f6e2e706e67',
-            height: 150,
-            width: 150
-          }}
-        />
-      )
-      .toJSON()
-
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <Image
+        source={{
+          uri: 'https://camo.githubusercontent.com/209bdea972b9b6ef90220c59ecbe66d35ffefa8a/68747470733a2f2f63646e2e7261776769742e636f6d2f746b6834342f656d6f74696f6e2f6d61737465722f656d6f74696f6e2e706e67',
+          height: 150,
+          width: 150
+        }}
+      />
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
   })
 
   test('custom shouldForwardProp works', () => {
@@ -174,9 +171,10 @@ describe('Emotion primitives', () => {
       color: ${props => props.color};
     `
 
-    const tree = renderer
-      .create(<StyledTitle color="hotpink">{'Emotion'}</StyledTitle>)
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <StyledTitle color="hotpink">{'Emotion'}</StyledTitle>
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
   })
 })
diff --git a/packages/react/__tests__/__snapshots__/theme-provider.js.snap b/packages/react/__tests__/__snapshots__/theme-provider.js.snap
index e5790bc1cc..ab96d93c83 100644
--- a/packages/react/__tests__/__snapshots__/theme-provider.js.snap
+++ b/packages/react/__tests__/__snapshots__/theme-provider.js.snap
@@ -18,7 +18,7 @@ exports[`nested provider 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -30,6 +30,6 @@ exports[`nested provider with function 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
diff --git a/packages/styled/test/__snapshots__/index.test.js.snap b/packages/styled/test/__snapshots__/index.test.js.snap
index dcbfb7b1d5..73b3be6a02 100644
--- a/packages/styled/test/__snapshots__/index.test.js.snap
+++ b/packages/styled/test/__snapshots__/index.test.js.snap
@@ -13,7 +13,7 @@ exports[`styled basic render 1`] = `
 }
 
 <h1
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -25,7 +25,7 @@ exports[`styled basic render with object as style 1`] = `
 }
 
 <h1
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -37,7 +37,7 @@ exports[`styled call expression 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </div>
@@ -49,7 +49,7 @@ exports[`styled composition based on props 1`] = `
 }
 
 <h1
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -61,7 +61,7 @@ exports[`styled composition based on props 2`] = `
 }
 
 <h1
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -74,7 +74,7 @@ exports[`styled function in expression 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0 emotion-1"
+  class="legacy__class emotion-0 emotion-1"
   scale={2}
 >
   hello world
@@ -88,7 +88,7 @@ exports[`styled function that function returns gets called with props 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
   color="hotpink"
 />
 `;
@@ -111,7 +111,7 @@ exports[`styled handles more than 10 dynamic properties 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0 emotion-1"
+  class="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -123,7 +123,7 @@ exports[`styled inline function return value is a function 1`] = `
 }
 
 <h1
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -147,7 +147,7 @@ exports[`styled input placeholder 1`] = `
 }
 
 <input
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </input>
@@ -171,7 +171,7 @@ exports[`styled input placeholder object 1`] = `
 }
 
 <input
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </input>
@@ -198,11 +198,11 @@ exports[`styled nested 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello 
   <h1
-    className="emotion-2 emotion-3"
+    class="emotion-2 emotion-3"
   >
     This will be green
   </h1>
@@ -216,7 +216,7 @@ exports[`styled no dynamic 1`] = `
 }
 
 <h1
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -235,7 +235,7 @@ exports[`styled object as style 1`] = `
 }
 
 <h1
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
   fontSize={20}
 >
   hello world
@@ -252,7 +252,7 @@ exports[`styled objects 1`] = `
 }
 
 <h1
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
   display="flex"
 >
   hello world
@@ -265,7 +265,7 @@ exports[`styled objects with spread properties 1`] = `
 }
 
 <figure
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </figure>
@@ -277,7 +277,7 @@ exports[`styled random expressions undefined return 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0 emotion-1"
+  class="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -295,7 +295,7 @@ exports[`styled random object expression 1`] = `
 }
 
 <h1
-  className="legacy__class emotion-0 emotion-1"
+  class="legacy__class emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -307,7 +307,7 @@ exports[`styled ref 1`] = `
 }
 
 <h1
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </h1>
@@ -329,7 +329,7 @@ exports[`styled with higher order component that hoists statics 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1 emotion-2"
+  class="emotion-0 emotion-1 emotion-2"
 />
 `;
 
@@ -340,7 +340,7 @@ exports[`styled withComponent carries styles from flattened components 1`] = `
 }
 
 <p
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 />
 `;
 
@@ -355,12 +355,12 @@ exports[`styled withComponent will replace tags but keep styling classes 1`] = `
 
 <article>
   <h1
-    className="emotion-0 emotion-1"
+    class="emotion-0 emotion-1"
   >
     My Title
   </h1>
   <h2
-    className="emotion-2 emotion-3"
+    class="emotion-2 emotion-3"
   >
     My Subtitle
   </h2>
@@ -378,12 +378,12 @@ exports[`styled withComponent with function interpolation 1`] = `
 
 <article>
   <h1
-    className="emotion-0 emotion-1"
+    class="emotion-0 emotion-1"
   >
     My Title
   </h1>
   <h2
-    className="emotion-2 emotion-3"
+    class="emotion-2 emotion-3"
     color="hotpink"
   >
     My Subtitle
diff --git a/packages/styled/test/index.test.js b/packages/styled/test/index.test.js
index a9a00113a6..0f6e2392ca 100644
--- a/packages/styled/test/index.test.js
+++ b/packages/styled/test/index.test.js
@@ -1,25 +1,22 @@
 import 'test-utils/setup-env'
 import React from 'react'
-import { act } from 'react'
-import * as renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 
 describe('styled', () => {
-  test('no dynamic', async () => {
+  test('no dynamic', () => {
     const H1 = styled.h1`
       float: left;
     `
 
-    const tree = (
-      await act(() => renderer.create(<H1>hello world</H1>))
-    ).toJSON()
+    const { container } = render(<H1>hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('basic render', async () => {
+  test('basic render', () => {
     const fontSize = 20
     const H1 = styled.h1`
       color: blue;
@@ -29,25 +26,21 @@ describe('styled', () => {
       }
     `
 
-    const tree = (
-      await act(() => renderer.create(<H1>hello world</H1>))
-    ).toJSON()
+    const { container } = render(<H1>hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('basic render with object as style', async () => {
+  test('basic render with object as style', () => {
     const fontSize = 20
     const H1 = styled.h1({ fontSize })
 
-    const tree = (
-      await act(() => renderer.create(<H1>hello world</H1>))
-    ).toJSON()
+    const { container } = render(<H1>hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('object as style', async () => {
+  test('object as style', () => {
     const H1 = styled.h1(
       props => ({
         fontSize: props.fontSize
@@ -56,46 +49,38 @@ describe('styled', () => {
       { display: 'flex' }
     )
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <H1 fontSize={20} flex={1}>
-            hello world
-          </H1>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <H1 fontSize={20} flex={1}>
+        hello world
+      </H1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('inline function return value is a function', async () => {
+  test('inline function return value is a function', () => {
     const fontSize = () => 20
     const Blue = styled('h1')`
       font-size: ${() => fontSize}px;
     `
 
-    const tree = (
-      await act(() => renderer.create(<Blue>hello world</Blue>))
-    ).toJSON()
+    const { container } = render(<Blue>hello world</Blue>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('call expression', async () => {
+  test('call expression', () => {
     const fontSize = 20
     const Div = styled('div')`
       font-size: ${fontSize}px;
     `
 
-    const tree = (
-      await act(() => renderer.create(<Div>hello world</Div>))
-    ).toJSON()
+    const { container } = render(<Div>hello world</Div>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('nested', async () => {
+  test('nested', () => {
     const fontSize = '20px'
     const H1 = styled.h1`
       font-size: ${fontSize};
@@ -112,20 +97,16 @@ describe('styled', () => {
       }
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <Thing>
-            hello <H1>This will be green</H1> world
-          </Thing>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <Thing>
+        hello <H1>This will be green</H1> world
+      </Thing>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('random expressions undefined return', async () => {
+  test('random expressions undefined return', () => {
     const H1 = styled('h1')`
       ${props =>
         props.prop &&
@@ -135,16 +116,14 @@ describe('styled', () => {
       color: green;
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(<H1 className={'legacy__class'}>hello world</H1>)
-      )
-    ).toJSON()
+    const { container } = render(
+      <H1 className={'legacy__class'}>hello world</H1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('random object expression', async () => {
+  test('random object expression', () => {
     const margin = (t, r, b, l) => {
       return props => ({
         marginTop: t,
@@ -160,47 +139,39 @@ describe('styled', () => {
       color: green;
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <H1 className={'legacy__class'} prop>
-            hello world
-          </H1>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <H1 className={'legacy__class'} prop>
+        hello world
+      </H1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('input placeholder', async () => {
+  test('input placeholder', () => {
     const Input = styled.input`
       ::placeholder {
         background-color: green;
       }
     `
-    const tree = (
-      await act(() => renderer.create(<Input>hello world</Input>))
-    ).toJSON()
+    const { container } = render(<Input>hello world</Input>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('input placeholder object', async () => {
+  test('input placeholder object', () => {
     const Input = styled('input')({
       '::placeholder': {
         backgroundColor: 'green'
       }
     })
 
-    const tree = (
-      await act(() => renderer.create(<Input>hello world</Input>))
-    ).toJSON()
+    const { container } = render(<Input>hello world</Input>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles more than 10 dynamic properties', async () => {
+  test('handles more than 10 dynamic properties', () => {
     const H1 = styled('h1')`
       text-decoration: ${'underline'};
       border-right: solid blue 54px;
@@ -216,20 +187,16 @@ describe('styled', () => {
       border-left: ${p => p.theme.blue};
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <H1 className={'legacy__class'} theme={{ blue: 'blue' }}>
-            hello world
-          </H1>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <H1 className={'legacy__class'} theme={{ blue: 'blue' }}>
+        hello world
+      </H1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('function in expression', async () => {
+  test('function in expression', () => {
     const fontSize = 20
     const H1 = styled('h1')`
       font-size: ${fontSize + 'px'};
@@ -239,35 +206,29 @@ describe('styled', () => {
       font-size: ${({ scale }) => fontSize * scale + 'px'};
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <H2 scale={2} className={'legacy__class'}>
-            hello world
-          </H2>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <H2 scale={2} className={'legacy__class'}>
+        hello world
+      </H2>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('ref', async () => {
+  test('ref', () => {
     const H1 = styled.h1`
       font-size: 12px;
     `
 
     const refFunction = jest.fn()
 
-    const tree = (
-      await act(() => renderer.create(<H1 ref={refFunction}>hello world</H1>))
-    ).toJSON()
+    const { container } = render(<H1 ref={refFunction}>hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
     expect(refFunction).toBeCalled()
   })
 
-  test('composition based on props', async () => {
+  test('composition based on props', () => {
     const cssA = css`
       color: blue;
     `
@@ -280,40 +241,32 @@ describe('styled', () => {
       ${props => (props.a ? cssA : cssB)};
     `
 
-    const tree = (
-      await act(() => renderer.create(<H1 a>hello world</H1>))
-    ).toJSON()
+    const { container } = render(<H1 a>hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
-    const tree2 = (
-      await act(() => renderer.create(<H1>hello world</H1>))
-    ).toJSON()
+    expect(container.firstChild).toMatchSnapshot()
+    const tree2 = renderer.create(<H1>hello world</H1>)
 
     expect(tree2).toMatchSnapshot()
   })
 
-  test('objects', async () => {
+  test('objects', () => {
     const H1 = styled('h1')({ padding: 10 }, props => ({
       display: props.display
     }))
-    const tree = (
-      await act(() => renderer.create(<H1 display="flex">hello world</H1>))
-    ).toJSON()
+    const { container } = render(<H1 display="flex">hello world</H1>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('objects with spread properties', async () => {
+  test('objects with spread properties', () => {
     const defaultText = { fontSize: 20 }
     const Figure = styled.figure({ ...defaultText })
-    const tree = (
-      await act(() => renderer.create(<Figure>hello world</Figure>))
-    ).toJSON()
+    const { container } = render(<Figure>hello world</Figure>)
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('with higher order component that hoists statics', async () => {
+  test('with higher order component that hoists statics', () => {
     const superImportantValue = 'hotpink'
     const hoc = BaseComponent => {
       const NewComponent = props => (
@@ -328,11 +281,11 @@ describe('styled', () => {
     const FinalComponent = styled(SomeComponent)`
       padding: 8px;
     `
-    const tree = (await act(() => renderer.create(<FinalComponent />))).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<FinalComponent />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('throws if undefined is passed as the component', async () => {
+  test('throws if undefined is passed as the component', () => {
     expect(
       () => styled(undefined)`
         display: flex;
@@ -340,18 +293,16 @@ describe('styled', () => {
     ).toThrowErrorMatchingSnapshot()
   })
 
-  test('function that function returns gets called with props', async () => {
+  test('function that function returns gets called with props', () => {
     const SomeComponent = styled.div`
       color: ${() => props => props.color};
       background-color: yellow;
     `
-    const tree = (
-      await act(() => renderer.create(<SomeComponent color="hotpink" />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<SomeComponent color="hotpink" />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('withComponent carries styles from flattened components', async () => {
+  test('withComponent carries styles from flattened components', () => {
     const SomeComponent = styled.div`
       color: green;
     `
@@ -359,52 +310,42 @@ describe('styled', () => {
       color: hotpink;
     `
     const OneMoreComponent = AnotherComponent.withComponent('p')
-    const tree = (
-      await act(() => renderer.create(<OneMoreComponent />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<OneMoreComponent />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('withComponent will replace tags but keep styling classes', async () => {
+  test('withComponent will replace tags but keep styling classes', () => {
     const Title = styled('h1')`
       color: green;
     `
     const Subtitle = Title.withComponent('h2')
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <article>
-            <Title>My Title</Title>
-            <Subtitle>My Subtitle</Subtitle>
-          </article>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <article>
+        <Title>My Title</Title>
+        <Subtitle>My Subtitle</Subtitle>
+      </article>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('withComponent with function interpolation', async () => {
+  test('withComponent with function interpolation', () => {
     const Title = styled('h1')`
       color: ${props => props.color || 'green'};
     `
     const Subtitle = Title.withComponent('h2')
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <article>
-            <Title>My Title</Title>
-            <Subtitle color="hotpink">My Subtitle</Subtitle>
-          </article>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <article>
+        <Title>My Title</Title>
+        <Subtitle color="hotpink">My Subtitle</Subtitle>
+      </article>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('name with class component', async () => {
+  test('name with class component', () => {
     class SomeComponent extends React.Component /* <{ className: string }> */ {
       render() {
         return <div className={this.props.className} />

From 11002c54764621869f7e13984f15128f06102224 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:23:36 +0100
Subject: [PATCH 13/54] fix

---
 .../test/no-babel/__snapshots__/basic.test.js.snap        | 8 ++------
 packages/primitives/test/no-babel/basic.test.js           | 6 +++---
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap b/packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap
index 4c13c5691f..d3a94d1e39 100644
--- a/packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap
+++ b/packages/primitives/test/no-babel/__snapshots__/basic.test.js.snap
@@ -2,13 +2,9 @@
 
 exports[`should render the primitive when styles applied using object style notation 1`] = `
 <div
-  className="css-text-901oao r-backgroundColor-1g6456j r-color-howw7u"
+  class="css-text-901oao r-backgroundColor-1g6456j r-color-howw7u"
   dir="auto"
-  style={
-    {
-      "fontSize": "40px",
-    }
-  }
+  style="font-size: 40px;"
 >
   Emotion Primitives
 </div>
diff --git a/packages/primitives/test/no-babel/basic.test.js b/packages/primitives/test/no-babel/basic.test.js
index 7703efa41e..2604d1ddaf 100644
--- a/packages/primitives/test/no-babel/basic.test.js
+++ b/packages/primitives/test/no-babel/basic.test.js
@@ -51,14 +51,14 @@ test('should render the primitive when styles applied using object style notatio
     </Text>
   )
 
-  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
 // this needs to be here since the babel plugin will remove the whitespace
 test('empty string', () => {
   // prettier-ignore
-  let style = css`    
-      
+  let style = css`
+
   `
   expect(StyleSheet.flatten(style)).toEqual({})
 })

From 2853c3acbda7dce83df367d88cd7e08e6f7b2e96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:26:52 +0100
Subject: [PATCH 14/54] more

---
 .../styled/test/__snapshots__/index.test.js.snap | 16 +++++++---------
 packages/styled/test/index.test.js               | 12 ++++++------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/styled/test/__snapshots__/index.test.js.snap b/packages/styled/test/__snapshots__/index.test.js.snap
index 73b3be6a02..f988c14394 100644
--- a/packages/styled/test/__snapshots__/index.test.js.snap
+++ b/packages/styled/test/__snapshots__/index.test.js.snap
@@ -75,7 +75,7 @@ exports[`styled function in expression 1`] = `
 
 <h1
   class="legacy__class emotion-0 emotion-1"
-  scale={2}
+  scale="2"
 >
   hello world
 </h1>
@@ -148,9 +148,8 @@ exports[`styled input placeholder 1`] = `
 
 <input
   class="emotion-0 emotion-1"
->
-  hello world
-</input>
+  value="hello world"
+/>
 `;
 
 exports[`styled input placeholder object 1`] = `
@@ -172,9 +171,8 @@ exports[`styled input placeholder object 1`] = `
 
 <input
   class="emotion-0 emotion-1"
->
-  hello world
-</input>
+  value="hello world"
+/>
 `;
 
 exports[`styled nested 1`] = `
@@ -236,7 +234,7 @@ exports[`styled object as style 1`] = `
 
 <h1
   class="emotion-0 emotion-1"
-  fontSize={20}
+  font-size="20"
 >
   hello world
 </h1>
@@ -360,7 +358,7 @@ exports[`styled withComponent will replace tags but keep styling classes 1`] = `
     My Title
   </h1>
   <h2
-    class="emotion-2 emotion-3"
+    class="emotion-2 emotion-19"
   >
     My Subtitle
   </h2>
diff --git a/packages/styled/test/index.test.js b/packages/styled/test/index.test.js
index 0f6e2392ca..03c097a224 100644
--- a/packages/styled/test/index.test.js
+++ b/packages/styled/test/index.test.js
@@ -154,7 +154,7 @@ describe('styled', () => {
         background-color: green;
       }
     `
-    const { container } = render(<Input>hello world</Input>)
+    const { container } = render(<Input value="hello world" />)
 
     expect(container.firstChild).toMatchSnapshot()
   })
@@ -166,7 +166,7 @@ describe('styled', () => {
       }
     })
 
-    const { container } = render(<Input>hello world</Input>)
+    const { container } = render(<Input value="hello world" />)
 
     expect(container.firstChild).toMatchSnapshot()
   })
@@ -241,12 +241,12 @@ describe('styled', () => {
       ${props => (props.a ? cssA : cssB)};
     `
 
-    const { container } = render(<H1 a>hello world</H1>)
+    const { container: container1 } = render(<H1 a>hello world</H1>)
 
-    expect(container.firstChild).toMatchSnapshot()
-    const tree2 = renderer.create(<H1>hello world</H1>)
+    expect(container1.firstChild).toMatchSnapshot()
+    const { container: container2 } = render(<H1>hello world</H1>)
 
-    expect(tree2).toMatchSnapshot()
+    expect(container2.firstChild).toMatchSnapshot()
   })
 
   test('objects', () => {

From a9142b3e2cf7e49df073e5a2f1b4f1eb872da20e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:35:43 +0100
Subject: [PATCH 15/54] more

---
 .../__tests__/__snapshots__/warnings.js.snap  | 72 +++++++++----------
 packages/react/__tests__/warnings.js          | 15 ++--
 packages/react/__tests__/with-theme.js        | 30 ++++----
 packages/server/test/stream.test.js           |  3 +
 packages/server/test/util.js                  |  6 +-
 packages/styled/__tests__/styled.js           |  4 +-
 6 files changed, 64 insertions(+), 66 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/warnings.js.snap b/packages/react/__tests__/__snapshots__/warnings.js.snap
index eca2e7bdca..6ca975c087 100644
--- a/packages/react/__tests__/__snapshots__/warnings.js.snap
+++ b/packages/react/__tests__/__snapshots__/warnings.js.snap
@@ -27,7 +27,7 @@ exports[`does not warn when valid values are passed for the content property 1`]
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -41,7 +41,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -55,7 +55,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -69,7 +69,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -83,7 +83,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -97,7 +97,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -109,7 +109,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -123,7 +123,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -137,7 +137,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -151,7 +151,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -165,7 +165,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -175,7 +175,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -185,7 +185,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -195,7 +195,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -206,7 +206,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -217,7 +217,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -227,7 +227,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -237,7 +237,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -247,7 +247,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -257,7 +257,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -267,7 +267,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -277,7 +277,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -287,7 +287,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -297,7 +297,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -308,7 +308,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -319,7 +319,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -329,7 +329,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -339,7 +339,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -349,7 +349,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -359,7 +359,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -369,7 +369,7 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -379,7 +379,7 @@ exports[`unsafe pseudo classes warns when using without flag: /* emotion-disable
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -389,7 +389,7 @@ exports[`unsafe pseudo classes warns when using without flag: /* emotion-disable
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -399,7 +399,7 @@ exports[`unsafe pseudo classes warns when using without flag: /* emotion-disable
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -409,7 +409,7 @@ exports[`unsafe pseudo classes warns when using without flag: /* emotion-disable
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -419,6 +419,6 @@ exports[`unsafe pseudo classes warns when using without flag: /* emotion-disable
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
index f1ef3b470e..b7a7bf1982 100644
--- a/packages/react/__tests__/warnings.js
+++ b/packages/react/__tests__/warnings.js
@@ -2,7 +2,6 @@
 import 'test-utils/setup-env'
 import { jsx, css, Global, keyframes, ClassNames } from '@emotion/react'
 import styled from '@emotion/styled'
-import renderer from 'react-test-renderer'
 import { render } from '@testing-library/react'
 
 console.error = jest.fn()
@@ -40,16 +39,14 @@ beforeEach(() => {
 test('does not warn when valid values are passed for the content property', () => {
   const style = css(validValues.map(value => ({ content: value })))
   expect(console.error).not.toBeCalled()
-  expect(renderer.create(<div css={style} />).toJSON()).toMatchSnapshot()
+  expect(render(<div css={style} />).container.firstChild).toMatchSnapshot()
 })
 
 const invalidValues = ['this is not valid', '', 'element']
 
 test('does warn when invalid values are passed for the content property', () => {
   invalidValues.forEach(value => {
-    expect(() =>
-      act(() => renderer.create(<div css={{ content: value }} />))
-    ).toThrowError(
+    expect(() => render(<div css={{ content: value }} />)).toThrowError(
       `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
     )
   })
@@ -77,7 +74,9 @@ describe('unsafe pseudo classes', () => {
         `
         const match = pseudoClass.match(/(:first|:nth|:nth-last)-child/)
         expect(match).not.toBeNull()
-        expect(renderer.create(<div css={style} />).toJSON()).toMatchSnapshot()
+        expect(
+          render(<div css={style} />).container.firstChild
+        ).toMatchSnapshot()
         expect(console.error).toBeCalledWith(
           `The pseudo class "${match[0]}" is potentially unsafe when doing server-side rendering. Try changing it to "${match[1]}-of-type".`
         )
@@ -119,7 +118,7 @@ describe('unsafe pseudo classes', () => {
         const match = pseudoClass.match(/(:first|:nth|:nth-last)-child/)
         expect(match).not.toBeNull()
         expect(
-          renderer.create(<div css={getStyle(pseudoClass)} />).toJSON()
+          render(<div css={getStyle(pseudoClass)} />).container.firstChild
         ).toMatchSnapshot()
         expect(console.error).not.toBeCalled()
       })
@@ -333,7 +332,7 @@ describe('unsafe pseudo classes', () => {
               }
             `}
           />
-        ).container
+        ).container.firstChild
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
diff --git a/packages/react/__tests__/with-theme.js b/packages/react/__tests__/with-theme.js
index c5a4cd7d53..5fc1eb3124 100644
--- a/packages/react/__tests__/with-theme.js
+++ b/packages/react/__tests__/with-theme.js
@@ -1,9 +1,8 @@
 import React from 'react'
-import { act } from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { withTheme, ThemeProvider } from '@emotion/react'
 
-test('withTheme works', async () => {
+test('withTheme works', () => {
   class SomeComponent extends React.Component /* <{ theme: Object }> */ {
     render() {
       return this.props.theme.color
@@ -11,30 +10,25 @@ test('withTheme works', async () => {
   }
   let SomeComponentWithTheme = withTheme(SomeComponent)
   expect(
-    (
-      await (() =>
-        renderer.create(
-          <ThemeProvider theme={{ color: 'green' }}>
-            <SomeComponentWithTheme />
-          </ThemeProvider>
-        ))
-    ).toJSON()
+    render(
+      <ThemeProvider theme={{ color: 'green' }}>
+        <SomeComponentWithTheme />
+      </ThemeProvider>
+    ).container.firstChild
   ).toMatchSnapshot()
 })
 
-test('should forward the ref', async () => {
+test('should forward the ref', () => {
   function SomeComponent(props) {
     return <div ref={props.ref}>{props.theme.color}</div>
   }
 
   const ComponentWithTheme = withTheme(SomeComponent)
   let ref = React.createRef()
-  await act(() =>
-    renderer.create(
-      <ThemeProvider theme={{ color: 'green' }}>
-        <ComponentWithTheme ref={ref} />
-      </ThemeProvider>
-    )
+  render(
+    <ThemeProvider theme={{ color: 'green' }}>
+      <ComponentWithTheme ref={ref} />
+    </ThemeProvider>
   )
   expect(ref.current).toBeInstanceOf(HTMLDivElement)
 })
diff --git a/packages/server/test/stream.test.js b/packages/server/test/stream.test.js
index 6c95301bb2..f8f4c158f8 100644
--- a/packages/server/test/stream.test.js
+++ b/packages/server/test/stream.test.js
@@ -1,3 +1,6 @@
+/**
+ * @jest-environment node
+ */
 import {
   stripDataReactRoot,
   disableBrowserEnvTemporarily,
diff --git a/packages/server/test/util.js b/packages/server/test/util.js
index 2a9a045a80..269f052747 100644
--- a/packages/server/test/util.js
+++ b/packages/server/test/util.js
@@ -2,7 +2,7 @@
 import * as React from 'react'
 import prettify from '@emotion/css-prettifier'
 /* import type { Emotion } from '@emotion/css/create-instance' */
-import { renderToNodeStream } from 'react-dom/server'
+import { renderToPipeableStream } from 'react-dom/server'
 import HTMLSerializer from 'jest-serializer-html'
 
 /*
@@ -220,7 +220,9 @@ export const renderToStringWithStream = (
   { renderStylesToNodeStream } /*: EmotionServer */
 ) /*: Promise<string> */ =>
   new Promise((resolve, reject) => {
-    const stream = renderToNodeStream(element).pipe(renderStylesToNodeStream())
+    const stream = renderToPipeableStream(element).pipe(
+      renderStylesToNodeStream()
+    )
     let html = ''
     stream.on('data', data => {
       html += data.toString()
diff --git a/packages/styled/__tests__/styled.js b/packages/styled/__tests__/styled.js
index 40472d9c85..ee0212967b 100644
--- a/packages/styled/__tests__/styled.js
+++ b/packages/styled/__tests__/styled.js
@@ -196,7 +196,7 @@ describe('styled', () => {
         background-color: green;
       }
     `
-    const { container } = render(<Input>hello world</Input>)
+    const { container } = render(<Input value="hello world" />)
 
     expect(container.firstChild).toMatchSnapshot()
   })
@@ -208,7 +208,7 @@ describe('styled', () => {
       }
     })
 
-    const { container } = render(<Input>hello world</Input>)
+    const { container } = render(<Input value="hello world" />)
 
     expect(container.firstChild).toMatchSnapshot()
   })

From 2fbf0e335c851a684cce4d0b27583ea1c795a454 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:37:07 +0100
Subject: [PATCH 16/54] more

---
 .../__tests__/__snapshots__/styled.js.snap    | 44 +++++--------------
 packages/styled/__tests__/styled.js           |  2 +-
 2 files changed, 11 insertions(+), 35 deletions(-)

diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap
index 71022e1ba8..467a48a418 100644
--- a/packages/styled/__tests__/__snapshots__/styled.js.snap
+++ b/packages/styled/__tests__/__snapshots__/styled.js.snap
@@ -110,7 +110,7 @@ exports[`styled composition 2`] = `
 
 <h1
   class="legacy__class emotion-0"
-  scale={2}
+  scale="2"
 >
   hello world
 </h1>
@@ -181,7 +181,7 @@ exports[`styled function in expression 1`] = `
 
 <h1
   class="legacy__class emotion-0"
-  scale={2}
+  scale="2"
 >
   hello world
 </h1>
@@ -201,7 +201,7 @@ exports[`styled glamorous style api & composition 1`] = `
 
 <h1
   class="emotion-0"
-  fontSize={20}
+  font-size="20"
 >
   hello world
 </h1>
@@ -277,9 +277,8 @@ exports[`styled input placeholder 1`] = `
 
 <input
   class="emotion-0"
->
-  hello world
-</input>
+  value="hello world"
+/>
 `;
 
 exports[`styled input placeholder object 1`] = `
@@ -301,9 +300,8 @@ exports[`styled input placeholder object 1`] = `
 
 <input
   class="emotion-0"
->
-  hello world
-</input>
+  value="hello world"
+/>
 `;
 
 exports[`styled keyframes with css call 1`] = `
@@ -378,17 +376,10 @@ exports[`styled no prop filtering on non string tags 1`] = `
 }
 
 <a
-  a={true}
   aria-label="some label"
-  b={true}
   class="emotion-0"
-  cool={true}
   data-wow="value"
-  filtering={true}
   href="link"
-  is={true}
-  prop={true}
-  wow={true}
 >
   hello world
 </a>
@@ -399,27 +390,14 @@ exports[`styled no prop filtering on string tags started with upper case 1`] = `
   color: green;
 }
 
-<SomeCustomLink
-  a={true}
+<somecustomlink
   aria-label="some label"
-  b={true}
   class="emotion-0"
-  cool={true}
   data-wow="value"
-  filtering={true}
   href="link"
-  is={true}
-  prop={true}
-  wow={true}
 >
   hello world
-</SomeCustomLink>
-`;
-
-exports[`styled object as class 1`] = `
-<div
-  class="myclass emotion-0"
-/>
+</somecustomlink>
 `;
 
 exports[`styled object as className 1`] = `
@@ -442,7 +420,7 @@ exports[`styled object as style 1`] = `
 
 <h1
   class="emotion-0"
-  fontSize={20}
+  font-size="20"
 >
   hello world
 </h1>
@@ -511,7 +489,6 @@ exports[`styled prop filtering 1`] = `
   class="emotion-0"
   data-wow="value"
   href="link"
-  is={true}
 >
   hello world
 </a>
@@ -528,7 +505,6 @@ exports[`styled prop filtering on composed styled components that are string tag
   class="emotion-0"
   data-wow="value"
   href="link"
-  is={true}
 >
   hello world
 </a>
diff --git a/packages/styled/__tests__/styled.js b/packages/styled/__tests__/styled.js
index ee0212967b..083fbda0a9 100644
--- a/packages/styled/__tests__/styled.js
+++ b/packages/styled/__tests__/styled.js
@@ -364,7 +364,7 @@ describe('styled', () => {
     expect(container1.firstChild).toMatchSnapshot()
     const { container: container2 } = render(<H1>hello world</H1>)
 
-    expect(container2).toMatchSnapshot()
+    expect(container2.firstChild).toMatchSnapshot()
   })
 
   test('composition of nested pseudo selectors', async () => {

From b42fcfe4e24eb956da5d7ae4757ae091e8a67e3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:43:50 +0100
Subject: [PATCH 17/54] more

---
 .../css/test/__snapshots__/cx.test.js.snap    | 10 +--
 packages/css/test/cx.test.js                  | 86 +++++++------------
 packages/css/test/instance/stream.test.js     |  3 +
 .../__snapshots__/legacy-class-name.js.snap   |  4 +-
 .../__tests__/babel/__snapshots__/css.js.snap |  4 +-
 packages/react/__tests__/babel/css.js         | 32 ++++---
 packages/react/__tests__/legacy-class-name.js | 51 +++++------
 packages/react/__tests__/warnings.js          |  2 +-
 8 files changed, 82 insertions(+), 110 deletions(-)

diff --git a/packages/css/test/__snapshots__/cx.test.js.snap b/packages/css/test/__snapshots__/cx.test.js.snap
index 4c80ffe3ed..5fae78ea10 100644
--- a/packages/css/test/__snapshots__/cx.test.js.snap
+++ b/packages/css/test/__snapshots__/cx.test.js.snap
@@ -11,7 +11,7 @@ exports[`cx all types 1`] = `
 }
 
 <div
-  className="modal profile emotion-0"
+  class="modal profile emotion-0"
 />
 `;
 
@@ -26,7 +26,7 @@ exports[`cx fun fun functions 1`] = `
 }
 
 <div
-  className="modal profile emotion-0"
+  class="modal profile emotion-0"
 />
 `;
 
@@ -37,7 +37,7 @@ exports[`cx merge 2 1`] = `
 }
 
 <div
-  className="emotion-0 modal"
+  class="emotion-0 modal"
 />
 `;
 
@@ -50,7 +50,7 @@ exports[`cx merge 3 1`] = `
 }
 
 <div
-  className="modal emotion-0"
+  class="modal emotion-0"
 />
 `;
 
@@ -63,7 +63,7 @@ exports[`cx merge 4 1`] = `
 }
 
 <div
-  className="modal profile emotion-0"
+  class="modal profile emotion-0"
 />
 `;
 
diff --git a/packages/css/test/cx.test.js b/packages/css/test/cx.test.js
index 7caffe89ac..1c75d35403 100644
--- a/packages/css/test/cx.test.js
+++ b/packages/css/test/cx.test.js
@@ -1,23 +1,20 @@
 import 'test-utils/setup-env'
 import React from 'react'
-import { act } from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { css, cx } from '@emotion/css'
 
 describe('cx', () => {
-  test('merge 2', async () => {
+  test('merge 2', () => {
     const cls1 = css`
       font-size: 20px;
       background: green;
     `
 
-    const tree = (
-      await act(() => renderer.create(<div className={cx(cls1, 'modal')} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cx(cls1, 'modal')} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('merge 3', async () => {
+  test('merge 3', () => {
     const cls1 = css`
       font-size: 20px;
       background: green;
@@ -27,15 +24,11 @@ describe('cx', () => {
       background: blue;
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(<div className={cx(cls1, cls2, 'modal')} />)
-      )
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cx(cls1, cls2, 'modal')} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('merge 4', async () => {
+  test('merge 4', () => {
     const cls1 = css`
       font-size: 20px;
       background: green;
@@ -45,15 +38,14 @@ describe('cx', () => {
       background: blue;
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(<div className={cx(cls1, cls2, 'modal', 'profile')} />)
-      )
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <div className={cx(cls1, cls2, 'modal', 'profile')} />
+    )
+
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('all types', async () => {
+  test('all types', () => {
     const cls1 = css`
       font-size: 20px;
       background: green;
@@ -76,25 +68,17 @@ describe('cx', () => {
     const foo = true
     const bar = false
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div
-            className={cx(
-              { [cls1]: foo },
-              'modal',
-              { [cls2]: bar },
-              'profile',
-              [[cls3, [cls4]]]
-            )}
-          />
-        )
-      )
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <div
+        className={cx({ [cls1]: foo }, 'modal', { [cls2]: bar }, 'profile', [
+          [cls3, [cls4]]
+        ])}
+      />
+    )
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('fun fun functions', async () => {
+  test('fun fun functions', () => {
     const cls1 = css`
       font-size: 20px;
       background: green;
@@ -114,21 +98,17 @@ describe('cx', () => {
       background: darkgreen;
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div
-            className={cx([
-              [cls1, false && cls2, 'modal'],
-              [cls3, { [cls4]: true }, 'profile']
-            ])}
-          />
-        )
-      )
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <div
+        className={cx([
+          [cls1, false && cls2, 'modal'],
+          [cls3, { [cls4]: true }, 'profile']
+        ])}
+      />
+    )
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('no extra whitespace', async () => {
+  test('no extra whitespace', () => {
     expect(cx('blockquote', '', 'news')).toMatchSnapshot()
     expect(cx('', 'group', '', 'news', '')).toMatchSnapshot()
     expect(cx('author', '')).toMatchSnapshot()
diff --git a/packages/css/test/instance/stream.test.js b/packages/css/test/instance/stream.test.js
index c73e696c8a..bff2c94aca 100644
--- a/packages/css/test/instance/stream.test.js
+++ b/packages/css/test/instance/stream.test.js
@@ -1,3 +1,6 @@
+/**
+ * @jest-environment node
+ */
 import {
   stripDataReactRoot,
   disableBrowserEnvTemporarily,
diff --git a/packages/react/__tests__/__snapshots__/legacy-class-name.js.snap b/packages/react/__tests__/__snapshots__/legacy-class-name.js.snap
index ffe08d0613..e18b76c929 100644
--- a/packages/react/__tests__/__snapshots__/legacy-class-name.js.snap
+++ b/packages/react/__tests__/__snapshots__/legacy-class-name.js.snap
@@ -6,7 +6,7 @@ exports[`object className 1`] = `
 }
 
 <div
-  className="legacy__class emotion-0"
+  class="legacy__class emotion-0"
 />
 `;
 
@@ -16,6 +16,6 @@ exports[`string className 1`] = `
 }
 
 <div
-  className="legacy__class emotion-0"
+  class="legacy__class emotion-0"
 />
 `;
diff --git a/packages/react/__tests__/babel/__snapshots__/css.js.snap b/packages/react/__tests__/babel/__snapshots__/css.js.snap
index 8376e8b419..352e1fa713 100644
--- a/packages/react/__tests__/babel/__snapshots__/css.js.snap
+++ b/packages/react/__tests__/babel/__snapshots__/css.js.snap
@@ -9,7 +9,7 @@ exports[`composition of dynamic array css prop with cssprop-generated className
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   I'm hotpink on the green background.
 </div>
@@ -23,7 +23,7 @@ exports[`tagged template args forwarded 1`] = `
 }
 
 <h2
-  className="emotion-0"
+  class="emotion-0"
 >
   something
 </h2>
diff --git a/packages/react/__tests__/babel/css.js b/packages/react/__tests__/babel/css.js
index 681876a4a3..9490aa40d4 100644
--- a/packages/react/__tests__/babel/css.js
+++ b/packages/react/__tests__/babel/css.js
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import 'test-utils/setup-env'
 import { jsx, css } from '@emotion/react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { act } from 'react'
 
-test('tagged template args forwarded', async () => {
+test('tagged template args forwarded', () => {
   function media(...args) {
     return css`
       @media (min-width: 100px) {
@@ -13,22 +13,20 @@ test('tagged template args forwarded', async () => {
     `
   }
 
-  const tree = await act(() =>
-    renderer.create(
-      <h2
-        css={css`
-          ${media`color: red;`};
-        `}
-      >
-        something
-      </h2>
-    )
+  const { container } = render(
+    <h2
+      css={css`
+        ${media`color: red;`};
+      `}
+    >
+      something
+    </h2>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('composition of dynamic array css prop with cssprop-generated className (#1730)', async () => {
+test('composition of dynamic array css prop with cssprop-generated className (#1730)', () => {
   const Child = ({ bgColor, ...props }) => (
     <div
       css={[{ width: 50, height: 50 }, { backgroundColor: bgColor }]}
@@ -40,9 +38,9 @@ test('composition of dynamic array css prop with cssprop-generated className (#1
       {children}
     </Child>
   )
-  const tree = await act(() =>
-    renderer.create(<Parent>{"I'm hotpink on the green background."}</Parent>)
+  const { container } = render(
+    <Parent>{"I'm hotpink on the green background."}</Parent>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
diff --git a/packages/react/__tests__/legacy-class-name.js b/packages/react/__tests__/legacy-class-name.js
index 4faa613157..80481cbdf7 100644
--- a/packages/react/__tests__/legacy-class-name.js
+++ b/packages/react/__tests__/legacy-class-name.js
@@ -1,39 +1,30 @@
 /** @jsx jsx */
 import 'test-utils/setup-env'
 import { jsx, css } from '@emotion/react'
-import renderer from 'react-test-renderer'
-import { act } from 'react'
+import { render } from '@testing-library/react'
 
-test('string className', async () => {
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <div
-          className="legacy__class"
-          css={css`
-            color: hotpink;
-          `}
-        />
-      )
-    )
-  ).toJSON()
+test('string className', () => {
+  const { container } = render(
+    <div
+      className="legacy__class"
+      css={css`
+        color: hotpink;
+      `}
+    />
+  )
 
-  expect(tree).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('object className', async () => {
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <div
-          className={{ toString: () => 'legacy__class' }}
-          css={css`
-            color: hotpink;
-          `}
-        />
-      )
-    )
-  ).toJSON()
+test('object className', () => {
+  const { container } = render(
+    <div
+      className={{ toString: () => 'legacy__class' }}
+      css={css`
+        color: hotpink;
+      `}
+    />
+  )
 
-  expect(tree).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
index b7a7bf1982..db6a7d82d5 100644
--- a/packages/react/__tests__/warnings.js
+++ b/packages/react/__tests__/warnings.js
@@ -300,7 +300,7 @@ describe('unsafe pseudo classes', () => {
               color: 'hotpink'
             }}
           />
-        ).container
+        ).container.firstChild
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })

From 570f8d7fd8f58b26ecd51cddfa750018b16f4073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:47:17 +0100
Subject: [PATCH 18/54] more

---
 .../__snapshots__/edge-cases.js.snap          |  4 +--
 packages/styled/__tests__/edge-cases.js       | 15 ++++----
 .../__snapshots__/source-map.test.js.snap     | 36 ++++++++++++++-----
 packages/styled/test/source-map.test.js       | 15 ++++----
 4 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/packages/styled/__tests__/__snapshots__/edge-cases.js.snap b/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
index 7f2962d6b1..9ffd72ea73 100644
--- a/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
+++ b/packages/styled/__tests__/__snapshots__/edge-cases.js.snap
@@ -9,7 +9,7 @@ exports[`nested function using css 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -30,6 +30,6 @@ exports[`nested function using css and keyframes 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
diff --git a/packages/styled/__tests__/edge-cases.js b/packages/styled/__tests__/edge-cases.js
index c20a8c7f32..ed553629eb 100644
--- a/packages/styled/__tests__/edge-cases.js
+++ b/packages/styled/__tests__/edge-cases.js
@@ -1,11 +1,10 @@
 import 'test-utils/setup-env'
 import React from 'react'
-import { act } from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import styled from '@emotion/styled'
 import { css, keyframes } from '@emotion/react'
 
-test('nested function using css', async () => {
+test('nested function using css', () => {
   let Comp = styled.div`
     color: blue;
     border: 2px solid #000;
@@ -14,12 +13,12 @@ test('nested function using css', async () => {
     `};
     padding: 30px;
   `
-  const tree = await act(() => renderer.create(<Comp />))
+  const { container } = render(<Comp />)
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('nested function using css and keyframes', async () => {
+test('nested function using css and keyframes', () => {
   let Comp = styled.div`
     ${() => css`
       animation: ${keyframes({
@@ -30,7 +29,7 @@ test('nested function using css and keyframes', async () => {
       })};
     `};
   `
-  const tree = await act(() => renderer.create(<Comp />))
+  const { container } = render(<Comp />)
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
diff --git a/packages/styled/test/__snapshots__/source-map.test.js.snap b/packages/styled/test/__snapshots__/source-map.test.js.snap
index 01de4773bc..e387d33919 100644
--- a/packages/styled/test/__snapshots__/source-map.test.js.snap
+++ b/packages/styled/test/__snapshots__/source-map.test.js.snap
@@ -8,10 +8,16 @@ exports[`inserts source map 1`] = `
       data-s=""
     >
       
-      .css-xdvew0-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgYWN0IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHJlbmRlcmVyIGZyb20gJ3JlYWN0LXRlc3QtcmVuZGVyZXInXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIGNvbXBvbmVudCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGxldCBDb21wMiA9IHN0eWxlZChDb21wKWBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gIGBcbiAgYXdhaXQgYWN0KCgpID0+IHJlbmRlcmVyLmNyZWF0ZSg8Q29tcDIgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgYXN5bmMgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
+      .css-baf0kh-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IHJlbmRlciB9IGZyb20gJ0B0ZXN0aW5nLWxpYnJhcnkvcmVhY3QnXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIHJlbmRlcig8Q29tcCAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBjb21wb25lbnQnLCAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBsZXQgQ29tcDIgPSBzdHlsZWQoQ29tcClgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICBgXG4gIHJlbmRlcig8Q29tcDIgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuXG50ZXN0KCdzb3VyY2UgbWFwIHdpdGggY29tcG9zZWQgc3R5bGUnLCAoKSA9PiB7XG4gIGxldCBzdHlsZSA9IGNzcyh7IGNvbG9yOiAnZ3JlZW4nIH0pXG4gIGxldCBDb21wMiA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICAgICR7c3R5bGV9XG4gIGBcbiAgcmVuZGVyKDxDb21wMiAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
     </style>
   </head>
-  <body />
+  <body>
+    <div>
+      <div
+        class="css-baf0kh-Comp e1gz73mp3"
+      />
+    </div>
+  </body>
 </html>
 `;
 
@@ -23,17 +29,23 @@ exports[`source map with composed component 1`] = `
       data-s=""
     >
       
-      .css-xdvew0-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgYWN0IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHJlbmRlcmVyIGZyb20gJ3JlYWN0LXRlc3QtcmVuZGVyZXInXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIGNvbXBvbmVudCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGxldCBDb21wMiA9IHN0eWxlZChDb21wKWBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gIGBcbiAgYXdhaXQgYWN0KCgpID0+IHJlbmRlcmVyLmNyZWF0ZSg8Q29tcDIgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgYXN5bmMgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
+      .css-baf0kh-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IHJlbmRlciB9IGZyb20gJ0B0ZXN0aW5nLWxpYnJhcnkvcmVhY3QnXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIHJlbmRlcig8Q29tcCAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBjb21wb25lbnQnLCAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBsZXQgQ29tcDIgPSBzdHlsZWQoQ29tcClgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICBgXG4gIHJlbmRlcig8Q29tcDIgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuXG50ZXN0KCdzb3VyY2UgbWFwIHdpdGggY29tcG9zZWQgc3R5bGUnLCAoKSA9PiB7XG4gIGxldCBzdHlsZSA9IGNzcyh7IGNvbG9yOiAnZ3JlZW4nIH0pXG4gIGxldCBDb21wMiA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICAgICR7c3R5bGV9XG4gIGBcbiAgcmVuZGVyKDxDb21wMiAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
     </style>
     <style
       data-emotion="css"
       data-s=""
     >
       
-      .css-1gvw34f-Comp-Comp2{color:hotpink;background:yellow;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjBCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGFjdCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBjb21wb25lbnQnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBsZXQgQ29tcDIgPSBzdHlsZWQoQ29tcClgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBzdHlsZScsIGFzeW5jICgpID0+IHtcbiAgbGV0IHN0eWxlID0gY3NzKHsgY29sb3I6ICdncmVlbicgfSlcbiAgbGV0IENvbXAyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gICAgJHtzdHlsZX1cbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wMiAvPikpXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
+      .css-fle4cv-Comp-Comp2{color:hotpink;background:yellow;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjBCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyByZW5kZXIgfSBmcm9tICdAdGVzdGluZy1saWJyYXJ5L3JlYWN0J1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICByZW5kZXIoPENvbXAgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuXG50ZXN0KCdzb3VyY2UgbWFwIHdpdGggY29tcG9zZWQgY29tcG9uZW50JywgKCkgPT4ge1xuICBsZXQgQ29tcCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgbGV0IENvbXAyID0gc3R5bGVkKENvbXApYFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgYFxuICByZW5kZXIoPENvbXAyIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIHJlbmRlcig8Q29tcDIgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
     </style>
   </head>
-  <body />
+  <body>
+    <div>
+      <div
+        class="css-fle4cv-Comp-Comp2 e1gz73mp1"
+      />
+    </div>
+  </body>
 </html>
 `;
 
@@ -45,23 +57,29 @@ exports[`source map with composed style 1`] = `
       data-s=""
     >
       
-      .css-xdvew0-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgYWN0IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCdcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHJlbmRlcmVyIGZyb20gJ3JlYWN0LXRlc3QtcmVuZGVyZXInXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIGNvbXBvbmVudCcsIGFzeW5jICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIGxldCBDb21wMiA9IHN0eWxlZChDb21wKWBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gIGBcbiAgYXdhaXQgYWN0KCgpID0+IHJlbmRlcmVyLmNyZWF0ZSg8Q29tcDIgLz4pKVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgYXN5bmMgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
+      .css-baf0kh-Comp{color:hotpink;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNdUIiLCJmaWxlIjoic291cmNlLW1hcC50ZXN0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IHJlbmRlciB9IGZyb20gJ0B0ZXN0aW5nLWxpYnJhcnkvcmVhY3QnXG5cbnRlc3QoJ2luc2VydHMgc291cmNlIG1hcCcsICgpID0+IHtcbiAgbGV0IENvbXAgPSBzdHlsZWQuZGl2YFxuICAgIGNvbG9yOiBob3RwaW5rO1xuICBgXG4gIHJlbmRlcig8Q29tcCAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBjb21wb25lbnQnLCAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBsZXQgQ29tcDIgPSBzdHlsZWQoQ29tcClgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICBgXG4gIHJlbmRlcig8Q29tcDIgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuXG50ZXN0KCdzb3VyY2UgbWFwIHdpdGggY29tcG9zZWQgc3R5bGUnLCAoKSA9PiB7XG4gIGxldCBzdHlsZSA9IGNzcyh7IGNvbG9yOiAnZ3JlZW4nIH0pXG4gIGxldCBDb21wMiA9IHN0eWxlZC5kaXZgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICAgICR7c3R5bGV9XG4gIGBcbiAgcmVuZGVyKDxDb21wMiAvPilcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG4iXX0= */
     </style>
     <style
       data-emotion="css"
       data-s=""
     >
       
-      .css-1gvw34f-Comp-Comp2{color:hotpink;background:yellow;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjBCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGFjdCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBjb21wb25lbnQnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBsZXQgQ29tcDIgPSBzdHlsZWQoQ29tcClgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBzdHlsZScsIGFzeW5jICgpID0+IHtcbiAgbGV0IHN0eWxlID0gY3NzKHsgY29sb3I6ICdncmVlbicgfSlcbiAgbGV0IENvbXAyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gICAgJHtzdHlsZX1cbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wMiAvPikpXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
+      .css-fle4cv-Comp-Comp2{color:hotpink;background:yellow;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjBCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyByZW5kZXIgfSBmcm9tICdAdGVzdGluZy1saWJyYXJ5L3JlYWN0J1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICByZW5kZXIoPENvbXAgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuXG50ZXN0KCdzb3VyY2UgbWFwIHdpdGggY29tcG9zZWQgY29tcG9uZW50JywgKCkgPT4ge1xuICBsZXQgQ29tcCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgbGV0IENvbXAyID0gc3R5bGVkKENvbXApYFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgYFxuICByZW5kZXIoPENvbXAyIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIHJlbmRlcig8Q29tcDIgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
     </style>
     <style
       data-emotion="css"
       data-s=""
     >
       
-      .css-16164n3-Comp2-style{background:yellow;color:green;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQndCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGFjdCB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCByZW5kZXJlciBmcm9tICdyZWFjdC10ZXN0LXJlbmRlcmVyJ1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBjb21wb25lbnQnLCBhc3luYyAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICBsZXQgQ29tcDIgPSBzdHlsZWQoQ29tcClgXG4gICAgYmFja2dyb3VuZDogeWVsbG93O1xuICBgXG4gIGF3YWl0IGFjdCgoKSA9PiByZW5kZXJlci5jcmVhdGUoPENvbXAyIC8+KSlcbiAgZXhwZWN0KGRvY3VtZW50LmRvY3VtZW50RWxlbWVudCkudG9NYXRjaFNuYXBzaG90KClcbn0pXG5cbnRlc3QoJ3NvdXJjZSBtYXAgd2l0aCBjb21wb3NlZCBzdHlsZScsIGFzeW5jICgpID0+IHtcbiAgbGV0IHN0eWxlID0gY3NzKHsgY29sb3I6ICdncmVlbicgfSlcbiAgbGV0IENvbXAyID0gc3R5bGVkLmRpdmBcbiAgICBiYWNrZ3JvdW5kOiB5ZWxsb3c7XG4gICAgJHtzdHlsZX1cbiAgYFxuICBhd2FpdCBhY3QoKCkgPT4gcmVuZGVyZXIuY3JlYXRlKDxDb21wMiAvPikpXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
+      .css-hulrp8-Comp2-style{background:yellow;color:green;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQndCIiwiZmlsZSI6InNvdXJjZS1tYXAudGVzdC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyByZW5kZXIgfSBmcm9tICdAdGVzdGluZy1saWJyYXJ5L3JlYWN0J1xuXG50ZXN0KCdpbnNlcnRzIHNvdXJjZSBtYXAnLCAoKSA9PiB7XG4gIGxldCBDb21wID0gc3R5bGVkLmRpdmBcbiAgICBjb2xvcjogaG90cGluaztcbiAgYFxuICByZW5kZXIoPENvbXAgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuXG50ZXN0KCdzb3VyY2UgbWFwIHdpdGggY29tcG9zZWQgY29tcG9uZW50JywgKCkgPT4ge1xuICBsZXQgQ29tcCA9IHN0eWxlZC5kaXZgXG4gICAgY29sb3I6IGhvdHBpbms7XG4gIGBcbiAgbGV0IENvbXAyID0gc3R5bGVkKENvbXApYFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgYFxuICByZW5kZXIoPENvbXAyIC8+KVxuICBleHBlY3QoZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50KS50b01hdGNoU25hcHNob3QoKVxufSlcblxudGVzdCgnc291cmNlIG1hcCB3aXRoIGNvbXBvc2VkIHN0eWxlJywgKCkgPT4ge1xuICBsZXQgc3R5bGUgPSBjc3MoeyBjb2xvcjogJ2dyZWVuJyB9KVxuICBsZXQgQ29tcDIgPSBzdHlsZWQuZGl2YFxuICAgIGJhY2tncm91bmQ6IHllbGxvdztcbiAgICAke3N0eWxlfVxuICBgXG4gIHJlbmRlcig8Q29tcDIgLz4pXG4gIGV4cGVjdChkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLnRvTWF0Y2hTbmFwc2hvdCgpXG59KVxuIl19 */
     </style>
   </head>
-  <body />
+  <body>
+    <div>
+      <div
+        class="css-hulrp8-Comp2-style e1gz73mp0"
+      />
+    </div>
+  </body>
 </html>
 `;
diff --git a/packages/styled/test/source-map.test.js b/packages/styled/test/source-map.test.js
index 09aa9844d0..290c49add6 100644
--- a/packages/styled/test/source-map.test.js
+++ b/packages/styled/test/source-map.test.js
@@ -1,34 +1,33 @@
 import React from 'react'
-import { act } from 'react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 
-test('inserts source map', async () => {
+test('inserts source map', () => {
   let Comp = styled.div`
     color: hotpink;
   `
-  await act(() => renderer.create(<Comp />))
+  render(<Comp />)
   expect(document.documentElement).toMatchSnapshot()
 })
 
-test('source map with composed component', async () => {
+test('source map with composed component', () => {
   let Comp = styled.div`
     color: hotpink;
   `
   let Comp2 = styled(Comp)`
     background: yellow;
   `
-  await act(() => renderer.create(<Comp2 />))
+  render(<Comp2 />)
   expect(document.documentElement).toMatchSnapshot()
 })
 
-test('source map with composed style', async () => {
+test('source map with composed style', () => {
   let style = css({ color: 'green' })
   let Comp2 = styled.div`
     background: yellow;
     ${style}
   `
-  await act(() => renderer.create(<Comp2 />))
+  render(<Comp2 />)
   expect(document.documentElement).toMatchSnapshot()
 })

From 45f4a22f45158eb7e4050ae72220e6d458034cc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:51:10 +0100
Subject: [PATCH 19/54] more

---
 .../__tests__/__snapshots__/use-theme.js.snap |  6 ++--
 packages/react/__tests__/use-theme.js         | 33 +++++++------------
 .../__snapshots__/babel-plugin.test.js.snap   | 11 +++++++
 packages/styled/test/babel-plugin.test.js     |  8 ++---
 4 files changed, 29 insertions(+), 29 deletions(-)
 create mode 100644 packages/styled/test/__snapshots__/babel-plugin.test.js.snap

diff --git a/packages/react/__tests__/__snapshots__/use-theme.js.snap b/packages/react/__tests__/__snapshots__/use-theme.js.snap
index d855c4a143..53ab7f26cb 100644
--- a/packages/react/__tests__/__snapshots__/use-theme.js.snap
+++ b/packages/react/__tests__/__snapshots__/use-theme.js.snap
@@ -18,11 +18,11 @@ exports[`Nested useTheme works 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   Should be green
   <div
-    className="emotion-1"
+    class="emotion-1"
   >
     Should be lawngreen
   </div>
@@ -39,7 +39,7 @@ exports[`useTheme works 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   Should be green
 </div>
diff --git a/packages/react/__tests__/use-theme.js b/packages/react/__tests__/use-theme.js
index 01c3dae38b..911331330c 100644
--- a/packages/react/__tests__/use-theme.js
+++ b/packages/react/__tests__/use-theme.js
@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import 'test-utils/setup-env'
-import { act } from 'react'
-import * as renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { jsx, useTheme, ThemeProvider } from '@emotion/react'
 
 test('useTheme works', () => {
@@ -17,17 +16,15 @@ test('useTheme works', () => {
   }
 
   expect(
-    renderer
-      .create(
-        <ThemeProvider theme={{ lightGreen: 'green', darkGreen: 'darkgreen' }}>
-          <TestComponent />
-        </ThemeProvider>
-      )
-      .toJSON()
+    render(
+      <ThemeProvider theme={{ lightGreen: 'green', darkGreen: 'darkgreen' }}>
+        <TestComponent />
+      </ThemeProvider>
+    ).container.firstChild
   ).toMatchSnapshot()
 })
 
-test.only('Nested useTheme works', async () => {
+test('Nested useTheme works', async () => {
   function TestComponent1(props) {
     const theme = useTheme()
     return (
@@ -65,16 +62,10 @@ test.only('Nested useTheme works', async () => {
   }
 
   expect(
-    (
-      await act(() =>
-        renderer.create(
-          <ThemeProvider
-            theme={{ lightGreen: 'green', darkGreen: 'darkgreen' }}
-          >
-            <TestComponent2 />
-          </ThemeProvider>
-        )
-      )
-    ).toJSON()
+    render(
+      <ThemeProvider theme={{ lightGreen: 'green', darkGreen: 'darkgreen' }}>
+        <TestComponent2 />
+      </ThemeProvider>
+    ).container.firstChild
   ).toMatchSnapshot()
 })
diff --git a/packages/styled/test/__snapshots__/babel-plugin.test.js.snap b/packages/styled/test/__snapshots__/babel-plugin.test.js.snap
new file mode 100644
index 0000000000..d084dcdb8a
--- /dev/null
+++ b/packages/styled/test/__snapshots__/babel-plugin.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`config merging works even if it's referenced by variable 1`] = `
+<div>
+  <button
+    class="emotion-0 emotion-1"
+  >
+    not forwarded
+  </button>
+</div>
+`;
diff --git a/packages/styled/test/babel-plugin.test.js b/packages/styled/test/babel-plugin.test.js
index 5e645a56ab..a6f5239f69 100644
--- a/packages/styled/test/babel-plugin.test.js
+++ b/packages/styled/test/babel-plugin.test.js
@@ -1,7 +1,7 @@
 import 'test-utils/setup-env'
 import React from 'react'
 import { act } from 'react'
-import * as renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import styled from '@emotion/styled'
 
 test("config merging works even if it's referenced by variable", async () => {
@@ -11,8 +11,6 @@ test("config merging works even if it's referenced by variable", async () => {
 
   const cfg = { shouldForwardProp: p => p !== 'isRed' }
   const StyledButton = styled(Button, cfg)({})
-  const tree = (
-    await act(() => renderer.create(<StyledButton isRed />))
-  ).toJSON()
-  expect(tree.children).toEqual(['not forwarded'])
+  const { container } = render(<StyledButton isRed />)
+  expect(container).toMatchSnapshot()
 })

From 245185ac03228bf1973fa58510e3b8587a30c914 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:54:13 +0100
Subject: [PATCH 20/54] more

---
 .../__tests__/__snapshots__/warnings.js.snap  |  6 --
 packages/react/__tests__/warnings.js          | 60 +++++++++----------
 2 files changed, 27 insertions(+), 39 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/warnings.js.snap b/packages/react/__tests__/__snapshots__/warnings.js.snap
index 6ca975c087..359ec84745 100644
--- a/packages/react/__tests__/__snapshots__/warnings.js.snap
+++ b/packages/react/__tests__/__snapshots__/warnings.js.snap
@@ -31,10 +31,6 @@ exports[`does not warn when valid values are passed for the content property 1`]
 />
 `;
 
-exports[`global with css prop 1`] = `null`;
-
-exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ does not warn when using the flag on a global rule 1`] = `null`;
-
 exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ does not warn when using the flag on a rule that is defined in another one 1`] = `
 .emotion-0 div span:first-child {
   border-bottom-left-radius: 0;
@@ -101,8 +97,6 @@ exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-di
 />
 `;
 
-exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ does warn when not using the flag on a global rule 1`] = `null`;
-
 exports[`unsafe pseudo classes does not warn when using with flag: /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ does warn when not using the flag on a rule that is defined in another one 1`] = `
 .emotion-0 div span:first-child {
   border-bottom-left-radius: 0;
diff --git a/packages/react/__tests__/warnings.js b/packages/react/__tests__/warnings.js
index db6a7d82d5..ee5e358c52 100644
--- a/packages/react/__tests__/warnings.js
+++ b/packages/react/__tests__/warnings.js
@@ -137,7 +137,7 @@ describe('unsafe pseudo classes', () => {
               }
             }}
           />
-        ).container
+        ).container.firstChild
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
@@ -161,7 +161,7 @@ describe('unsafe pseudo classes', () => {
               }
             }}
           />
-        ).container
+        ).container.firstChild
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
@@ -183,7 +183,7 @@ describe('unsafe pseudo classes', () => {
               }
             }}
           />
-        ).container
+        ).container.firstChild
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
@@ -205,7 +205,7 @@ describe('unsafe pseudo classes', () => {
               color: 'hotpink'
             }}
           />
-        ).container
+        ).container.firstChild
       ).toMatchSnapshot()
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
@@ -217,17 +217,15 @@ describe('unsafe pseudo classes', () => {
     })
 
     test('does warn when not using the flag on a global rule', () => {
-      expect(
-        render(
-          <Global
-            styles={{
-              [`body > *:first-child`]: {
-                marginLeft: 0
-              }
-            }}
-          />
-        ).container
-      ).toMatchSnapshot()
+      render(
+        <Global
+          styles={{
+            [`body > *:first-child`]: {
+              marginLeft: 0
+            }
+          }}
+        />
+      )
       expect(console.error.mock.calls).toMatchInlineSnapshot(`
         [
           [
@@ -250,7 +248,7 @@ describe('unsafe pseudo classes', () => {
               }
             }}
           />
-        ).container
+        ).container.firstChild
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
@@ -268,7 +266,7 @@ describe('unsafe pseudo classes', () => {
               }
             }}
           />
-        ).container
+        ).container.firstChild
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
@@ -284,7 +282,7 @@ describe('unsafe pseudo classes', () => {
               }
             }}
           />
-        ).container
+        ).container.firstChild
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
@@ -306,17 +304,15 @@ describe('unsafe pseudo classes', () => {
     })
 
     test('does not warn when using the flag on a global rule', () => {
-      expect(
-        render(
-          <Global
-            styles={{
-              [`body > *:first-child${ignoreSsrFlag}`]: {
-                marginLeft: 0
-              }
-            }}
-          />
-        ).container
-      ).toMatchSnapshot()
+      render(
+        <Global
+          styles={{
+            [`body > *:first-child${ignoreSsrFlag}`]: {
+              marginLeft: 0
+            }
+          }}
+        />
+      )
       expect(console.error).not.toBeCalled()
     })
 
@@ -355,7 +351,7 @@ describe('unsafe pseudo classes', () => {
               }
             `}
           />
-        ).container
+        ).container.firstChild
       ).toMatchSnapshot()
       expect(console.error).not.toBeCalled()
     })
@@ -363,7 +359,7 @@ describe('unsafe pseudo classes', () => {
 })
 
 test('global with css prop', () => {
-  let { container } = render(
+  render(
     <Global
       css={{
         html: {
@@ -375,8 +371,6 @@ test('global with css prop', () => {
       }}
     />
   )
-  expect(container).toMatchSnapshot()
-
   expect(console.error).toBeCalledWith(
     "It looks like you're using the css prop on Global, did you mean to use the styles prop instead?"
   )

From 883ba0c54d58e1f89af2644620a202efa950d3ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:55:15 +0100
Subject: [PATCH 21/54] more

---
 .../emotion-primitives.test.js.snap           | 40 +++++--------------
 1 file changed, 10 insertions(+), 30 deletions(-)

diff --git a/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap b/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap
index 4abb0855d4..9ae2a0559f 100644
--- a/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap
+++ b/packages/primitives/test/__snapshots__/emotion-primitives.test.js.snap
@@ -34,26 +34,17 @@ exports[`Emotion primitives should pass props in withComponent 2`] = `
 exports[`Emotion primitives should render <Image /> 1`] = `
 <div
   class="css-view-1dbjc4n r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
-  style={
-    {
-      "borderBottomColor": "rgba(255,105,180,1.00)",
-      "borderBottomStyle": "solid",
-      "borderBottomWidth": "2px",
-      "borderLeftColor": "rgba(255,105,180,1.00)",
-      "borderLeftStyle": "solid",
-      "borderLeftWidth": "2px",
-      "borderRightColor": "rgba(255,105,180,1.00)",
-      "borderRightStyle": "solid",
-      "borderRightWidth": "2px",
-      "borderTopColor": "rgba(255,105,180,1.00)",
-      "borderTopStyle": "solid",
-      "borderTopWidth": "2px",
-    }
-  }
+  style="border-top-color: rgba(255,105,180,1.00); border-right-color: rgba(255,105,180,1.00); border-bottom-color: rgba(255,105,180,1.00); border-left-color: rgba(255,105,180,1.00); border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; height: 150px; width: 150px;"
 >
   <div
     class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    suppressHydrationWarning={true}
+    style="background-image: url(https://camo.githubusercontent.com/209bdea972b9b6ef90220c59ecbe66d35ffefa8a/68747470733a2f2f63646e2e7261776769742e636f6d2f746b6834342f656d6f74696f6e2f6d61737465722f656d6f74696f6e2e706e67);"
+  />
+  <img
+    alt=""
+    class="css-accessibilityImage-9pa8cd"
+    draggable="false"
+    src="https://camo.githubusercontent.com/209bdea972b9b6ef90220c59ecbe66d35ffefa8a/68747470733a2f2f63646e2e7261776769742e636f6d2f746b6834342f656d6f74696f6e2f6d61737465722f656d6f74696f6e2e706e67"
   />
 </div>
 `;
@@ -62,14 +53,7 @@ exports[`Emotion primitives should render primitive with style prop 1`] = `
 <div
   class="css-text-901oao r-color-185hjl9"
   dir="auto"
-  style={
-    {
-      "paddingBottom": "10px",
-      "paddingLeft": "10px",
-      "paddingRight": "10px",
-      "paddingTop": "10px",
-    }
-  }
+  style="padding: 10px 10px 10px 10px;"
 >
   Emotion primitives
 </div>
@@ -88,11 +72,7 @@ exports[`Emotion primitives should render the primitive when styles applied usin
 <div
   class="css-text-901oao r-backgroundColor-1g6456j r-color-howw7u"
   dir="auto"
-  style={
-    {
-      "fontSize": "40px",
-    }
-  }
+  style="font-size: 40px;"
 >
   Emotion Primitives
 </div>

From c3d4d20ac0db50624334e7c4ae1704c21dc96e1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 12:55:59 +0100
Subject: [PATCH 22/54] fix

---
 packages/primitives/test/emotion-primitives.test.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/primitives/test/emotion-primitives.test.js b/packages/primitives/test/emotion-primitives.test.js
index 1610ea95de..d8415faf9a 100644
--- a/packages/primitives/test/emotion-primitives.test.js
+++ b/packages/primitives/test/emotion-primitives.test.js
@@ -137,12 +137,12 @@ describe('Emotion primitives', () => {
     const ViewOne = styled.View`
       background-color: ${props => props.color};
     `
-    const treeOne = renderer.create(<ViewOne color="green" />)
+    const { container: container1 } = render(<ViewOne color="green" />)
     const ViewTwo = ViewOne.withComponent(Text)
-    const treeTwo = renderer.create(<ViewTwo color="hotpink" />)
+    const { container: container2 } = render(<ViewTwo color="hotpink" />)
 
-    expect(treeOne).toMatchSnapshot()
-    expect(treeTwo).toMatchSnapshot()
+    expect(container1.firstChild).toMatchSnapshot()
+    expect(container2.firstChild).toMatchSnapshot()
   })
 
   test('should render <Image />', () => {

From 4ebcc12348928f354d4169b69c5e235b859e89d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 13:01:23 +0100
Subject: [PATCH 23/54] migrate more tests

---
 .../component-selector.test.js.snap           |   4 +-
 packages/css/test/component-selector.test.js  |  20 +-
 .../__snapshots__/with-theme.js.snap          |   2 +-
 .../__snapshots__/prop-filtering.test.js.snap |  75 ++---
 packages/styled/test/prop-filtering.test.js   | 306 ++++++++----------
 5 files changed, 162 insertions(+), 245 deletions(-)

diff --git a/packages/css/test/__snapshots__/component-selector.test.js.snap b/packages/css/test/__snapshots__/component-selector.test.js.snap
index 0831e50cb4..f5816e1d25 100644
--- a/packages/css/test/__snapshots__/component-selector.test.js.snap
+++ b/packages/css/test/__snapshots__/component-selector.test.js.snap
@@ -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>
 `;
diff --git a/packages/css/test/component-selector.test.js b/packages/css/test/component-selector.test.js
index 90726d73cf..47adaba295 100644
--- a/packages/css/test/component-selector.test.js
+++ b/packages/css/test/component-selector.test.js
@@ -2,11 +2,11 @@ import 'test-utils/setup-env'
 import React from 'react'
 import { act } from 'react'
 import styled from '@emotion/styled'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { css } from '@emotion/css'
 
 describe('component selector', () => {
-  test('should be converted to use the emotion target className', async () => {
+  test('should be converted to use the emotion target className', () => {
     const FakeComponent = styled.div`
       color: blue;
     `
@@ -16,15 +16,11 @@ describe('component selector', () => {
         color: red;
       }
     `
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div className={cls2}>
-            <FakeComponent />
-          </div>
-        )
-      )
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(
+      <div className={cls2}>
+        <FakeComponent />
+      </div>
+    )
+    expect(container.firstChild).toMatchSnapshot()
   })
 })
diff --git a/packages/react/__tests__/__snapshots__/with-theme.js.snap b/packages/react/__tests__/__snapshots__/with-theme.js.snap
index f7691fa5ba..1548e5db43 100644
--- a/packages/react/__tests__/__snapshots__/with-theme.js.snap
+++ b/packages/react/__tests__/__snapshots__/with-theme.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`withTheme works 1`] = `"green"`;
+exports[`withTheme works 1`] = `green`;
diff --git a/packages/styled/test/__snapshots__/prop-filtering.test.js.snap b/packages/styled/test/__snapshots__/prop-filtering.test.js.snap
index 1ef597ea52..0d666843ce 100644
--- a/packages/styled/test/__snapshots__/prop-filtering.test.js.snap
+++ b/packages/styled/test/__snapshots__/prop-filtering.test.js.snap
@@ -2,8 +2,7 @@
 
 exports[`composes shouldForwardProp on composed styled components 1`] = `
 <div
-  className="emotion-0 emotion-1"
-  xyz={true}
+  class="emotion-0 emotion-1"
 />
 `;
 
@@ -14,17 +13,13 @@ exports[`custom shouldForwardProp works 1`] = `
 }
 
 <svg
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
   height="100px"
   width="100px"
 >
   <rect
     height="100"
-    style={
-      {
-        "stroke": "#ff0000",
-      }
-    }
+    style="stroke: #ff0000;"
     width="100"
     x="10"
     y="10"
@@ -38,17 +33,10 @@ exports[`no prop filtering on non string tags 1`] = `
 }
 
 <a
-  a={true}
   aria-label="some label"
-  b={true}
-  className="emotion-0 emotion-1"
-  cool={true}
+  class="emotion-0 emotion-1"
   data-wow="value"
-  filtering={true}
   href="link"
-  is={true}
-  prop={true}
-  wow={true}
 >
   hello world
 </a>
@@ -59,21 +47,14 @@ exports[`no prop filtering on string tags started with upper case 1`] = `
   color: green;
 }
 
-<SomeCustomLink
-  a={true}
+<somecustomlink
   aria-label="some label"
-  b={true}
-  className="emotion-0 emotion-1"
-  cool={true}
+  class="emotion-0 emotion-1"
   data-wow="value"
-  filtering={true}
   href="link"
-  is={true}
-  prop={true}
-  wow={true}
 >
   hello world
-</SomeCustomLink>
+</somecustomlink>
 `;
 
 exports[`prop filtering 1`] = `
@@ -83,10 +64,9 @@ exports[`prop filtering 1`] = `
 
 <a
   aria-label="some label"
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
   data-wow="value"
   href="link"
-  is={true}
 >
   hello world
 </a>
@@ -100,36 +80,24 @@ exports[`prop filtering on composed styled components that are string tags 1`] =
 
 <a
   aria-label="some label"
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
   data-wow="value"
   for="other reasons"
   href="link"
-  is={true}
-  kind={true}
 >
   hello world
 </a>
 `;
 
 exports[`shouldForwardProp should get inherited for wrapped styled components 1`] = `
-[
-  .emotion-0 {
+.emotion-0 {
   background-color: red;
 }
 
 <div
-    className="emotion-0 emotion-1"
-    id="test-1"
-  />,
-  .emotion-0 {
-  background-color: green;
-}
-
-<div
-    className="emotion-0 emotion-1"
-    id="test-2"
-  />,
-]
+  class="emotion-0 emotion-1"
+  id="test-1"
+/>
 `;
 
 exports[`withComponent inherits explicit shouldForwardProp 1`] = `
@@ -138,8 +106,7 @@ exports[`withComponent inherits explicit shouldForwardProp 1`] = `
 }
 
 <span
-  className="emotion-0 emotion-1"
-  foo={true}
+  class="emotion-0 emotion-1"
 />
 `;
 
@@ -150,8 +117,7 @@ exports[`withComponent inherits explicit shouldForwardProp from flattened compon
 }
 
 <span
-  className="emotion-0 emotion-1"
-  foo={true}
+  class="emotion-0 emotion-1"
 />
 `;
 
@@ -161,8 +127,7 @@ exports[`withComponent should accept shouldForwardProp 1`] = `
 }
 
 <span
-  className="emotion-0 emotion-1"
-  xyz={true}
+  class="emotion-0 emotion-1"
 />
 `;
 
@@ -172,9 +137,7 @@ exports[`withComponent should compose shouldForwardProp 1`] = `
 }
 
 <span
-  className="emotion-0 emotion-1"
-  qwe={true}
-  xyz={true}
+  class="emotion-0 emotion-1"
 />
 `;
 
@@ -184,8 +147,6 @@ exports[`withComponent should compose shouldForwardProp with a flattened compone
 }
 
 <span
-  className="emotion-0 emotion-1"
-  qwe={true}
-  xyz={true}
+  class="emotion-0 emotion-1"
 />
 `;
diff --git a/packages/styled/test/prop-filtering.test.js b/packages/styled/test/prop-filtering.test.js
index c165642405..b077d5d6b6 100644
--- a/packages/styled/test/prop-filtering.test.js
+++ b/packages/styled/test/prop-filtering.test.js
@@ -1,10 +1,10 @@
 import 'test-utils/setup-env'
 import React from 'react'
 import { act } from 'react'
-import * as renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import styled from '@emotion/styled'
 
-test('composes shouldForwardProp on composed styled components', async () => {
+test('composes shouldForwardProp on composed styled components', () => {
   const StyledDiv = styled('div', {
     shouldForwardProp: prop => prop !== 'foo'
   })()
@@ -13,14 +13,12 @@ test('composes shouldForwardProp on composed styled components', async () => {
     shouldForwardProp: prop => prop !== 'bar'
   })()
 
-  const tree = (
-    await act(() => renderer.create(<ComposedDiv foo bar xyz />))
-  ).toJSON()
+  const { container } = render(<ComposedDiv foo bar xyz />)
 
-  expect(tree).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('custom shouldForwardProp works', async () => {
+test('custom shouldForwardProp works', () => {
   const Svg = props => (
     <svg {...props}>
       <rect
@@ -43,17 +41,13 @@ test('custom shouldForwardProp works', async () => {
     }
   `
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <StyledSvg color="#0000ff" width="100px" height="100px" />
-      )
-    )
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <StyledSvg color="#0000ff" width="100px" height="100px" />
+  )
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('shouldForwardProp should get inherited for wrapped styled components', async () => {
+test('shouldForwardProp should get inherited for wrapped styled components', () => {
   const Div1 = styled('div', {
     shouldForwardProp: prop => prop !== 'color'
   })`
@@ -62,120 +56,102 @@ test('shouldForwardProp should get inherited for wrapped styled components', asy
 
   const Div2 = styled(Div1)``
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <>
-          <Div1 color="red" id="test-1" />
-          <Div2 color="green" id="test-2" />
-        </>
-      )
-    )
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <>
+      <Div1 color="red" id="test-1" />
+      <Div2 color="green" id="test-2" />
+    </>
+  )
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('prop filtering', async () => {
+test('prop filtering', () => {
   const Link = styled.a`
     color: green;
   `
   const rest = { m: [3], pt: [4] }
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <Link
-          a
-          b
-          wow
-          prop
-          filtering
-          is
-          cool
-          aria-label="some label"
-          data-wow="value"
-          href="link"
-          {...rest}
-        >
-          hello world
-        </Link>
-      )
-    )
-  ).toJSON()
-
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <Link
+      a
+      b
+      wow
+      prop
+      filtering
+      is
+      cool
+      aria-label="some label"
+      data-wow="value"
+      href="link"
+      {...rest}
+    >
+      hello world
+    </Link>
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
 })
-test('no prop filtering on non string tags', async () => {
+test('no prop filtering on non string tags', () => {
   const Link = styled(props => <a {...props} />)`
     color: green;
   `
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <Link
-          a
-          b
-          wow
-          prop
-          filtering
-          is
-          cool
-          aria-label="some label"
-          data-wow="value"
-          href="link"
-        >
-          hello world
-        </Link>
-      )
-    )
-  ).toJSON()
-
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <Link
+      a
+      b
+      wow
+      prop
+      filtering
+      is
+      cool
+      aria-label="some label"
+      data-wow="value"
+      href="link"
+    >
+      hello world
+    </Link>
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('no prop filtering on string tags started with upper case', async () => {
+test('no prop filtering on string tags started with upper case', () => {
   const Link = styled('SomeCustomLink')`
     color: green;
   `
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <Link
-          a
-          b
-          wow
-          prop
-          filtering
-          is
-          cool
-          aria-label="some label"
-          data-wow="value"
-          href="link"
-        >
-          hello world
-        </Link>
-      )
-    )
-  ).toJSON()
-
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <Link
+      a
+      b
+      wow
+      prop
+      filtering
+      is
+      cool
+      aria-label="some label"
+      data-wow="value"
+      href="link"
+    >
+      hello world
+    </Link>
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('basic SVG attributes survive prop filtering', async () => {
+test('basic SVG attributes survive prop filtering', () => {
   const RedCircle = styled('circle')`
     fill: #ff0000;
     stroke-width: 0.26458332;
   `
 
-  const svg = (
-    await act(() =>
-      renderer.create(<RedCircle r="9.8273811" cy="49.047619" cx="65.011902" />)
-    )
-  ).toJSON()
+  const { container } = render(
+    <RedCircle r="9.8273811" cy="49.047619" cx="65.011902" />
+  )
 
-  expect(svg).toMatchInlineSnapshot(`
+  expect(container.firstChild).toMatchInlineSnapshot(`
 .emotion-0 {
   fill: #ff0000;
   stroke-width: 0.26458332;
@@ -190,7 +166,7 @@ test('basic SVG attributes survive prop filtering', async () => {
 `)
 })
 
-test('all SVG attributes survive prop filtering', async () => {
+test('all SVG attributes survive prop filtering', () => {
   const svgAttributes = {
     accentHeight: 'abcd',
     accumulate: 'abcd',
@@ -435,14 +411,12 @@ test('all SVG attributes survive prop filtering', async () => {
     stroke-width: 0.26458332;
   `
 
-  const svg = (
-    await act(() => renderer.create(<RedPath {...svgAttributes} />))
-  ).toJSON()
+  const { container } = render(<RedPath {...svgAttributes} />)
 
-  expect(svg.props).toEqual({ ...svgAttributes, className: expect.any(String) })
+  expect(container).toMatchSnapshot
 })
 
-test('prop filtering on composed styled components that are string tags', async () => {
+test('prop filtering on composed styled components that are string tags', () => {
   const BaseLink = styled.a`
     background-color: hotpink;
   `
@@ -450,60 +424,54 @@ test('prop filtering on composed styled components that are string tags', async
     color: green;
   `
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <Link
-          wow
-          prop
-          filtering
-          looks
-          cool
-          but
-          is
-          kind
-          of
-          a
-          bad
-          idea
-          since
-          the
-          react
-          warnings
-          will
-          not
-          work
-          and
-          it="is"
-          problematic
-          for="other reasons"
-          aria-label="some label"
-          data-wow="value"
-          href="link"
-        >
-          hello world
-        </Link>
-      )
-    )
-  ).toJSON()
-
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <Link
+      wow
+      prop
+      filtering
+      looks
+      cool
+      but
+      is
+      kind
+      of
+      a
+      bad
+      idea
+      since
+      the
+      react
+      warnings
+      will
+      not
+      work
+      and
+      it="is"
+      problematic
+      for="other reasons"
+      aria-label="some label"
+      data-wow="value"
+      href="link"
+    >
+      hello world
+    </Link>
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('withComponent inherits explicit shouldForwardProp', async () => {
+test('withComponent inherits explicit shouldForwardProp', () => {
   const SomeComponent = styled('div', {
     shouldForwardProp: prop => prop === 'foo'
   })`
     color: hotpink;
   `
   const AnotherComponent = SomeComponent.withComponent('span')
-  const tree = (
-    await act(() => renderer.create(<AnotherComponent foo bar />))
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(<AnotherComponent foo bar />)
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('withComponent inherits explicit shouldForwardProp from flattened component', async () => {
+test('withComponent inherits explicit shouldForwardProp from flattened component', () => {
   const SomeComponent = styled('div', {
     shouldForwardProp: prop => prop === 'foo'
   })`
@@ -513,26 +481,22 @@ test('withComponent inherits explicit shouldForwardProp from flattened component
     background-color: blue;
   `
   const YetAnotherComponent = AnotherComponent.withComponent('span')
-  const tree = (
-    await act(() => renderer.create(<YetAnotherComponent foo bar />))
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(<YetAnotherComponent foo bar />)
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('withComponent should accept shouldForwardProp', async () => {
+test('withComponent should accept shouldForwardProp', () => {
   const SomeComponent = styled('div')`
     color: hotpink;
   `
   const AnotherComponent = SomeComponent.withComponent('span', {
     shouldForwardProp: prop => prop === 'xyz'
   })
-  const tree = (
-    await act(() => renderer.create(<AnotherComponent qwe xyz />))
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(<AnotherComponent qwe xyz />)
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('withComponent should compose shouldForwardProp', async () => {
+test('withComponent should compose shouldForwardProp', () => {
   const SomeComponent = styled('div', {
     shouldForwardProp: prop => prop !== 'foo'
   })`
@@ -541,13 +505,11 @@ test('withComponent should compose shouldForwardProp', async () => {
   const AnotherComponent = SomeComponent.withComponent('span', {
     shouldForwardProp: prop => prop !== 'bar'
   })
-  const tree = (
-    await act(() => renderer.create(<AnotherComponent foo bar qwe xyz />))
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(<AnotherComponent foo bar qwe xyz />)
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('withComponent should compose shouldForwardProp with a flattened component', async () => {
+test('withComponent should compose shouldForwardProp with a flattened component', () => {
   const SomeComponent = styled('div', {
     shouldForwardProp: prop => prop !== 'foo'
   })`
@@ -559,8 +521,6 @@ test('withComponent should compose shouldForwardProp with a flattened component'
   const YetAnotherComponent = SomeComponent.withComponent('span', {
     shouldForwardProp: prop => prop !== 'bar'
   })
-  const tree = (
-    await act(() => renderer.create(<YetAnotherComponent foo bar qwe xyz />))
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(<YetAnotherComponent foo bar qwe xyz />)
+  expect(container.firstChild).toMatchSnapshot()
 })

From f7d5d69772230d70650495c03cb87dccfa836a18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 22:58:11 +0100
Subject: [PATCH 24/54] moar

---
 docs/testing.mdx                              |   8 +-
 .../css/test/__snapshots__/css.test.js.snap   |  78 ++---
 packages/css/test/css.test.js                 | 317 +++++++-----------
 packages/styled/test/prop-filtering.test.js   |   2 +-
 4 files changed, 163 insertions(+), 242 deletions(-)

diff --git a/docs/testing.mdx b/docs/testing.mdx
index cd4b92ad1a..447265df72 100644
--- a/docs/testing.mdx
+++ b/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>
diff --git a/packages/css/test/__snapshots__/css.test.js.snap b/packages/css/test/__snapshots__/css.test.js.snap
index fcf9de1124..e1df309402 100644
--- a/packages/css/test/__snapshots__/css.test.js.snap
+++ b/packages/css/test/__snapshots__/css.test.js.snap
@@ -8,7 +8,7 @@ exports[`css @supports 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -19,7 +19,7 @@ exports[`css array fallback 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -32,7 +32,7 @@ exports[`css array with explicit false 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -45,7 +45,7 @@ exports[`css array with explicit true 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -63,7 +63,7 @@ exports[`css auto px 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -76,7 +76,7 @@ exports[`css boolean as value 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -89,7 +89,7 @@ exports[`css composition stuff 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -102,7 +102,7 @@ exports[`css composition stuff 2`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -136,7 +136,7 @@ exports[`css composition with objects 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -147,7 +147,7 @@ exports[`css computed key is only dynamic 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -158,7 +158,7 @@ exports[`css css variables 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -171,7 +171,7 @@ exports[`css explicit & 1`] = `
 }
 
 <div
-  className="emotion-0 another-class"
+  class="emotion-0 another-class"
 />
 `;
 
@@ -186,7 +186,7 @@ exports[`css explicit & 2`] = `
 
 exports[`css explicit false 1`] = `
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -199,7 +199,7 @@ exports[`css falsy property value in object 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -209,7 +209,7 @@ exports[`css falsy value in nested selector on object 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -219,7 +219,7 @@ exports[`css float property 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -232,13 +232,13 @@ exports[`css flushes correctly 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
 exports[`css flushes correctly 2`] = `
 <div
-  className="css-15gpprc-cls1"
+  class="css-15gpprc-cls1"
 />
 `;
 
@@ -249,7 +249,7 @@ exports[`css handles array of objects 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -270,7 +270,7 @@ exports[`css handles more than 10 dynamic properties 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -288,7 +288,7 @@ exports[`css handles objects 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -298,7 +298,7 @@ exports[`css manually use label property 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -338,7 +338,7 @@ exports[`css media query specificity 2`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -349,7 +349,7 @@ exports[`css multiline declaration 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -359,7 +359,7 @@ exports[`css multiline selector 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -386,13 +386,13 @@ exports[`css nested 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <div
-    className="some-class"
+    class="some-class"
   >
     <div
-      className="some-other-class"
+      class="some-other-class"
     />
   </div>
 </div>
@@ -417,7 +417,7 @@ exports[`css nested array 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -435,19 +435,19 @@ exports[`css nested at rule 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
 exports[`css null rule 1`] = `
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
 exports[`css null value 1`] = `
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -467,7 +467,7 @@ exports[`css random expression 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -480,7 +480,7 @@ exports[`css random interpolation with undefined values 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -494,7 +494,7 @@ exports[`css registered styles as nested selector value in object 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -510,7 +510,7 @@ exports[`css rule after media query 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -531,7 +531,7 @@ exports[`css simple composition 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -544,7 +544,7 @@ exports[`css weakmap 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -557,6 +557,6 @@ exports[`css weakmap 2`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
diff --git a/packages/css/test/css.test.js b/packages/css/test/css.test.js
index 5e291cecb6..bdbd457c55 100644
--- a/packages/css/test/css.test.js
+++ b/packages/css/test/css.test.js
@@ -1,22 +1,19 @@
 import 'test-utils/setup-env'
 import React from 'react'
-import { act } from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { css, flush, sheet } from '@emotion/css'
 
 describe('css', () => {
-  test('float property', async () => {
+  test('float property', () => {
     const cls1 = css`
       float: left;
     `
 
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles more than 10 dynamic properties', async () => {
+  test('handles more than 10 dynamic properties', () => {
     const cls1 = css`
       text-decoration: ${'underline'};
       border-right: solid blue 54px;
@@ -31,46 +28,36 @@ describe('css', () => {
       text-align: ${'center'};
     `
 
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('falsy value in nested selector on object', async () => {
+  test('falsy value in nested selector on object', () => {
     const cls1 = css({ ':hover': { display: null, color: 'hotpink' } })
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('boolean as value', async () => {
+  test('boolean as value', () => {
     const cls1 = css({ display: 'flex', color: false, backgroundColor: true })
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('auto px', async () => {
+  test('auto px', () => {
     const cls1 = css({ display: 'flex', flex: 1, fontSize: 10, '--custom': 5 })
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('random interpolation with undefined values', async () => {
+  test('random interpolation with undefined values', () => {
     const cls2 = css`
       ${undefined};
       justify-content: center;
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls2} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('random expression', async () => {
+  test('random expression', () => {
     const cls2 = css`
       font-size: 20px;
       @media (min-width: 420px) {
@@ -83,13 +70,11 @@ describe('css', () => {
       }
       background: green;
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls2} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('simple composition', async () => {
+  test('simple composition', () => {
     const cls1 = css`
       display: flex;
       &:hover {
@@ -100,13 +85,11 @@ describe('css', () => {
       ${cls1};
       justify-content: center;
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls2} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles objects', async () => {
+  test('handles objects', () => {
     const cls1 = css({
       float: 'left',
       display: 'flex',
@@ -115,29 +98,23 @@ describe('css', () => {
       height: 50,
       width: 20
     })
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles array of objects', async () => {
+  test('handles array of objects', () => {
     const cls1 = css([{ height: 50, width: 20 }, null])
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('computed key is only dynamic', async () => {
+  test('computed key is only dynamic', () => {
     const cls1 = css({ fontSize: 10, [`w${'idth'}`]: 20 })
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('composition with objects', async () => {
+  test('composition with objects', () => {
     const cls1 = css({
       display: 'flex',
       width: 30,
@@ -156,23 +133,19 @@ describe('css', () => {
       justify-content: center;
     `
 
-    const tree = (
-      await act(() => renderer.create(<div className={cls2} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls2} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('@supports', async () => {
+  test('@supports', () => {
     const cls1 = css`
       @supports (display: grid) {
         display: grid;
       }
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test.skip('nested at rules', async () => {
+  test.skip('nested at rules', () => {
     const cls1 = css`
       @supports (display: grid) {
         display: grid;
@@ -187,12 +160,10 @@ describe('css', () => {
         }
       }
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('nested array', async () => {
+  test('nested array', () => {
     const cls1 = css([
       [{ display: 'inline' }],
       [{ display: 'inline-block' }],
@@ -213,37 +184,29 @@ describe('css', () => {
         ]
       ]
     ])
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('explicit false', async () => {
+  test('explicit false', () => {
     const cls1 = css(false)
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('array with explicit false', async () => {
+  test('array with explicit false', () => {
     const cls1 = css([[{ display: 'flex' }], false])
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('array with explicit true', async () => {
+  test('array with explicit true', () => {
     const cls1 = css([[{ display: 'flex' }], true])
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('nested', async () => {
+  test('nested', () => {
     const cls1 = css`
       color: yellow;
       & .some-class {
@@ -256,104 +219,80 @@ describe('css', () => {
         }
       }
     `
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div className={cls1}>
-            <div className="some-class">
-              <div className="some-other-class" />
-            </div>
-          </div>
-        )
-      )
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
-  })
-  test('explicit &', async () => {
+    const { container } = render(
+      <div className={cls1}>
+        <div className="some-class">
+          <div className="some-other-class" />
+        </div>
+      </div>
+    )
+    expect(container.firstChild).toMatchSnapshot()
+  })
+  test('explicit &', () => {
     flush()
     const cls1 = css`
       &.another-class {
         display: flex;
       }
     `
-    const tree = (
-      await act(() =>
-        renderer.create(<div className={`${cls1} another-class`} />)
-      )
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={`${cls1} another-class`} />)
+    expect(container.firstChild).toMatchSnapshot()
     expect(sheet).toMatchSnapshot()
     flush()
   })
-  test('falsy property value in object', async () => {
+  test('falsy property value in object', () => {
     const cls = css({ display: 'flex', backgroundColor: undefined })
-    const tree = (
-      await act(() => renderer.create(<div className={cls} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('registered styles as nested selector value in object', async () => {
+  test('registered styles as nested selector value in object', () => {
     const cls = css({ display: 'flex', backgroundColor: 'hotpink' })
     const cls1 = css({ ':hover': cls })
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('composition stuff', async () => {
+  test('composition stuff', () => {
     const cls1 = css({ justifyContent: 'center' })
     const cls2 = css([cls1])
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
-    const tree2 = (
-      await act(() => renderer.create(<div className={cls2} />))
-    ).toJSON()
-    expect(tree2).toMatchSnapshot()
-  })
-  test('null rule', async () => {
+    const { container: container1 } = render(<div className={cls1} />)
+    expect(container1.firstChild).toMatchSnapshot()
+    const { container: container2 } = render(<div className={cls2} />)
+    expect(container2.firstChild).toMatchSnapshot()
+  })
+  test('null rule', () => {
     const cls1 = css()
 
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('css variables', async () => {
+  test('css variables', () => {
     const cls1 = css`
       --some-var: 1px;
       width: var(--some-var);
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('null value', async () => {
+  test('null value', () => {
     const cls1 = css(null)
 
     expect(
-      (await act(() => renderer.create(<div className={cls1} />))).toJSON()
+      render(<div className={cls1} />).container.firstChild
     ).toMatchSnapshot()
   })
 
-  test('flushes correctly', async () => {
+  test('flushes correctly', () => {
     const cls1 = css`
       display: flex;
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container: container1 } = render(<div className={cls1} />)
+    expect(container1.firstChild).toMatchSnapshot()
     flush()
-    const tree2 = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree2).toMatchSnapshot()
+    const { container: container2 } = render(<div className={cls1} />)
+    expect(container2.firstChild).toMatchSnapshot()
   })
-  test('media query specificity', async () => {
+  test('media query specificity', () => {
     flush()
     const cls = css`
       width: 32px;
@@ -366,40 +305,32 @@ describe('css', () => {
       }
     `
 
-    const tree = (
-      await act(() => renderer.create(<div className={cls} />))
-    ).toJSON()
+    const { container } = render(<div className={cls} />)
     expect(sheet).toMatchSnapshot()
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
     flush()
   })
-  test('weakmap', async () => {
+  test('weakmap', () => {
     const styles = { display: 'flex' }
     const cls1 = css(styles)
     const cls2 = css(styles)
-    const tree1 = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree1).toMatchSnapshot()
-    const tree2 = (
-      await act(() => renderer.create(<div className={cls2} />))
-    ).toJSON()
-    expect(tree2).toMatchSnapshot()
+    const { container: container1 } = render(<div className={cls1} />)
+    expect(container1.firstChild).toMatchSnapshot()
+    const { container: container2 } = render(<div className={cls2} />)
+    expect(container2.firstChild).toMatchSnapshot()
   })
 
-  test('manually use label property', async () => {
+  test('manually use label property', () => {
     flush()
     const cls1 = css`
       color: hotpink;
       label: wow;
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
     expect(sheet).toMatchSnapshot()
   })
-  test('multiline declaration', async () => {
+  test('multiline declaration', () => {
     /* eslint-disable prettier/prettier */
     const cls1 = css`
       display: grid;
@@ -410,12 +341,10 @@ describe('css', () => {
     `
     /* eslint-enable prettier/prettier */
 
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('multiline selector', async () => {
+  test('multiline selector', () => {
     /* eslint-disable prettier/prettier */
     const cls1 = css`
       .my-class:hover .its-child {
@@ -424,12 +353,10 @@ describe('css', () => {
     `
     /* eslint-enable prettier/prettier */
 
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('rule after media query', async () => {
+  test('rule after media query', () => {
     const cls1 = css`
       @media (min-width: 600px) {
         color: green;
@@ -438,12 +365,10 @@ describe('css', () => {
         color: hotpink;
       }
     `
-    const tree = (
-      await act(() => renderer.create(<div className={cls1} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls1} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('nested at rule', async () => {
+  test('nested at rule', () => {
     const cls = css({
       '@media (min-width: 980px)': {
         backgroundColor: 'blue',
@@ -453,18 +378,14 @@ describe('css', () => {
       }
     })
     // this works correctly but `css` doesn't print it correctly so the snapshot doesn't look correct
-    const tree = (
-      await act(() => renderer.create(<div className={cls} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('array fallback', async () => {
+  test('array fallback', () => {
     const cls = css({
       color: ['yellow', 'hotpink']
     })
-    const tree = (
-      await act(() => renderer.create(<div className={cls} />))
-    ).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { container } = render(<div className={cls} />)
+    expect(container.firstChild).toMatchSnapshot()
   })
 })
diff --git a/packages/styled/test/prop-filtering.test.js b/packages/styled/test/prop-filtering.test.js
index b077d5d6b6..927f3fde68 100644
--- a/packages/styled/test/prop-filtering.test.js
+++ b/packages/styled/test/prop-filtering.test.js
@@ -158,7 +158,7 @@ test('basic SVG attributes survive prop filtering', () => {
 }
 
 <circle
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
   cx="65.011902"
   cy="49.047619"
   r="9.8273811"

From d0ea8cd6ab845ed4550461ae41a23a6bfd6003c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 22:59:59 +0100
Subject: [PATCH 25/54] moar

---
 .../test/__snapshots__/keyframes.test.js.snap |  4 +-
 packages/css/test/keyframes.test.js           | 69 ++++++++-----------
 2 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/packages/css/test/__snapshots__/keyframes.test.js.snap b/packages/css/test/__snapshots__/keyframes.test.js.snap
index f0012fdc76..190c314456 100644
--- a/packages/css/test/__snapshots__/keyframes.test.js.snap
+++ b/packages/css/test/__snapshots__/keyframes.test.js.snap
@@ -23,7 +23,7 @@ exports[`keyframes keyframes with interpolation 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </h1>
@@ -72,7 +72,7 @@ exports[`keyframes renders 1`] = `
 }
 
 <h1
-  className="emotion-0"
+  class="emotion-0"
 >
   hello world
 </h1>
diff --git a/packages/css/test/keyframes.test.js b/packages/css/test/keyframes.test.js
index 984a16145a..24fb200954 100644
--- a/packages/css/test/keyframes.test.js
+++ b/packages/css/test/keyframes.test.js
@@ -1,14 +1,13 @@
 import 'test-utils/setup-env'
 import React from 'react'
-import { act } from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { keyframes, flush, css } from '@emotion/css'
 
 describe('keyframes', () => {
   afterEach(() => {
     flush()
   })
-  test('renders', async () => {
+  test('renders', () => {
     const bounce = keyframes`
       from, 20%, 53%, 80%, to {
         animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@@ -30,47 +29,39 @@ describe('keyframes', () => {
       }
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <h1
-            className={css`
-              animation: ${bounce} 2s linear infinite;
-            `}
-          >
-            hello world
-          </h1>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <h1
+        className={css`
+          animation: ${bounce} 2s linear infinite;
+        `}
+      >
+        hello world
+      </h1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
-  test('keyframes with interpolation', async () => {
+  test('keyframes with interpolation', () => {
     const endingRotation = '360deg'
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <h1
-            className={css`
-              animation: ${keyframes`
-                from {
-                  transform: rotate(0deg);
-                }
+    const { container } = render(
+      <h1
+        className={css`
+          animation: ${keyframes`
+            from {
+              transform: rotate(0deg);
+            }
 
-                to {
-                  transform: rotate(${endingRotation});
-                }
-              `} 2s linear infinite;
-            `}
-          >
-            hello world
-          </h1>
-        )
-      )
-    ).toJSON()
+            to {
+              transform: rotate(${endingRotation});
+            }
+          `} 2s linear infinite;
+        `}
+      >
+        hello world
+      </h1>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 })

From a055fc8685491c4b2ba7ead49d31f188d9b8f25f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 23:04:24 +0100
Subject: [PATCH 26/54] moar

---
 .../__snapshots__/label-pattern.test.js.snap  |  2 +-
 packages/css/test/label-pattern.test.js       | 23 ++++-----
 packages/jest/README.md                       | 50 ++++++++++---------
 .../__tests__/__snapshots__/keyframes.js.snap | 18 +++----
 packages/react/__tests__/keyframes.js         | 14 ++----
 5 files changed, 49 insertions(+), 58 deletions(-)

diff --git a/packages/css/test/__snapshots__/label-pattern.test.js.snap b/packages/css/test/__snapshots__/label-pattern.test.js.snap
index be38536610..7d06aae22f 100644
--- a/packages/css/test/__snapshots__/label-pattern.test.js.snap
+++ b/packages/css/test/__snapshots__/label-pattern.test.js.snap
@@ -8,7 +8,7 @@ exports[`label pattern input + label styled 1`] = `
 
 <div>
   <input
-    className="emotion-0 emotion-1"
+    class="emotion-0 emotion-1"
   />
   <label>
     Label
diff --git a/packages/css/test/label-pattern.test.js b/packages/css/test/label-pattern.test.js
index 011e19ebf4..428c7bdfa8 100644
--- a/packages/css/test/label-pattern.test.js
+++ b/packages/css/test/label-pattern.test.js
@@ -1,14 +1,13 @@
 import 'test-utils/setup-env'
 import React from 'react'
-import { act } from 'react'
+import { render } from '@testing-library/react'
 import styled from '@emotion/styled'
-import renderer from 'react-test-renderer'
 import { flush } from '@emotion/css'
 
 describe('label pattern', () => {
   afterEach(() => flush())
 
-  test('input + label styled', async () => {
+  test('input + label styled', () => {
     const Input = styled.input`
       & + label::after {
         color: pink;
@@ -16,17 +15,13 @@ describe('label pattern', () => {
       }
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div>
-            <Input />
-            <label>Label</label>
-          </div>
-        )
-      )
-    ).toJSON()
+    const { container } = render(
+      <div>
+        <Input />
+        <label>Label</label>
+      </div>
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(container.firstChild).toMatchSnapshot()
   })
 })
diff --git a/packages/jest/README.md b/packages/jest/README.md
index b7c28917e8..675acceaf4 100644
--- a/packages/jest/README.md
+++ b/packages/jest/README.md
@@ -26,7 +26,7 @@ Or you can add the serializer via the `expect.addSnapshotSerializer` method like
 
 ```jsx
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { createSerializer } from '@emotion/jest'
 import styled from '@emotion/styled'
 
@@ -37,9 +37,9 @@ test('renders with correct styles', () => {
     float: left;
   `
 
-  const tree = renderer.create(<H1>hello world</H1>).toJSON()
+  const { container } = render(<H1>hello world</H1>)
 
-  expect(tree).toMatchSnapshot()
+  expect(container).toMatchSnapshot()
 })
 ```
 
@@ -99,7 +99,7 @@ To make more explicit assertions when testing your styled components you can use
 
 ```jsx
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { matchers } from '@emotion/jest'
 import styled from '@emotion/styled'
 
@@ -128,17 +128,15 @@ test('renders with correct styles', () => {
     }
   `
 
-  const tree = renderer
-    .create(
-      <Div>
-        <Svg />
-        <span>Test</span>
-      </Div>
-    )
-    .toJSON()
-
-  expect(tree).toHaveStyleRule('float', 'left')
-  expect(tree).not.toHaveStyleRule('height', '100%')
+  const { container } = render(
+    <Div>
+      <Svg />
+      <span>Test</span>
+    </Div>
+  )
+
+  expect(container.firstChild).toHaveStyleRule('float', 'left')
+  expect(container.firstChild).not.toHaveStyleRule('height', '100%')
 })
 ```
 
@@ -147,22 +145,22 @@ You can provide additional options for `toHaveStyleRule` matcher.
 where style rule should be found.
 
 ```js
-expect(tree).toHaveStyleRule('width', '50px', { target: ':hover' })
+expect(element).toHaveStyleRule('width', '50px', { target: ':hover' })
 ```
 
 ```js
-expect(tree).toHaveStyleRule('color', 'yellow', { target: 'span' })
+expect(element).toHaveStyleRule('color', 'yellow', { target: 'span' })
 ```
 
 ```js
-expect(tree).toHaveStyleRule('fill', 'green', { target: `${Svg}` })
+expect(element).toHaveStyleRule('fill', 'green', { target: `${Svg}` })
 ```
 
 `media` - specifies the media rule where the matcher
 should look for the style property.
 
 ```js
-expect(tree).toHaveStyleRule('font-size', '14px', {
+expect(element).toHaveStyleRule('font-size', '14px', {
   media: 'screen and (max-width: 1200px)'
 })
 ```
@@ -171,7 +169,7 @@ Use `media` and `target` options to assert on rules within media queries and to
 
 ```jsx
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { matchers } from '@emotion/jest'
 import styled from '@emotion/styled'
 
@@ -195,11 +193,15 @@ test('renders with correct link styles', () => {
     }
   `
 
-  const tree = renderer.create(<Container>hello world</Container>).toJSON()
+  const { container } = render(<Container>hello world</Container>)
 
-  expect(tree).toHaveStyleRule('color', 'yellow', { target: /a$/ })
-  expect(tree).toHaveStyleRule('color', 'black', { target: 'a:hover' })
-  expect(tree).toHaveStyleRule('font-size', '16px', {
+  expect(container.firstChild).toHaveStyleRule('color', 'yellow', {
+    target: /a$/
+  })
+  expect(container.firstChild).toHaveStyleRule('color', 'black', {
+    target: 'a:hover'
+  })
+  expect(container.firstChild).toHaveStyleRule('font-size', '16px', {
     media: '(min-width: 768px)'
   })
 })
diff --git a/packages/react/__tests__/__snapshots__/keyframes.js.snap b/packages/react/__tests__/__snapshots__/keyframes.js.snap
index 80d81c0193..9e1bac3eee 100644
--- a/packages/react/__tests__/__snapshots__/keyframes.js.snap
+++ b/packages/react/__tests__/__snapshots__/keyframes.js.snap
@@ -17,7 +17,7 @@ exports[`keyframes basic 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   animation-1bi8wtt
 </div>
@@ -58,7 +58,7 @@ exports[`keyframes keyframes used in css call 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   animation-1bi8wtt
 </div>
@@ -101,7 +101,7 @@ exports[`keyframes multiple keyframes object 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   animation-1bi8wtt
 </div>
@@ -134,7 +134,7 @@ exports[`keyframes object 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   animation-o4c3es
 </div>
@@ -167,7 +167,7 @@ exports[`keyframes object with animation and opaque keyframes as value 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   animation-1bi8wtt
 </div>
@@ -200,7 +200,7 @@ exports[`keyframes object with animationName and opaque keyframes as value 1`] =
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   animation-1bi8wtt
 </div>
@@ -233,7 +233,7 @@ exports[`keyframes object with animationName and string keyframes as value 1`] =
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   animation-1bi8wtt
 </div>
@@ -264,7 +264,7 @@ exports[`keyframes object with string keyframes 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   animation-1bi8wtt
 </div>
@@ -295,7 +295,7 @@ exports[`keyframes without css call 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   animation-1bi8wtt
 </div>
diff --git a/packages/react/__tests__/keyframes.js b/packages/react/__tests__/keyframes.js
index 000dda2d6e..6848cafb08 100644
--- a/packages/react/__tests__/keyframes.js
+++ b/packages/react/__tests__/keyframes.js
@@ -3,24 +3,18 @@ import 'test-utils/setup-env'
 import { jsx, css, keyframes } from '@emotion/react'
 import { safeQuerySelector, throwIfFalsy } from 'test-utils'
 import cases from 'jest-in-case'
-import * as renderer from 'react-test-renderer'
-import { act } from 'react'
+import { render } from '@testing-library/react'
 import createCache from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
 
 cases(
   'keyframes',
-  async opts => {
+  opts => {
     safeQuerySelector('head').innerHTML = ''
     let cache = createCache({ key: 'css' })
     expect(
-      (
-        await act(() =>
-          renderer.create(
-            <CacheProvider value={cache}>{opts.render()}</CacheProvider>
-          )
-        )
-      ).toJSON()
+      render(<CacheProvider value={cache}>{opts.render()}</CacheProvider>)
+        .container.firstChild
     ).toMatchSnapshot()
     expect(
       throwIfFalsy(cache.sheet.tags).map(tag => tag.textContent || '')

From e52d3e696875fc20c6bb57373cf12f5ac378b813 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 23:10:45 +0100
Subject: [PATCH 27/54] moar

---
 .../__snapshots__/css-cache-hash.js.snap      |  2 +-
 .../__tests__/__snapshots__/prod.js.snap      | 10 ++++
 packages/react/__tests__/css-cache-hash.js    | 17 +++---
 packages/react/__tests__/custom-cache.js      | 19 +++----
 packages/react/__tests__/prod.js              |  6 +-
 .../test/__snapshots__/theming.test.js.snap   |  8 +--
 packages/styled/test/theming.test.js          | 56 ++++++++-----------
 7 files changed, 54 insertions(+), 64 deletions(-)
 create mode 100644 packages/react/__tests__/__snapshots__/prod.js.snap

diff --git a/packages/react/__tests__/__snapshots__/css-cache-hash.js.snap b/packages/react/__tests__/__snapshots__/css-cache-hash.js.snap
index 9abee3ee10..4a95ec99d8 100644
--- a/packages/react/__tests__/__snapshots__/css-cache-hash.js.snap
+++ b/packages/react/__tests__/__snapshots__/css-cache-hash.js.snap
@@ -7,7 +7,7 @@ exports[`does not rehash if value is css call return value 1`] = `
 
 <div>
   <div
-    className="emotion-0"
+    class="emotion-0"
   />
 </div>
 `;
diff --git a/packages/react/__tests__/__snapshots__/prod.js.snap b/packages/react/__tests__/__snapshots__/prod.js.snap
new file mode 100644
index 0000000000..c2a3bbbcd7
--- /dev/null
+++ b/packages/react/__tests__/__snapshots__/prod.js.snap
@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`props work 1`] = `
+<div>
+  <div
+    class="css-1lrxbo5"
+    hidden=""
+  />
+</div>
+`;
diff --git a/packages/react/__tests__/css-cache-hash.js b/packages/react/__tests__/css-cache-hash.js
index 8eff39a076..630af62963 100644
--- a/packages/react/__tests__/css-cache-hash.js
+++ b/packages/react/__tests__/css-cache-hash.js
@@ -2,25 +2,22 @@
 import 'test-utils/setup-env'
 import { jsx, css } from '@emotion/react'
 import { serializeStyles } from '@emotion/serialize'
-import * as renderer from 'react-test-renderer'
-import { act } from 'react'
+import { render } from '@testing-library/react'
 const utils = require('@emotion/utils')
 
 const spy = jest.spyOn(utils, 'insertStyles')
 
-test('does not rehash if value is css call return value', async () => {
+test('does not rehash if value is css call return value', () => {
   const val = css`
     color: hotpink;
   `
-  const tree = await act(() =>
-    renderer.create(
-      <div>
-        <div css={val} />
-      </div>
-    )
+  const { container } = render(
+    <div>
+      <div css={val} />
+    </div>
   )
   expect(serializeStyles([val])).toBe(val)
 
   expect(spy.mock.calls[0][1]).toBe(val)
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
diff --git a/packages/react/__tests__/custom-cache.js b/packages/react/__tests__/custom-cache.js
index dd5065966e..b614d270a7 100644
--- a/packages/react/__tests__/custom-cache.js
+++ b/packages/react/__tests__/custom-cache.js
@@ -1,9 +1,8 @@
 /** @jsx jsx */
-import { act } from 'react'
 import createCache from '@emotion/cache'
 import { CacheProvider, Global, jsx } from '@emotion/react'
 import { StyleSheet } from '@emotion/sheet'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import { safeQuerySelector } from 'test-utils'
 import 'test-utils/setup-env'
 
@@ -13,27 +12,23 @@ function stylisPlugin(element) {
   }
 }
 
-async function render(ele) {
-  return (await act(() => renderer.create(ele))).toJSON()
-}
-
 beforeEach(() => {
   safeQuerySelector('head').innerHTML = ''
   safeQuerySelector('body').innerHTML = ''
 })
 
-test('with custom plugins', async () => {
+test('with custom plugins', () => {
   let cache = createCache({
     key: 'custom-plugins',
     stylisPlugins: [stylisPlugin]
   })
 
   expect(
-    await render(
+    render(
       <CacheProvider value={cache}>
         <div css={{ display: 'flex', color: 'blue' }} />
       </CacheProvider>
-    )
+    ).container.firstChild
   ).toMatchInlineSnapshot(`
     .emotion-0 {
       display: flex;
@@ -41,12 +36,12 @@ test('with custom plugins', async () => {
     }
 
     <div
-      className="emotion-0"
+      class="emotion-0"
     />
   `)
 })
 
-test('Global should "inherit" sheet class from the cache', async () => {
+test('Global should "inherit" sheet class from the cache', () => {
   // https://github.com/emotion-js/emotion/issues/2675
   let cache = createCache({
     key: 'test',
@@ -62,7 +57,7 @@ test('Global should "inherit" sheet class from the cache', async () => {
     container: safeQuerySelector('head')
   })
 
-  await render(
+  render(
     <CacheProvider value={cache}>
       <div css={{ color: 'hotpink' }} />
       <Global styles={{ body: { width: '0' } }} />
diff --git a/packages/react/__tests__/prod.js b/packages/react/__tests__/prod.js
index ae3ec5895d..c4b2a9126e 100644
--- a/packages/react/__tests__/prod.js
+++ b/packages/react/__tests__/prod.js
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 
 gate({ development: false }, ({ test }) => {
   test('css works', () => {
@@ -16,7 +16,7 @@ gate({ development: false }, ({ test }) => {
   })
 
   test('props work', () => {
-    let tree = renderer.create(<div css={{ color: 'hotpink' }} hidden />)
-    expect(tree.toJSON().props.hidden).toBe(true)
+    let { container } = render(<div css={{ color: 'hotpink' }} hidden />)
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/packages/styled/test/__snapshots__/theming.test.js.snap b/packages/styled/test/__snapshots__/theming.test.js.snap
index a85b5ae7a7..1608d2f475 100644
--- a/packages/styled/test/__snapshots__/theming.test.js.snap
+++ b/packages/styled/test/__snapshots__/theming.test.js.snap
@@ -7,7 +7,7 @@ exports[`theme prop exists without ThemeProvider 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 />
 `;
 
@@ -18,7 +18,7 @@ exports[`theme prop exists without ThemeProvider with a theme prop on the compon
 }
 
 <div
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 />
 `;
 
@@ -28,7 +28,7 @@ exports[`theme with react-test-renderer 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   this will be pink
 </div>
@@ -45,7 +45,7 @@ exports[`themes 1`] = `
 }
 
 <span
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello world
 </span>
diff --git a/packages/styled/test/theming.test.js b/packages/styled/test/theming.test.js
index 89dc8f3213..b01b7a68a3 100644
--- a/packages/styled/test/theming.test.js
+++ b/packages/styled/test/theming.test.js
@@ -1,28 +1,23 @@
 import 'test-utils/setup-env'
 import React from 'react'
-import { act } from 'react'
-import * as renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 import styled from '@emotion/styled'
 import { css, ThemeProvider } from '@emotion/react'
 
-test('theme with react-test-renderer', async () => {
+test('theme with react-test-renderer', () => {
   const Div = styled.div`
     color: ${props => props.theme.primary};
   `
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <ThemeProvider theme={{ primary: 'pink' }}>
-          <Div>this will be pink</Div>
-        </ThemeProvider>
-      )
-    )
-  ).toJSON()
+  const { container } = render(
+    <ThemeProvider theme={{ primary: 'pink' }}>
+      <Div>this will be pink</Div>
+    </ThemeProvider>
+  )
 
-  expect(tree).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('themes', async () => {
+test('themes', () => {
   const theme = { white: '#f8f9fa', purple: '#8c81d8', gold: '#ffd43b' }
 
   const fontSize = '20px'
@@ -50,35 +45,28 @@ test('themes', async () => {
     font-size: 32px;
   `
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <ThemeProvider theme={theme}>
-          <H2>hello world</H2>
-        </ThemeProvider>
-      )
-    )
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <ThemeProvider theme={theme}>
+      <H2>hello world</H2>
+    </ThemeProvider>
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('theme prop exists without ThemeProvider', async () => {
+test('theme prop exists without ThemeProvider', () => {
   const SomeComponent = styled.div`
     color: ${props => props.theme.color || 'green'};
     background-color: yellow;
   `
-  const tree = (await act(() => renderer.create(<SomeComponent />))).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(<SomeComponent />)
+  expect(container.firstChild).toMatchSnapshot()
 })
-test('theme prop exists without ThemeProvider with a theme prop on the component', async () => {
+test('theme prop exists without ThemeProvider with a theme prop on the component', () => {
   const SomeComponent = styled.div`
     color: ${props => props.theme.color || 'green'};
     background-color: yellow;
   `
-  const tree = (
-    await act(() =>
-      renderer.create(<SomeComponent theme={{ color: 'hotpink' }} />)
-    )
-  ).toJSON()
-  expect(tree).toMatchSnapshot()
+  const { container } = render(<SomeComponent theme={{ color: 'hotpink' }} />)
+  expect(container.firstChild).toMatchSnapshot()
 })

From 138227a74ca4b75e48d534d9f930ae77b470a785 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 23:16:18 +0100
Subject: [PATCH 28/54] moar

---
 .../test/__snapshots__/printer.test.js.snap   |  12 +--
 packages/jest/test/printer.test.js            | 100 +++++++-----------
 .../component-selector.test.js.snap           |  24 ++---
 .../styled/test/component-selector.test.js    |  83 ++++++---------
 4 files changed, 92 insertions(+), 127 deletions(-)

diff --git a/packages/jest/test/__snapshots__/printer.test.js.snap b/packages/jest/test/__snapshots__/printer.test.js.snap
index 0fd0f49acf..85f6444a1a 100644
--- a/packages/jest/test/__snapshots__/printer.test.js.snap
+++ b/packages/jest/test/__snapshots__/printer.test.js.snap
@@ -16,7 +16,7 @@ exports[`does not replace class names that are not from emotion 1`] = `
 }
 
 <div
-  className="net-42 net emotion-0"
+  class="net-42 net emotion-0"
 />"
 `;
 
@@ -40,10 +40,10 @@ exports[`jest-emotion with DOM elements disabled replaces class names and insert
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <svg
-    className="emotion-1"
+    class="emotion-1"
   />
 </div>"
 `;
@@ -76,10 +76,10 @@ exports[`jest-emotion with dom elements replaces class names and inserts styles
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <svg
-    className="emotion-1"
+    class="emotion-1"
   />
 </div>"
 `;
@@ -90,6 +90,6 @@ exports[`prints speedy styles 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />"
 `;
diff --git a/packages/jest/test/printer.test.js b/packages/jest/test/printer.test.js
index e4d7219ca6..33227d3b20 100644
--- a/packages/jest/test/printer.test.js
+++ b/packages/jest/test/printer.test.js
@@ -23,18 +23,14 @@ describe('jest-emotion with dom elements', () => {
     width: 100%;
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', async () => {
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div css={divStyle}>
-            <svg css={svgStyle} />
-          </div>
-        )
-      )
-    ).toJSON()
-
-    const output = prettyFormat(tree, {
+  test('replaces class names and inserts styles into React test component snapshots', () => {
+    const { container } = render(
+      <div css={divStyle}>
+        <svg css={svgStyle} />
+      </div>
+    )
+
+    const output = prettyFormat(container.firstChild, {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
     })
 
@@ -68,18 +64,14 @@ describe('jest-emotion with DOM elements disabled', () => {
     width: 100%;
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', async () => {
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div css={divStyle}>
-            <svg css={svgStyle} />
-          </div>
-        )
-      )
-    ).toJSON()
-
-    const output = prettyFormat(tree, {
+  test('replaces class names and inserts styles into React test component snapshots', () => {
+    const { container } = render(
+      <div css={divStyle}>
+        <svg css={svgStyle} />
+      </div>
+    )
+
+    const output = prettyFormat(container.firstChild, {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
     })
 
@@ -127,21 +119,17 @@ test('allows to opt-out from styles printing', () => {
   expect(output).toMatchSnapshot()
 })
 
-test('does not replace class names that are not from emotion', async () => {
-  let tree = (
-    await act(() =>
-      renderer.create(
-        <div
-          className="net-42 net"
-          css={css`
-            color: darkorchid;
-          `}
-        />
-      )
-    )
-  ).toJSON()
+test('does not replace class names that are not from emotion', () => {
+  let { container } = render(
+    <div
+      className="net-42 net"
+      css={css`
+        color: darkorchid;
+      `}
+    />
+  )
 
-  const output = prettyFormat(tree, {
+  const output = prettyFormat(container.firstChild, {
     plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
   })
 
@@ -157,12 +145,10 @@ describe('jest-emotion with nested selectors', () => {
     }
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', async () => {
-    const tree = (
-      await act(() => renderer.create(<div css={divStyle} />))
-    ).toJSON()
+  test('replaces class names and inserts styles into React test component snapshots', () => {
+    const { container } = render(<div css={divStyle} />)
 
-    const output = prettyFormat(tree, {
+    const output = prettyFormat(container.firstChild, {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
     })
 
@@ -175,32 +161,28 @@ header .emotion-0 {
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />`)
   })
 })
 
-test('prints speedy styles', async () => {
+test('prints speedy styles', () => {
   const speedyCache = createCache({
     key: 'speedy-key',
     speedy: true
   })
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <CacheProvider value={speedyCache}>
-          <div
-            css={css`
-              color: hotpink;
-            `}
-          />
-        </CacheProvider>
-      )
-    )
-  ).toJSON()
+  const { container } = render(
+    <CacheProvider value={speedyCache}>
+      <div
+        css={css`
+          color: hotpink;
+        `}
+      />
+    </CacheProvider>
+  )
 
   expect(
-    prettyFormat(tree, {
+    prettyFormat(container.firstChild, {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
     })
   ).toMatchSnapshot()
diff --git a/packages/styled/test/__snapshots__/component-selector.test.js.snap b/packages/styled/test/__snapshots__/component-selector.test.js.snap
index d9181b3f63..2c3b80fd73 100644
--- a/packages/styled/test/__snapshots__/component-selector.test.js.snap
+++ b/packages/styled/test/__snapshots__/component-selector.test.js.snap
@@ -17,11 +17,11 @@ exports[`component as selector (object syntax) 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello 
   <h1
-    className="emotion-2 emotion-3"
+    class="emotion-2 emotion-3"
   >
     This will be green
   </h1>
@@ -46,11 +46,11 @@ exports[`component as selector 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
+  class="emotion-0 emotion-1"
 >
   hello 
   <h1
-    className="emotion-2 emotion-3"
+    class="emotion-2 emotion-3"
   >
     This will be green
   </h1>
@@ -75,13 +75,13 @@ exports[`component as selector function interpolation (object syntax) 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
-  fontSize={10}
+  class="emotion-0 emotion-1"
+  font-size="10"
 >
   hello 
   <h1
-    className="emotion-2 emotion-3"
-    fontSize={20}
+    class="emotion-2 emotion-3"
+    font-size="20"
   >
     This will be green
   </h1>
@@ -106,13 +106,13 @@ exports[`component as selector function interpolation 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
-  fontSize={10}
+  class="emotion-0 emotion-1"
+  font-size="10"
 >
   hello 
   <h1
-    className="emotion-2 emotion-3"
-    fontSize={20}
+    class="emotion-2 emotion-3"
+    font-size="20"
   >
     This will be green
   </h1>
diff --git a/packages/styled/test/component-selector.test.js b/packages/styled/test/component-selector.test.js
index 6a8c191c75..95385db6f1 100644
--- a/packages/styled/test/component-selector.test.js
+++ b/packages/styled/test/component-selector.test.js
@@ -1,10 +1,9 @@
 import 'test-utils/setup-env'
 import React from 'react'
-import { act } from 'react'
+import { render } from '@testing-library/react'
 import styled from '@emotion/styled'
-import * as renderer from 'react-test-renderer'
 
-test('component as selector', async () => {
+test('component as selector', () => {
   const fontSize = '20px'
   const H1 = styled.h1`
     font-size: ${fontSize};
@@ -17,20 +16,16 @@ test('component as selector', async () => {
     }
   `
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <Thing>
-          hello <H1>This will be green</H1> world
-        </Thing>
-      )
-    )
-  ).toJSON()
-
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <Thing>
+      hello <H1>This will be green</H1> world
+    </Thing>
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('component as selector function interpolation', async () => {
+test('component as selector function interpolation', () => {
   const H1 = styled.h1`
     font-size: ${props => props.fontSize}px;
   `
@@ -42,20 +37,16 @@ test('component as selector function interpolation', async () => {
     }
   `
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <Thing fontSize={10}>
-          hello <H1 fontSize={20}>This will be green</H1> world
-        </Thing>
-      )
-    )
-  ).toJSON()
-
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <Thing fontSize={10}>
+      hello <H1 fontSize={20}>This will be green</H1> world
+    </Thing>
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('component as selector (object syntax)', async () => {
+test('component as selector (object syntax)', () => {
   const fontSize = '20px'
   const H1 = styled('h1')({ fontSize })
 
@@ -66,20 +57,16 @@ test('component as selector (object syntax)', async () => {
     }
   })
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <Thing>
-          hello <H1>This will be green</H1> world
-        </Thing>
-      )
-    )
-  ).toJSON()
-
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <Thing>
+      hello <H1>This will be green</H1> world
+    </Thing>
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('component as selector function interpolation (object syntax)', async () => {
+test('component as selector function interpolation (object syntax)', () => {
   const H1 = styled('h1')(props => ({
     fontSize: `${props.fontSize}px`
   }))
@@ -91,15 +78,11 @@ test('component as selector function interpolation (object syntax)', async () =>
     }
   })
 
-  const tree = (
-    await act(() =>
-      renderer.create(
-        <Thing fontSize={10}>
-          hello <H1 fontSize={20}>This will be green</H1> world
-        </Thing>
-      )
-    )
-  ).toJSON()
-
-  expect(tree).toMatchSnapshot()
+  const { container } = render(
+    <Thing fontSize={10}>
+      hello <H1 fontSize={20}>This will be green</H1> world
+    </Thing>
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
 })

From 229812d3a12e874e91e6684cf0f231c08d1eff06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 23:18:25 +0100
Subject: [PATCH 29/54] more

---
 packages/css/test/__snapshots__/warnings.test.js.snap |  2 +-
 packages/css/test/warnings.test.js                    | 11 ++++-------
 packages/jest/test/printer.test.js                    |  2 --
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/css/test/__snapshots__/warnings.test.js.snap b/packages/css/test/__snapshots__/warnings.test.js.snap
index cb3ceae100..8aa3245bc9 100644
--- a/packages/css/test/__snapshots__/warnings.test.js.snap
+++ b/packages/css/test/__snapshots__/warnings.test.js.snap
@@ -26,6 +26,6 @@ exports[`does not warn when valid values are passed for the content property 1`]
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
diff --git a/packages/css/test/warnings.test.js b/packages/css/test/warnings.test.js
index 1dadd2f1e7..b8e6f7808f 100644
--- a/packages/css/test/warnings.test.js
+++ b/packages/css/test/warnings.test.js
@@ -2,8 +2,7 @@ import 'test-utils/setup-env'
 import { css } from '@emotion/css'
 import createCss from '@emotion/css/create-instance'
 import React from 'react'
-import { act } from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
 
 console.error = jest.fn()
 
@@ -35,12 +34,10 @@ afterEach(() => {
   jest.clearAllMocks()
 })
 
-test('does not warn when valid values are passed for the content property', async () => {
+test('does not warn when valid values are passed for the content property', () => {
   const cls = css(validValues.map(value => ({ content: value })))
   expect(console.error).not.toBeCalled()
-  expect(
-    (await act(() => renderer.create(<div className={cls} />))).toJSON()
-  ).toMatchSnapshot()
+  expect(render(<div className={cls} />).container.firstChild).toMatchSnapshot()
 })
 
 const invalidValues = ['this is not valid', '']
@@ -48,7 +45,7 @@ const invalidValues = ['this is not valid', '']
 test('does warn when invalid values are passed for the content property', () => {
   invalidValues.forEach(value => {
     expect(() =>
-      act(() => renderer.create(<div className={css({ content: value })} />))
+      render(<div className={css({ content: value })} />)
     ).toThrowError(
       `You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\``
     )
diff --git a/packages/jest/test/printer.test.js b/packages/jest/test/printer.test.js
index 33227d3b20..3289885a5c 100644
--- a/packages/jest/test/printer.test.js
+++ b/packages/jest/test/printer.test.js
@@ -1,7 +1,5 @@
 import React from 'react'
-import { act } from 'react'
 import 'test-utils/setup-env'
-import renderer from 'react-test-renderer'
 import prettyFormat from 'pretty-format'
 /** @jsx jsx */
 import { css, jsx, CacheProvider } from '@emotion/react'

From 1ad40d23432062981583b89bc2211af955eecde9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 23:24:31 +0100
Subject: [PATCH 30/54] more

---
 .../react/__tests__/__snapshots__/css.js.snap |  50 ++-
 packages/react/__tests__/css.js               | 342 ++++++++----------
 2 files changed, 179 insertions(+), 213 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/css.js.snap b/packages/react/__tests__/__snapshots__/css.js.snap
index 2acf8a0d1d..5d97fd568a 100644
--- a/packages/react/__tests__/__snapshots__/css.js.snap
+++ b/packages/react/__tests__/__snapshots__/css.js.snap
@@ -1,26 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`applies class when css prop is set to nil on wrapper component 1`] = `
-[
-  .emotion-0 {
+.emotion-0 {
   color: hotpink;
 }
 
-<button
-    className="emotion-0"
+<div>
+  <button
+    class="emotion-0"
   >
     I'm hotpink!
-  </button>,
-  .emotion-0 {
-  color: hotpink;
-}
-
-<button
-    className="emotion-0"
+  </button>
+  <button
+    class="emotion-0"
   >
     I'm hotpink too!
-  </button>,
-]
+  </button>
+</div>
 `;
 
 exports[`array fallback (using camelCased property) 1`] = `
@@ -31,7 +27,7 @@ exports[`array fallback (using camelCased property) 1`] = `
 
 <div>
   <div
-    className="emotion-0"
+    class="emotion-0"
   >
     something
   </div>
@@ -46,7 +42,7 @@ exports[`array fallback 1`] = `
 
 <div>
   <div
-    className="emotion-0"
+    class="emotion-0"
   >
     something
   </div>
@@ -60,7 +56,7 @@ exports[`child selector array 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -70,7 +66,7 @@ exports[`css call composition 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -81,7 +77,7 @@ exports[`handles camelCased custom properties in object styles properly 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -94,7 +90,7 @@ exports[`handles composition of an array css prop containing no final semi with
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   I'm hotpink on the green background.
 </div>
@@ -107,7 +103,7 @@ exports[`handles composition of styles without a final semi in a declaration blo
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   I'm hotpink on the green background.
 </div>
@@ -120,7 +116,7 @@ exports[`label in css call 1`] = `
 
 <div>
   <div
-    className="emotion-0"
+    class="emotion-0"
   >
     something
   </div>
@@ -141,7 +137,7 @@ exports[`nested at rule 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   something
 </div>
@@ -154,7 +150,7 @@ exports[`object with false 1`] = `
 
 <div>
   <div
-    className="emotion-0"
+    class="emotion-0"
   >
     something
   </div>
@@ -169,7 +165,7 @@ exports[`overwrite styles from parent 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -189,7 +185,7 @@ exports[`theming with the array css prop 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -199,7 +195,7 @@ exports[`theming with the css prop 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -213,7 +209,7 @@ exports[`thing 1`] = `
 
 <div>
   <div
-    className="emotion-0"
+    class="emotion-0"
   >
     something
   </div>
diff --git a/packages/react/__tests__/css.js b/packages/react/__tests__/css.js
index 2aa83cb024..5e1a495c51 100644
--- a/packages/react/__tests__/css.js
+++ b/packages/react/__tests__/css.js
@@ -2,10 +2,8 @@
 import 'test-utils/setup-env'
 import { safeQuerySelector } from 'test-utils'
 import React from 'react'
-import { act } from 'react'
 import { jsx, css, Global, CacheProvider, ThemeProvider } from '@emotion/react'
 import { render } from '@testing-library/react'
-import renderer from 'react-test-renderer'
 import createCache from '@emotion/cache'
 
 console.error = jest.fn()
@@ -27,86 +25,74 @@ const SomeComponent = (props /*: { lol: true } */) => (props.lol ? 'yes' : 'no')
 // and have the css prop passed to them don't have type errors
 ;<SomeComponent /> // eslint-disable-line no-unused-expressions
 
-test('thing', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <div>
-        <div css={{ display: 'flex' }}>something</div>
-      </div>
-    )
+test('thing', () => {
+  const { container } = render(
+    <div>
+      <div css={{ display: 'flex' }}>something</div>
+    </div>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('css call composition', async () => {
+test('css call composition', () => {
   let first = css`
     color: hotpink;
   `
-  let tree = await act(() =>
-    renderer.create(<div css={css({ ':hover': first })} />)
-  )
+  let { container } = render(<div css={css({ ':hover': first })} />)
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('theming with the css prop', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <ThemeProvider theme={{ primary: 'hotpink' }}>
-        <div css={theme => ({ color: theme.primary })} />
-      </ThemeProvider>
-    )
+test('theming with the css prop', () => {
+  const { container } = render(
+    <ThemeProvider theme={{ primary: 'hotpink' }}>
+      <div css={theme => ({ color: theme.primary })} />
+    </ThemeProvider>
   )
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('theming with the array css prop', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <ThemeProvider theme={{ primary: 'hotpink' }}>
-        <div css={[theme => ({ color: theme.primary }), { display: 'flex' }]} />
-      </ThemeProvider>
-    )
+test('theming with the array css prop', () => {
+  const { container } = render(
+    <ThemeProvider theme={{ primary: 'hotpink' }}>
+      <div css={[theme => ({ color: theme.primary }), { display: 'flex' }]} />
+    </ThemeProvider>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('object with false', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <div>
-        <div css={{ color: 'hotpink', display: false }}>something</div>
-      </div>
-    )
+test('object with false', () => {
+  const { container } = render(
+    <div>
+      <div css={{ color: 'hotpink', display: false }}>something</div>
+    </div>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('label in css call', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <div>
-        <div
-          css={css`
-            color: hotpink;
-            label: this-is-hotpink;
-          `}
-        >
-          something
-        </div>
+test('label in css call', () => {
+  const { container } = render(
+    <div>
+      <div
+        css={css`
+          color: hotpink;
+          label: this-is-hotpink;
+        `}
+      >
+        something
       </div>
-    )
+    </div>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('string as css prop throws', async () => {
+test('string as css prop throws', () => {
   expect(() => {
-    renderer.create(
+    render(
       <div>
         <div
           css={`
@@ -120,99 +106,93 @@ test('string as css prop throws', async () => {
   }).toThrowErrorMatchingSnapshot()
 })
 
-test('array fallback', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <div>
-        <div
-          css={{
-            color: ['green', 'hotpink']
-          }}
-        >
-          something
-        </div>
+test('array fallback', () => {
+  const { container } = render(
+    <div>
+      <div
+        css={{
+          color: ['green', 'hotpink']
+        }}
+      >
+        something
       </div>
-    )
+    </div>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('array fallback (using camelCased property)', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <div>
-        <div
-          css={{
-            backgroundColor: ['green', 'hotpink']
-          }}
-        >
-          something
-        </div>
+test('array fallback (using camelCased property)', () => {
+  const { container } = render(
+    <div>
+      <div
+        css={{
+          backgroundColor: ['green', 'hotpink']
+        }}
+      >
+        something
       </div>
-    )
+    </div>
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
+})
+
+test('nested at rule', () => {
+  const { container } = render(
+    <div
+      css={{
+        '@media (min-width: 980px)': {
+          backgroundColor: 'blue',
+          '@supports (width: 100vw)': {
+            backgroundColor: 'red'
+          }
+        }
+      }}
+    >
+      something
+    </div>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('nested at rule', async () => {
-  const tree = await act(() =>
-    renderer.create(
+test('can set speedy via custom cache', () => {
+  let cache = createCache({ key: 'speedy-test', speedy: true })
+
+  render(
+    <CacheProvider value={cache}>
       <div
         css={{
-          '@media (min-width: 980px)': {
-            backgroundColor: 'blue',
-            '@supports (width: 100vw)': {
-              backgroundColor: 'red'
-            }
-          }
+          color: 'hotpink'
         }}
       >
+        <span css={{ color: 'yellow' }}>wow</span>
         something
       </div>
-    )
+    </CacheProvider>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
-})
-
-test('can set speedy via custom cache', async () => {
-  let cache = createCache({ key: 'speedy-test', speedy: true })
-  await act(() =>
-    renderer.create(
-      <CacheProvider value={cache}>
-        <div
-          css={{
-            color: 'hotpink'
-          }}
-        >
-          <span css={{ color: 'yellow' }}>wow</span>
-          something
-        </div>
-      </CacheProvider>
-    )
-  )
   expect(cache.sheet.tags).toHaveLength(1)
 })
 
-test('speedy option from a custom cache is inherited for <Global/> styles', async () => {
+test('speedy option from a custom cache is inherited for <Global/> styles', () => {
   let cache = createCache({
     key: 'global-inherit-speedy',
     container: safeQuerySelector('body'),
     speedy: true
   })
-  await act(() =>
-    renderer.create(
-      <CacheProvider value={cache}>
-        <Global styles={{ html: { fontSize: 16 } }} />
-      </CacheProvider>
-    )
+
+  render(
+    <CacheProvider value={cache}>
+      <Global styles={{ html: { fontSize: 16 } }} />
+    </CacheProvider>
   )
+
   expect(safeQuerySelector('body style').textContent).toEqual('')
 })
 
-test('does not autoLabel without babel or EMOTION_RUNTIME_AUTO_LABEL', async () => {
+test('does not autoLabel without babel or EMOTION_RUNTIME_AUTO_LABEL', () => {
   let SomeComp = props => {
     return (
       <div
@@ -225,12 +205,12 @@ test('does not autoLabel without babel or EMOTION_RUNTIME_AUTO_LABEL', async ()
       </div>
     )
   }
-  const tree = await act(() => renderer.create(<SomeComp />))
+  const { container } = render(<SomeComp />)
 
-  expect(tree.toJSON().props.className).toMatch(/css-[^-]+/)
+  expect(container.firstChild.className).toMatch(/css-[^-]+/)
 })
 
-test('autoLabel without babel', async () => {
+test('autoLabel without babel', () => {
   globalThis.EMOTION_RUNTIME_AUTO_LABEL = true
 
   let SomeComp = props => {
@@ -245,12 +225,12 @@ test('autoLabel without babel', async () => {
       </div>
     )
   }
-  const tree = await act(() => renderer.create(<SomeComp />))
+  const { container } = render(<SomeComp />)
 
-  expect(tree.toJSON().props.className.endsWith('-SomeComp')).toBe(true)
+  expect(container.firstChild.className.endsWith('-SomeComp')).toBe(true)
 })
 
-test('autoLabel without babel (sanitized)', async () => {
+test('autoLabel without babel (sanitized)', () => {
   globalThis.EMOTION_RUNTIME_AUTO_LABEL = true
 
   let SomeComp$ = props => {
@@ -262,12 +242,12 @@ test('autoLabel without babel (sanitized)', async () => {
   }
 
   // eslint-disable-next-line react/jsx-pascal-case
-  const tree = await act(() => renderer.create(<SomeComp$ />))
+  const { container } = render(<SomeComp$ />)
 
-  expect(tree.toJSON().props.className.endsWith('-SomeComp-')).toBe(true)
+  expect(container.firstChild.className.endsWith('-SomeComp-')).toBe(true)
 })
 
-test('overwrite styles from parent', async () => {
+test('overwrite styles from parent', () => {
   let SomeComponent = (props /*: Object */) => (
     <div
       css={{
@@ -277,49 +257,43 @@ test('overwrite styles from parent', async () => {
       {...props}
     />
   )
-  const tree = await act(() =>
-    renderer.create(
-      <SomeComponent
-        css={{
-          color: 'hotpink'
-        }}
-      />
-    )
+  const { container } = render(
+    <SomeComponent
+      css={{
+        color: 'hotpink'
+      }}
+    />
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('child selector array', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <div
-        css={{
-          ':hover': [{ color: 'green' }, { backgroundColor: 'yellow' }]
-        }}
-      />
-    )
+test('child selector array', () => {
+  const { container } = render(
+    <div
+      css={{
+        ':hover': [{ color: 'green' }, { backgroundColor: 'yellow' }]
+      }}
+    />
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('handles camelCased custom properties in object styles properly', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <div
-        css={{
-          '--textColor': 'green',
-          color: 'var(--textColor)'
-        }}
-      />
-    )
+test('handles camelCased custom properties in object styles properly', () => {
+  const { container } = render(
+    <div
+      css={{
+        '--textColor': 'green',
+        color: 'var(--textColor)'
+      }}
+    />
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('applies class when css prop is set to nil on wrapper component', async () => {
+test('applies class when css prop is set to nil on wrapper component', () => {
   const Button = props => <button css={{ color: 'hotpink' }} {...props} />
 
   const WrappedButton /*: React.StatelessFunctionalComponent<any> */ = (
@@ -329,41 +303,37 @@ test('applies class when css prop is set to nil on wrapper component', async ()
   } */
   ) => <Button css={buttonStyles}>{children}</Button>
 
-  const tree = await act(() =>
-    renderer.create(
-      <React.Fragment>
-        <WrappedButton>{"I'm hotpink!"}</WrappedButton>
-        <WrappedButton buttonStyles={null}>{"I'm hotpink too!"}</WrappedButton>
-      </React.Fragment>
-    )
+  const { container } = render(
+    <React.Fragment>
+      <WrappedButton>{"I'm hotpink!"}</WrappedButton>
+      <WrappedButton buttonStyles={null}>{"I'm hotpink too!"}</WrappedButton>
+    </React.Fragment>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container).toMatchSnapshot()
 })
 
-test('handles composition of styles without a final semi in a declaration block', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <div
-        css={[
-          // prettier-ignore
-          css`
+test('handles composition of styles without a final semi in a declaration block', () => {
+  const { container } = render(
+    <div
+      css={[
+        // prettier-ignore
+        css`
           color: hotpink
         `,
-          css`
-            background-color: green;
-          `
-        ]}
-      >
-        {"I'm hotpink on the green background."}
-      </div>
-    )
+        css`
+          background-color: green;
+        `
+      ]}
+    >
+      {"I'm hotpink on the green background."}
+    </div>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('handles composition of an array css prop containing no final semi with cssprop-generated className (runtime variant of #1730)', async () => {
+test('handles composition of an array css prop containing no final semi with cssprop-generated className (runtime variant of #1730)', () => {
   const Child = ({ bgColor, ...props }) => (
     <div
       css={[{ width: 100, height: 100 }, `background-color: ${bgColor}`]}
@@ -375,11 +345,11 @@ test('handles composition of an array css prop containing no final semi with css
       {children}
     </Child>
   )
-  const tree = await act(() =>
-    renderer.create(<Parent>{"I'm hotpink on the green background."}</Parent>)
+  const { container } = render(
+    <Parent>{"I'm hotpink on the green background."}</Parent>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
 it("doesn't try to insert invalid rules caused by object style's value being falsy", () => {

From aa49a2e1912e117a9cb2682a92320a76ac33cb92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 23:31:57 +0100
Subject: [PATCH 31/54] more

---
 packages/jest/src/matchers.js       |   9 +-
 packages/jest/test/matchers.test.js | 309 ++++++++++++----------------
 2 files changed, 134 insertions(+), 184 deletions(-)

diff --git a/packages/jest/src/matchers.js b/packages/jest/src/matchers.js
index 4edae6bb6c..fb3ba005f0 100644
--- a/packages/jest/src/matchers.js
+++ b/packages/jest/src/matchers.js
@@ -7,7 +7,8 @@ import {
   getStyleElements,
   hasClassNames,
   getMediaRules,
-  findLast
+  findLast,
+  isDOMElement
 } from './utils'
 
 /*
@@ -44,10 +45,8 @@ function toHaveStyleRule(
   value,
   options /* ?: { target?: string | RegExp, media?: string } */ = {}
 ) {
-  if (Array.isArray(received)) {
-    throw new Error(
-      '`toHaveStyleRule` expects to receive a single element but it received an array.'
-    )
+  if (!isDOMElement(received)) {
+    throw new Error('`toHaveStyleRule` expects to receive an element.')
   }
   const { target, media } = options
   const classNames = getClassNamesFromNodes([received])
diff --git a/packages/jest/test/matchers.test.js b/packages/jest/test/matchers.test.js
index 874979b240..5360d98cbd 100644
--- a/packages/jest/test/matchers.test.js
+++ b/packages/jest/test/matchers.test.js
@@ -1,14 +1,11 @@
-import 'test-utils/setup-env'
-import renderer from 'react-test-renderer'
 /** @jsx jsx */
+import 'test-utils/setup-env'
 import React from 'react'
-import { act } from 'react'
+import { render } from '@testing-library/react'
 import { css, jsx } from '@emotion/react'
 import styled from '@emotion/styled'
 import { matchers } from '@emotion/jest'
 
-const isReact16 = React.version.split('.')[0] === '16'
-
 const { toHaveStyleRule } = matchers
 
 expect.extend(matchers)
@@ -22,74 +19,65 @@ describe('toHaveStyleRule', () => {
     width: 100%;
   `
 
-  test('matches styles on the top-most node passed in', async () => {
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div css={divStyle}>
-            <svg css={svgStyle} />
-          </div>
-        )
-      )
-    ).toJSON()
+  test('matches styles on the top-most node passed in', () => {
+    const { container } = render(
+      <div css={divStyle}>
+        <svg css={svgStyle} />
+      </div>
+    )
 
-    expect(tree).toHaveStyleRule('color', 'red')
-    expect(tree).not.toHaveStyleRule('width', '100%')
+    expect(container.firstChild).toHaveStyleRule('color', 'red')
+    expect(container.firstChild).not.toHaveStyleRule('width', '100%')
 
-    const svgNode = tree.children[0]
+    const svgNode = container.firstChild?.firstChild
 
     expect(svgNode).toHaveStyleRule('width', '100%')
     expect(svgNode).not.toHaveStyleRule('color', 'red')
   })
 
-  test('supports asymmetric matchers', async () => {
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div css={divStyle}>
-            <svg css={svgStyle} />
-          </div>
-        )
-      )
-    ).toJSON()
+  test('supports asymmetric matchers', () => {
+    const { container } = render(
+      <div css={divStyle}>
+        <svg css={svgStyle} />
+      </div>
+    )
 
-    expect(tree).toHaveStyleRule('color', expect.anything())
-    expect(tree).not.toHaveStyleRule('padding', expect.anything())
+    expect(container.firstChild).toHaveStyleRule('color', expect.anything())
+    expect(container.firstChild).not.toHaveStyleRule(
+      'padding',
+      expect.anything()
+    )
 
-    const svgNode = tree.children[0]
+    const svgNode = container.firstChild?.firstChild
 
     expect(svgNode).toHaveStyleRule('width', expect.stringMatching(/.*%$/))
   })
 
-  test('fails if no styles are found', async () => {
-    const tree = (await act(() => renderer.create(<div />))).toJSON()
-    const result = toHaveStyleRule(tree, 'color', 'red')
+  test('fails if no styles are found', () => {
+    const { container } = render(<div />)
+    const result = toHaveStyleRule(container.firstChild, 'color', 'red')
     expect(result.pass).toBe(false)
     expect(result.message()).toBe('Property not found: color')
   })
 
-  test('supports regex values', async () => {
-    const tree = (
-      await act(() => renderer.create(<div css={divStyle} />))
-    ).toJSON()
-    expect(tree).toHaveStyleRule('color', /red/)
+  test('supports regex values', () => {
+    const { container } = render(<div css={divStyle} />)
+    expect(container.firstChild).toHaveStyleRule('color', /red/)
   })
 
-  it.skip('returns a message explaining the failure', async () => {
-    const tree = (
-      await act(() => renderer.create(<div css={divStyle} />))
-    ).toJSON()
+  it.skip('returns a message explaining the failure', () => {
+    const { container } = render(<div css={divStyle} />)
 
-    // When expect(tree).toHaveStyleRule('color', 'blue') fails
-    const resultFail = toHaveStyleRule(tree, 'color', 'blue')
+    // When expect(container.firstChild).toHaveStyleRule('color', 'blue') fails
+    const resultFail = toHaveStyleRule(container.firstChild, 'color', 'blue')
     expect(resultFail.message()).toMatchSnapshot()
 
-    // When expect(tree).not.toHaveStyleRule('color', 'red')
-    const resultPass = toHaveStyleRule(tree, 'color', 'red')
+    // When expect(container.firstChild).not.toHaveStyleRule('color', 'red')
+    const resultPass = toHaveStyleRule(container.firstChild, 'color', 'red')
     expect(resultPass.message()).toMatchSnapshot()
   })
 
-  test('matches styles on the focus, hover targets', async () => {
+  test('matches styles on the focus, hover targets', () => {
     const localDivStyle = css`
       color: white;
       &:hover {
@@ -99,22 +87,22 @@ describe('toHaveStyleRule', () => {
         color: black;
       }
     `
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div css={localDivStyle}>
-            <svg css={svgStyle} />
-          </div>
-        )
-      )
-    ).toJSON()
-
-    expect(tree).toHaveStyleRule('color', 'yellow', { target: ':hover' })
-    expect(tree).toHaveStyleRule('color', 'black', { target: ':focus' })
-    expect(tree).toHaveStyleRule('color', 'white')
+    const { container } = render(
+      <div css={localDivStyle}>
+        <svg css={svgStyle} />
+      </div>
+    )
+
+    expect(container.firstChild).toHaveStyleRule('color', 'yellow', {
+      target: ':hover'
+    })
+    expect(container.firstChild).toHaveStyleRule('color', 'black', {
+      target: ':focus'
+    })
+    expect(container.firstChild).toHaveStyleRule('color', 'white')
   })
 
-  test('matches styles on the nested component or html element', async () => {
+  test('matches styles on the nested component or html element', () => {
     const Svg = styled('svg')`
       width: 100%;
       fill: blue;
@@ -129,24 +117,24 @@ describe('toHaveStyleRule', () => {
       }
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <Div>
-            <Svg />
-            <span>Test</span>
-          </Div>
-        )
-      )
-    ).toJSON()
-
-    expect(tree).toHaveStyleRule('color', 'yellow', { target: 'span' })
-    expect(tree).toHaveStyleRule('color', 'red')
-
-    expect(tree).toHaveStyleRule('fill', 'green', { target: `${Svg}` })
+    const { container } = render(
+      <Div>
+        <Svg />
+        <span>Test</span>
+      </Div>
+    )
+
+    expect(container.firstChild).toHaveStyleRule('color', 'yellow', {
+      target: 'span'
+    })
+    expect(container.firstChild).toHaveStyleRule('color', 'red')
+
+    expect(container.firstChild).toHaveStyleRule('fill', 'green', {
+      target: `${Svg}`
+    })
   })
 
-  test('matches target styles by regex', async () => {
+  test('matches target styles by regex', () => {
     const localDivStyle = css`
       a {
         color: yellow;
@@ -155,37 +143,31 @@ describe('toHaveStyleRule', () => {
         color: black;
       }
     `
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div css={localDivStyle}>
-            <svg css={svgStyle} />
-          </div>
-        )
-      )
-    ).toJSON()
-
-    expect(tree).toHaveStyleRule('color', 'yellow', { target: /a$/ })
+    const { container } = render(
+      <div css={localDivStyle}>
+        <svg css={svgStyle} />
+      </div>
+    )
+
+    expect(container.firstChild).toHaveStyleRule('color', 'yellow', {
+      target: /a$/
+    })
   })
 
-  test('matches proper style for css', async () => {
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div
-            css={css`
-              color: green;
-              color: hotpink;
-            `}
-          />
-        )
-      )
-    ).toJSON()
-    expect(tree).not.toHaveStyleRule('color', 'green')
-    expect(tree).toHaveStyleRule('color', 'hotpink')
+  test('matches proper style for css', () => {
+    const { container } = render(
+      <div
+        css={css`
+          color: green;
+          color: hotpink;
+        `}
+      />
+    )
+    expect(container.firstChild).not.toHaveStyleRule('color', 'green')
+    expect(container.firstChild).toHaveStyleRule('color', 'hotpink')
   })
 
-  test('matches style of the media', async () => {
+  test('matches style of the media', () => {
     const Svg = styled('svg')`
       width: 100%;
     `
@@ -205,32 +187,28 @@ describe('toHaveStyleRule', () => {
       }
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <Div>
-            <Svg />
-          </Div>
-        )
-      )
-    ).toJSON()
-
-    expect(tree).toHaveStyleRule('font-size', '30px')
-    expect(tree).toHaveStyleRule('font-size', '50px', {
+    const { container } = render(
+      <Div>
+        <Svg />
+      </Div>
+    )
+
+    expect(container.firstChild).toHaveStyleRule('font-size', '30px')
+    expect(container.firstChild).toHaveStyleRule('font-size', '50px', {
       media: '(min-width: 420px)'
     })
-    expect(tree).toHaveStyleRule('font-size', '70px', {
+    expect(container.firstChild).toHaveStyleRule('font-size', '70px', {
       media: '(min-width: 920px) and (max-width: 1200px)'
     })
-    expect(tree).toHaveStyleRule('font-size', '80px', {
+    expect(container.firstChild).toHaveStyleRule('font-size', '80px', {
       media: 'screen and (max-width: 1200px)'
     })
-    expect(tree).toHaveStyleRule('font-size', '90px', {
+    expect(container.firstChild).toHaveStyleRule('font-size', '90px', {
       media: 'not all and (monochrome)'
     })
   })
 
-  test('matches styles with target and media options', async () => {
+  test('matches styles with target and media options', () => {
     const localDivStyle = css`
       color: white;
       @media (min-width: 420px) {
@@ -240,27 +218,23 @@ describe('toHaveStyleRule', () => {
         }
       }
     `
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <div css={localDivStyle}>
-            <span>Test</span>
-          </div>
-        )
-      )
-    ).toJSON()
-
-    expect(tree).toHaveStyleRule('color', 'yellow', {
+    const { container } = render(
+      <div css={localDivStyle}>
+        <span>Test</span>
+      </div>
+    )
+
+    expect(container.firstChild).toHaveStyleRule('color', 'yellow', {
       target: ':hover',
       media: '(min-width: 420px)'
     })
-    expect(tree).toHaveStyleRule('color', 'green', {
+    expect(container.firstChild).toHaveStyleRule('color', 'green', {
       media: '(min-width: 420px)'
     })
-    expect(tree).toHaveStyleRule('color', 'white')
+    expect(container.firstChild).toHaveStyleRule('color', 'white')
   })
 
-  test('fails if option media invalid', async () => {
+  test('fails if option media invalid', () => {
     const Div = styled('div')`
       font-size: 30px;
       @media (min-width: 420px) {
@@ -268,16 +242,16 @@ describe('toHaveStyleRule', () => {
       }
     `
 
-    const tree = (await act(() => renderer.create(<Div />))).toJSON()
+    const { container } = render(<Div />)
 
-    const result = toHaveStyleRule(tree, 'font-size', '50px', {
+    const result = toHaveStyleRule(container.firstChild, 'font-size', '50px', {
       media: '(min-width-'
     })
     expect(result.pass).toBe(false)
     expect(result.message()).toBe('Property not found: font-size')
   })
 
-  test('matches styles for a component used as selector', async () => {
+  test('matches styles for a component used as selector', () => {
     const Bar = styled.div``
 
     const Foo = styled.div`
@@ -287,20 +261,16 @@ describe('toHaveStyleRule', () => {
         color: hotpink;
       }
     `
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <Foo>
-            <Bar />
-          </Foo>
-        )
-      )
-    ).toJSON()
-
-    expect(tree.children[0]).toHaveStyleRule('color', 'hotpink')
+    const { container } = render(
+      <Foo>
+        <Bar />
+      </Foo>
+    )
+
+    expect(container.firstChild?.firstChild).toHaveStyleRule('color', 'hotpink')
   })
 
-  test('takes specificity into account when matching styles (basic)', async () => {
+  test('takes specificity into account when matching styles (basic)', () => {
     const Bar = styled.div`
       color: yellow;
     `
@@ -313,39 +283,20 @@ describe('toHaveStyleRule', () => {
       }
     `
 
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <Foo>
-            <Bar />
-          </Foo>
-        )
-      )
-    ).toJSON()
-
-    expect(tree.children[0]).toHaveStyleRule('color', 'hotpink')
-  })
+    const { container } = render(
+      <Foo>
+        <Bar />
+      </Foo>
+    )
 
-  test('should throw a friendly error when it receives an array', async () => {
-    const tree = (
-      await act(() =>
-        renderer.create(
-          <>
-            <div
-              css={css`
-                color: hotpink;
-              `}
-            />
-            {'Some text'}
-          </>
-        )
-      )
-    ).toJSON()
+    expect(container.firstChild.firstChild).toHaveStyleRule('color', 'hotpink')
+  })
 
+  test('should throw a friendly error when it receives non-element', () => {
     expect(() =>
-      expect(tree).toHaveStyleRule('color', 'hotpink')
+      expect([]).toHaveStyleRule('color', 'hotpink')
     ).toThrowErrorMatchingInlineSnapshot(
-      `"\`toHaveStyleRule\` expects to receive a single element but it received an array."`
+      `"\`toHaveStyleRule\` expects to receive an element."`
     )
   })
 })

From 2d6717f7647b452d9b721181a9b349513f5b5c28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 23:33:20 +0100
Subject: [PATCH 32/54] tweak

---
 packages/jest/src/matchers.js | 6 +-----
 packages/jest/src/utils.js    | 3 +++
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/jest/src/matchers.js b/packages/jest/src/matchers.js
index fb3ba005f0..d5d9b9330b 100644
--- a/packages/jest/src/matchers.js
+++ b/packages/jest/src/matchers.js
@@ -7,8 +7,7 @@ import {
   getStyleElements,
   hasClassNames,
   getMediaRules,
-  findLast,
-  isDOMElement
+  findLast
 } from './utils'
 
 /*
@@ -45,9 +44,6 @@ function toHaveStyleRule(
   value,
   options /* ?: { target?: string | RegExp, media?: string } */ = {}
 ) {
-  if (!isDOMElement(received)) {
-    throw new Error('`toHaveStyleRule` expects to receive an element.')
-  }
   const { target, media } = options
   const classNames = getClassNamesFromNodes([received])
   const cssString = getStylesFromClassNames(classNames, getStyleElements())
diff --git a/packages/jest/src/utils.js b/packages/jest/src/utils.js
index 6f07d60756..f705d522c4 100644
--- a/packages/jest/src/utils.js
+++ b/packages/jest/src/utils.js
@@ -100,6 +100,9 @@ function getClassNamesFromCheerio(selectors, node) {
 }
 
 function getClassNamesFromDOMElement(selectors, node) {
+  if (!isDOMElement(node)) {
+    throw new Error('`toHaveStyleRule` expects to receive an element.')
+  }
   return getClassNames(selectors, node.getAttribute('class'))
 }
 

From 8deec1fdcfbd66ba1ccf2b7dd322834f2a46009c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 23:37:12 +0100
Subject: [PATCH 33/54] more converted tests

---
 packages/jest/test/prod.test.js               |  40 +++---
 .../__snapshots__/class-names.js.snap         |   6 +-
 packages/react/__tests__/class-names.js       | 119 ++++++++----------
 3 files changed, 76 insertions(+), 89 deletions(-)

diff --git a/packages/jest/test/prod.test.js b/packages/jest/test/prod.test.js
index 0e691ec7a0..69b0b3b7a6 100644
--- a/packages/jest/test/prod.test.js
+++ b/packages/jest/test/prod.test.js
@@ -1,6 +1,6 @@
-import 'test-utils/setup-env'
-import renderer from 'react-test-renderer'
 /** @jsx jsx */
+import 'test-utils/setup-env'
+import { render } from '@testing-library/react'
 import * as React from 'react'
 import { css, jsx } from '@emotion/react'
 import { matchers } from '@emotion/jest'
@@ -9,15 +9,13 @@ expect.extend(matchers)
 
 gate({ development: false }, ({ test }) => {
   test('it prints fallback values', () => {
-    const tree = renderer
-      .create(
-        <div css={[{ backgroundColor: '#000' }, { backgroundColor: '#fff' }]}>
-          <span css={{ color: 'hotpink' }}>{'emotion'}</span>
-        </div>
-      )
-      .toJSON()
+    const { container } = render(
+      <div css={[{ backgroundColor: '#000' }, { backgroundColor: '#fff' }]}>
+        <span css={{ color: 'hotpink' }}>{'emotion'}</span>
+      </div>
+    )
 
-    expect(tree).toMatchInlineSnapshot(`
+    expect(container.firstChild).toMatchInlineSnapshot(`
 .emotion-0 {
   background-color: #000;
   background-color: #fff;
@@ -28,10 +26,10 @@ gate({ development: false }, ({ test }) => {
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <span
-    className="emotion-1"
+    class="emotion-1"
   >
     emotion
   </span>
@@ -40,15 +38,13 @@ gate({ development: false }, ({ test }) => {
   })
 
   test('it prints invalid declarations', () => {
-    const tree = renderer
-      .create(
-        <div css={{ bazinga: 'joke' }}>
-          <span css={{ color: 'hotpink' }}>{'emotion'}</span>
-        </div>
-      )
-      .toJSON()
+    const { container } = render(
+      <div css={{ bazinga: 'joke' }}>
+        <span css={{ color: 'hotpink' }}>{'emotion'}</span>
+      </div>
+    )
 
-    expect(tree).toMatchInlineSnapshot(`
+    expect(container.firstChild).toMatchInlineSnapshot(`
 .emotion-0 {
   bazinga: joke;
 }
@@ -58,10 +54,10 @@ gate({ development: false }, ({ test }) => {
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 >
   <span
-    className="emotion-1"
+    class="emotion-1"
   >
     emotion
   </span>
diff --git a/packages/react/__tests__/__snapshots__/class-names.js.snap b/packages/react/__tests__/__snapshots__/class-names.js.snap
index ffcafa7178..5f521a70b0 100644
--- a/packages/react/__tests__/__snapshots__/class-names.js.snap
+++ b/packages/react/__tests__/__snapshots__/class-names.js.snap
@@ -6,7 +6,7 @@ exports[`css 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
 
@@ -17,7 +17,7 @@ exports[`cx 1`] = `
 }
 
 <div
-  className="some-other-class emotion-0"
+  class="some-other-class emotion-0"
 />
 `;
 
@@ -27,6 +27,6 @@ exports[`should get the theme 1`] = `
 }
 
 <div
-  className="emotion-0"
+  class="emotion-0"
 />
 `;
diff --git a/packages/react/__tests__/class-names.js b/packages/react/__tests__/class-names.js
index e4ffce5a99..ac62235a3d 100644
--- a/packages/react/__tests__/class-names.js
+++ b/packages/react/__tests__/class-names.js
@@ -1,86 +1,77 @@
-import React from 'react'
-import { act } from 'react'
 import 'test-utils/setup-env'
+import React from 'react'
 import { ClassNames, ThemeProvider } from '@emotion/react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react'
+
+test('css', () => {
+  const { container } = render(
+    <ClassNames>
+      {({ css }) => (
+        <div
+          className={css`
+            color: hotpink;
+          `}
+        />
+      )}
+    </ClassNames>
+  )
 
-test('css', async () => {
-  const tree = await act(() =>
-    renderer.create(
+  expect(container.firstChild).toMatchSnapshot()
+})
+
+test('should get the theme', () => {
+  const { container } = render(
+    <ThemeProvider theme={{ color: 'green' }}>
       <ClassNames>
-        {({ css }) => (
+        {({ css, theme }) => (
           <div
             className={css`
-              color: hotpink;
+              color: ${theme.color};
             `}
           />
         )}
       </ClassNames>
-    )
-  )
-
-  expect(tree.toJSON()).toMatchSnapshot()
-})
-
-test('should get the theme', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <ThemeProvider theme={{ color: 'green' }}>
-        <ClassNames>
-          {({ css, theme }) => (
-            <div
-              className={css`
-                color: ${theme.color};
-              `}
-            />
-          )}
-        </ClassNames>
-      </ThemeProvider>
-    )
+    </ThemeProvider>
   )
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('cx', async () => {
-  const tree = await act(() =>
-    renderer.create(
-      <ClassNames>
-        {({ css, cx }) => {
-          let secondClassButItsInsertedFirst = css`
-            color: green;
-          `
-          let firstClassButItsInsertedSecond = css`
-            color: hotpink;
-          `
+test('cx', () => {
+  const { container } = render(
+    <ClassNames>
+      {({ css, cx }) => {
+        let secondClassButItsInsertedFirst = css`
+          color: green;
+        `
+        let firstClassButItsInsertedSecond = css`
+          color: hotpink;
+        `
 
-          return (
-            <div
-              className={cx(
-                firstClassButItsInsertedSecond,
-                'some-other-class',
-                secondClassButItsInsertedFirst
-              )}
-            />
-          )
-        }}
-      </ClassNames>
-    )
+        return (
+          <div
+            className={cx(
+              firstClassButItsInsertedSecond,
+              'some-other-class',
+              secondClassButItsInsertedFirst
+            )}
+          />
+        )
+      }}
+    </ClassNames>
   )
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(container.firstChild).toMatchSnapshot()
 })
 
-test('css and cx throws when used after render', async () => {
+test('css and cx throws when used after render', () => {
   let cx, css
-  await act(() =>
-    renderer.create(
-      <ClassNames>
-        {arg => {
-          ;({ cx, css } = arg)
-          return null
-        }}
-      </ClassNames>
-    )
+  render(
+    <ClassNames>
+      {arg => {
+        ;({ cx, css } = arg)
+        return null
+      }}
+    </ClassNames>
   )
 
   expect(cx).toThrowErrorMatchingInlineSnapshot(

From 8082f026332170740ef377127824c646aebcbb2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Thu, 12 Dec 2024 23:48:00 +0100
Subject: [PATCH 34/54] fix thing

---
 .../__tests__/__snapshots__/styled.js.snap    | 16 ++++++
 packages/styled/__tests__/styled.js           | 56 +++++++++----------
 .../__snapshots__/prop-filtering.test.js.snap | 15 +++++
 packages/styled/test/prop-filtering.test.js   | 42 +++++++-------
 4 files changed, 80 insertions(+), 49 deletions(-)

diff --git a/packages/styled/__tests__/__snapshots__/styled.js.snap b/packages/styled/__tests__/__snapshots__/styled.js.snap
index 467a48a418..7546e156c5 100644
--- a/packages/styled/__tests__/__snapshots__/styled.js.snap
+++ b/packages/styled/__tests__/__snapshots__/styled.js.snap
@@ -376,10 +376,17 @@ exports[`styled no prop filtering on non string tags 1`] = `
 }
 
 <a
+  a="true"
   aria-label="some label"
+  b="true"
   class="emotion-0"
+  cool="true"
   data-wow="value"
+  filtering="true"
   href="link"
+  is="true"
+  prop="true"
+  wow="true"
 >
   hello world
 </a>
@@ -391,10 +398,17 @@ exports[`styled no prop filtering on string tags started with upper case 1`] = `
 }
 
 <somecustomlink
+  a="true"
   aria-label="some label"
+  b="true"
   class="emotion-0"
+  cool="true"
   data-wow="value"
+  filtering="true"
   href="link"
+  is="true"
+  prop="true"
+  wow="true"
 >
   hello world
 </somecustomlink>
@@ -489,6 +503,7 @@ exports[`styled prop filtering 1`] = `
   class="emotion-0"
   data-wow="value"
   href="link"
+  is="true"
 >
   hello world
 </a>
@@ -505,6 +520,7 @@ exports[`styled prop filtering on composed styled components that are string tag
   class="emotion-0"
   data-wow="value"
   href="link"
+  is="true"
 >
   hello world
 </a>
diff --git a/packages/styled/__tests__/styled.js b/packages/styled/__tests__/styled.js
index 083fbda0a9..07c9b0b3c9 100644
--- a/packages/styled/__tests__/styled.js
+++ b/packages/styled/__tests__/styled.js
@@ -466,13 +466,13 @@ describe('styled', () => {
 
     const { container } = render(
       <Link
-        a
-        b
-        wow
-        prop
-        filtering
-        is
-        cool
+        a="true"
+        b="true"
+        wow="true"
+        prop="true"
+        filtering="true"
+        is="true"
+        cool="true"
         aria-label="some label"
         data-wow="value"
         href="link"
@@ -491,13 +491,13 @@ describe('styled', () => {
 
     const { container } = render(
       <Link
-        a
-        b
-        wow
-        prop
-        filtering
-        is
-        cool
+        a="true"
+        b="true"
+        wow="true"
+        prop="true"
+        filtering="true"
+        is="true"
+        cool="true"
         aria-label="some label"
         data-wow="value"
         href="link"
@@ -516,13 +516,13 @@ describe('styled', () => {
 
     const { container } = render(
       <Link
-        a
-        b
-        wow
-        prop
-        filtering
-        is
-        cool
+        a="true"
+        b="true"
+        wow="true"
+        prop="true"
+        filtering="true"
+        is="true"
+        cool="true"
         aria-label="some label"
         data-wow="value"
         href="link"
@@ -544,13 +544,13 @@ describe('styled', () => {
 
     const { container } = render(
       <Link
-        a
-        b
-        wow
-        prop
-        filtering
-        is
-        cool
+        a="true"
+        b="true"
+        wow="true"
+        prop="true"
+        filtering="true"
+        is="true"
+        cool="true"
         aria-label="some label"
         data-wow="value"
         href="link"
diff --git a/packages/styled/test/__snapshots__/prop-filtering.test.js.snap b/packages/styled/test/__snapshots__/prop-filtering.test.js.snap
index 0d666843ce..e36143362b 100644
--- a/packages/styled/test/__snapshots__/prop-filtering.test.js.snap
+++ b/packages/styled/test/__snapshots__/prop-filtering.test.js.snap
@@ -33,10 +33,17 @@ exports[`no prop filtering on non string tags 1`] = `
 }
 
 <a
+  a="true"
   aria-label="some label"
+  b="true"
   class="emotion-0 emotion-1"
+  cool="true"
   data-wow="value"
+  filtering="true"
   href="link"
+  is="true"
+  prop="true"
+  wow="true"
 >
   hello world
 </a>
@@ -48,10 +55,17 @@ exports[`no prop filtering on string tags started with upper case 1`] = `
 }
 
 <somecustomlink
+  a="true"
   aria-label="some label"
+  b="true"
   class="emotion-0 emotion-1"
+  cool="true"
   data-wow="value"
+  filtering="true"
   href="link"
+  is="true"
+  prop="true"
+  wow="true"
 >
   hello world
 </somecustomlink>
@@ -67,6 +81,7 @@ exports[`prop filtering 1`] = `
   class="emotion-0 emotion-1"
   data-wow="value"
   href="link"
+  is="true"
 >
   hello world
 </a>
diff --git a/packages/styled/test/prop-filtering.test.js b/packages/styled/test/prop-filtering.test.js
index 927f3fde68..461393f2f6 100644
--- a/packages/styled/test/prop-filtering.test.js
+++ b/packages/styled/test/prop-filtering.test.js
@@ -73,13 +73,13 @@ test('prop filtering', () => {
 
   const { container } = render(
     <Link
-      a
-      b
-      wow
-      prop
-      filtering
-      is
-      cool
+      a="true"
+      b="true"
+      wow="true"
+      prop="true"
+      filtering="true"
+      is="true"
+      cool="true"
       aria-label="some label"
       data-wow="value"
       href="link"
@@ -98,13 +98,13 @@ test('no prop filtering on non string tags', () => {
 
   const { container } = render(
     <Link
-      a
-      b
-      wow
-      prop
-      filtering
-      is
-      cool
+      a="true"
+      b="true"
+      wow="true"
+      prop="true"
+      filtering="true"
+      is="true"
+      cool="true"
       aria-label="some label"
       data-wow="value"
       href="link"
@@ -123,13 +123,13 @@ test('no prop filtering on string tags started with upper case', () => {
 
   const { container } = render(
     <Link
-      a
-      b
-      wow
-      prop
-      filtering
-      is
-      cool
+      a="true"
+      b="true"
+      wow="true"
+      prop="true"
+      filtering="true"
+      is="true"
+      cool="true"
       aria-label="some label"
       data-wow="value"
       href="link"

From fb2f0c4936946963cc7a554c80712749e02f8680 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 13 Dec 2024 00:01:12 +0100
Subject: [PATCH 35/54] fix

---
 packages/css/test/instance/css.test.js        | 62 +++++++++----------
 packages/styled/__tests__/styled.js           |  8 ++-
 .../__snapshots__/prop-filtering.test.js.snap | 10 +++
 packages/styled/test/babel-plugin.test.js     |  2 +-
 packages/styled/test/index.test.js            |  8 ++-
 packages/styled/test/prop-filtering.test.js   | 58 +++++++++--------
 6 files changed, 85 insertions(+), 63 deletions(-)

diff --git a/packages/css/test/instance/css.test.js b/packages/css/test/instance/css.test.js
index 62de5cbb0b..3c13228855 100644
--- a/packages/css/test/instance/css.test.js
+++ b/packages/css/test/instance/css.test.js
@@ -5,7 +5,7 @@ import { render } from '@testing-library/react'
 import { css as differentCss, flush, sheet } from './emotion-instance'
 
 describe('css', () => {
-  test('float property', async () => {
+  test('float property', () => {
     const cls1 = differentCss`
       float: left;
     `
@@ -14,7 +14,7 @@ describe('css', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles more than 10 dynamic properties', async () => {
+  test('handles more than 10 dynamic properties', () => {
     const cls1 = differentCss`
       text-decoration: ${'underline'};
       border-right: solid blue 54px;
@@ -33,12 +33,12 @@ describe('css', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('falsy value in nested selector on object', async () => {
+  test('falsy value in nested selector on object', () => {
     const cls1 = differentCss({ ':hover': { display: null, color: 'hotpink' } })
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
-  test('boolean as value', async () => {
+  test('boolean as value', () => {
     const cls1 = differentCss({
       display: 'flex',
       color: false,
@@ -47,13 +47,13 @@ describe('css', () => {
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
-  test('auto px', async () => {
+  test('auto px', () => {
     const cls1 = differentCss({ display: 'flex', flex: 1, fontSize: 10 })
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('random interpolation with undefined values', async () => {
+  test('random interpolation with undefined values', () => {
     const cls2 = differentCss`
       ${undefined};
       justify-content: center;
@@ -62,7 +62,7 @@ describe('css', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('random expression', async () => {
+  test('random expression', () => {
     const cls2 = differentCss`
       font-size: 20px;
       @media (min-width: 420px) {
@@ -79,7 +79,7 @@ describe('css', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('simple composition', async () => {
+  test('simple composition', () => {
     const cls1 = differentCss`
       display: flex;
       &:hover {
@@ -94,7 +94,7 @@ describe('css', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles objects', async () => {
+  test('handles objects', () => {
     const cls1 = differentCss({
       float: 'left',
       display: 'flex',
@@ -107,19 +107,19 @@ describe('css', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('handles array of objects', async () => {
+  test('handles array of objects', () => {
     const cls1 = differentCss([{ height: 50, width: 20 }, null])
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('computed key is only dynamic', async () => {
+  test('computed key is only dynamic', () => {
     const cls1 = differentCss({ fontSize: 10, [`w${'idth'}`]: 20 })
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('composition with objects', async () => {
+  test('composition with objects', () => {
     const cls1 = differentCss({
       display: 'flex',
       width: 30,
@@ -141,7 +141,7 @@ describe('css', () => {
     const { container } = render(<div className={cls2} />)
     expect(container.firstChild).toMatchSnapshot()
   })
-  test('@supports', async () => {
+  test('@supports', () => {
     const cls1 = differentCss`
       @supports (display: grid) {
         display: grid;
@@ -150,7 +150,7 @@ describe('css', () => {
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
-  test.skip('nested at rules', async () => {
+  test.skip('nested at rules', () => {
     const cls1 = differentCss`
       @supports (display: grid) {
         display: grid;
@@ -168,7 +168,7 @@ describe('css', () => {
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
-  test('nested array', async () => {
+  test('nested array', () => {
     const cls1 = differentCss([
       [{ display: 'inline' }],
       [{ display: 'inline-block' }],
@@ -193,25 +193,25 @@ describe('css', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('explicit false', async () => {
+  test('explicit false', () => {
     const cls1 = differentCss(false)
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('array with explicit false', async () => {
+  test('array with explicit false', () => {
     const cls1 = differentCss([[{ display: 'flex' }], false])
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('array with explicit true', async () => {
+  test('array with explicit true', () => {
     const cls1 = differentCss([[{ display: 'flex' }], true])
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('nested', async () => {
+  test('nested', () => {
     const cls1 = differentCss`
       color: yellow;
       & .some-class {
@@ -234,7 +234,7 @@ describe('css', () => {
 
     expect(container.firstChild).toMatchSnapshot()
   })
-  test('explicit &', async () => {
+  test('explicit &', () => {
     flush()
     const cls1 = differentCss`
       &.another-class {
@@ -247,18 +247,18 @@ describe('css', () => {
     expect(sheet).toMatchSnapshot()
     flush()
   })
-  test('falsy property value in object', async () => {
+  test('falsy property value in object', () => {
     const cls = differentCss({ display: 'flex', backgroundColor: undefined })
     const { container } = render(<div className={cls} />)
     expect(container.firstChild).toMatchSnapshot()
   })
-  test('registered styles as nested selector value in object', async () => {
+  test('registered styles as nested selector value in object', () => {
     const cls = differentCss({ display: 'flex', backgroundColor: 'hotpink' })
     const cls1 = differentCss({ ':hover': cls })
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
-  test('composition stuff', async () => {
+  test('composition stuff', () => {
     const cls1 = differentCss({ justifyContent: 'center' })
     const cls2 = differentCss([cls1])
     const { container: container1 } = render(<div className={cls1} />)
@@ -266,13 +266,13 @@ describe('css', () => {
     const { container: container2 } = render(<div className={cls2} />)
     expect(container2.firstChild).toMatchSnapshot()
   })
-  test('null rule', async () => {
+  test('null rule', () => {
     const cls1 = differentCss()
 
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
-  test('css variables', async () => {
+  test('css variables', () => {
     const cls1 = differentCss`
       --some-var: 1px;
       width: var(--some-var);
@@ -281,7 +281,7 @@ describe('css', () => {
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  test('null value', async () => {
+  test('null value', () => {
     const cls1 = differentCss(null)
     const cls2 = differentCss`
       ${null};
@@ -294,7 +294,7 @@ describe('css', () => {
     ).toMatchSnapshot()
   })
 
-  test('flushes correctly', async () => {
+  test('flushes correctly', () => {
     const cls1 = differentCss`
       display: flex;
     `
@@ -304,7 +304,7 @@ describe('css', () => {
     const { container: container2 } = render(<div className={cls1} />)
     expect(container2.firstChild).toMatchSnapshot()
   })
-  test('media query specificity', async () => {
+  test('media query specificity', () => {
     flush()
     const cls = differentCss`
       width: 32px;
@@ -322,7 +322,7 @@ describe('css', () => {
     expect(container.firstChild).toMatchSnapshot()
     flush()
   })
-  test('weakmap', async () => {
+  test('weakmap', () => {
     const styles = { display: 'flex' }
     const cls1 = differentCss(styles)
     const cls2 = differentCss(styles)
@@ -332,7 +332,7 @@ describe('css', () => {
     expect(container2.firstChild).toMatchSnapshot()
   })
 
-  test('manually use label property', async () => {
+  test('manually use label property', () => {
     flush()
     const cls1 = differentCss`
       color: hotpink;
@@ -342,7 +342,7 @@ describe('css', () => {
     expect(container.firstChild).toMatchSnapshot()
     expect(sheet).toMatchSnapshot()
   })
-  test('sets correct nonce value', async () => {
+  test('sets correct nonce value', () => {
     flush()
     differentCss`
       color: hotpink;
diff --git a/packages/styled/__tests__/styled.js b/packages/styled/__tests__/styled.js
index 07c9b0b3c9..a92a3ef0f6 100644
--- a/packages/styled/__tests__/styled.js
+++ b/packages/styled/__tests__/styled.js
@@ -196,7 +196,9 @@ describe('styled', () => {
         background-color: green;
       }
     `
-    const { container } = render(<Input value="hello world" />)
+    const { container } = render(
+      <Input value="hello world" onChange={() => {}} />
+    )
 
     expect(container.firstChild).toMatchSnapshot()
   })
@@ -208,7 +210,9 @@ describe('styled', () => {
       }
     })
 
-    const { container } = render(<Input value="hello world" />)
+    const { container } = render(
+      <Input value="hello world" onChange={() => {}} />
+    )
 
     expect(container.firstChild).toMatchSnapshot()
   })
diff --git a/packages/styled/test/__snapshots__/prop-filtering.test.js.snap b/packages/styled/test/__snapshots__/prop-filtering.test.js.snap
index e36143362b..41acd95d97 100644
--- a/packages/styled/test/__snapshots__/prop-filtering.test.js.snap
+++ b/packages/styled/test/__snapshots__/prop-filtering.test.js.snap
@@ -3,6 +3,7 @@
 exports[`composes shouldForwardProp on composed styled components 1`] = `
 <div
   class="emotion-0 emotion-1"
+  xyz="true"
 />
 `;
 
@@ -99,6 +100,8 @@ exports[`prop filtering on composed styled components that are string tags 1`] =
   data-wow="value"
   for="other reasons"
   href="link"
+  is="true"
+  kind="true"
 >
   hello world
 </a>
@@ -122,6 +125,7 @@ exports[`withComponent inherits explicit shouldForwardProp 1`] = `
 
 <span
   class="emotion-0 emotion-1"
+  foo="true"
 />
 `;
 
@@ -133,6 +137,7 @@ exports[`withComponent inherits explicit shouldForwardProp from flattened compon
 
 <span
   class="emotion-0 emotion-1"
+  foo="true"
 />
 `;
 
@@ -143,6 +148,7 @@ exports[`withComponent should accept shouldForwardProp 1`] = `
 
 <span
   class="emotion-0 emotion-1"
+  xyz="true"
 />
 `;
 
@@ -153,6 +159,8 @@ exports[`withComponent should compose shouldForwardProp 1`] = `
 
 <span
   class="emotion-0 emotion-1"
+  qwe="true"
+  xyz="true"
 />
 `;
 
@@ -163,5 +171,7 @@ exports[`withComponent should compose shouldForwardProp with a flattened compone
 
 <span
   class="emotion-0 emotion-1"
+  qwe="true"
+  xyz="true"
 />
 `;
diff --git a/packages/styled/test/babel-plugin.test.js b/packages/styled/test/babel-plugin.test.js
index a6f5239f69..52563d86d4 100644
--- a/packages/styled/test/babel-plugin.test.js
+++ b/packages/styled/test/babel-plugin.test.js
@@ -4,7 +4,7 @@ import { act } from 'react'
 import { render } from '@testing-library/react'
 import styled from '@emotion/styled'
 
-test("config merging works even if it's referenced by variable", async () => {
+test("config merging works even if it's referenced by variable", () => {
   const Button = ({ isRed, ...rest }) => (
     <button {...rest}>{isRed ? 'forwarded' : 'not forwarded'}</button>
   )
diff --git a/packages/styled/test/index.test.js b/packages/styled/test/index.test.js
index 03c097a224..e0d8b24e87 100644
--- a/packages/styled/test/index.test.js
+++ b/packages/styled/test/index.test.js
@@ -154,7 +154,9 @@ describe('styled', () => {
         background-color: green;
       }
     `
-    const { container } = render(<Input value="hello world" />)
+    const { container } = render(
+      <Input value="hello world" onChange={() => {}} />
+    )
 
     expect(container.firstChild).toMatchSnapshot()
   })
@@ -166,7 +168,9 @@ describe('styled', () => {
       }
     })
 
-    const { container } = render(<Input value="hello world" />)
+    const { container } = render(
+      <Input value="hello world" onChange={() => {}} />
+    )
 
     expect(container.firstChild).toMatchSnapshot()
   })
diff --git a/packages/styled/test/prop-filtering.test.js b/packages/styled/test/prop-filtering.test.js
index 461393f2f6..c4aa9d85f7 100644
--- a/packages/styled/test/prop-filtering.test.js
+++ b/packages/styled/test/prop-filtering.test.js
@@ -13,7 +13,7 @@ test('composes shouldForwardProp on composed styled components', () => {
     shouldForwardProp: prop => prop !== 'bar'
   })()
 
-  const { container } = render(<ComposedDiv foo bar xyz />)
+  const { container } = render(<ComposedDiv foo bar xyz="true" />)
 
   expect(container.firstChild).toMatchSnapshot()
 })
@@ -426,28 +426,28 @@ test('prop filtering on composed styled components that are string tags', () =>
 
   const { container } = render(
     <Link
-      wow
-      prop
-      filtering
-      looks
-      cool
-      but
-      is
-      kind
-      of
-      a
-      bad
-      idea
-      since
-      the
-      react
-      warnings
-      will
-      not
-      work
-      and
+      wow="true"
+      prop="true"
+      filtering="true"
+      looks="true"
+      cool="true"
+      but="true"
+      is="true"
+      kind="true"
+      of="true"
+      a="true"
+      bad="true"
+      idea="true"
+      since="true"
+      the="true"
+      react="true"
+      warnings="true"
+      will="true"
+      not="true"
+      work="true"
+      and="true"
       it="is"
-      problematic
+      problematic="true"
       for="other reasons"
       aria-label="some label"
       data-wow="value"
@@ -467,7 +467,7 @@ test('withComponent inherits explicit shouldForwardProp', () => {
     color: hotpink;
   `
   const AnotherComponent = SomeComponent.withComponent('span')
-  const { container } = render(<AnotherComponent foo bar />)
+  const { container } = render(<AnotherComponent foo="true" bar="true" />)
   expect(container.firstChild).toMatchSnapshot()
 })
 
@@ -481,7 +481,7 @@ test('withComponent inherits explicit shouldForwardProp from flattened component
     background-color: blue;
   `
   const YetAnotherComponent = AnotherComponent.withComponent('span')
-  const { container } = render(<YetAnotherComponent foo bar />)
+  const { container } = render(<YetAnotherComponent foo="true" bar="true" />)
   expect(container.firstChild).toMatchSnapshot()
 })
 
@@ -492,7 +492,7 @@ test('withComponent should accept shouldForwardProp', () => {
   const AnotherComponent = SomeComponent.withComponent('span', {
     shouldForwardProp: prop => prop === 'xyz'
   })
-  const { container } = render(<AnotherComponent qwe xyz />)
+  const { container } = render(<AnotherComponent qwe="true" xyz="true" />)
   expect(container.firstChild).toMatchSnapshot()
 })
 
@@ -505,7 +505,9 @@ test('withComponent should compose shouldForwardProp', () => {
   const AnotherComponent = SomeComponent.withComponent('span', {
     shouldForwardProp: prop => prop !== 'bar'
   })
-  const { container } = render(<AnotherComponent foo bar qwe xyz />)
+  const { container } = render(
+    <AnotherComponent foo="true" bar="true" qwe="true" xyz="true" />
+  )
   expect(container.firstChild).toMatchSnapshot()
 })
 
@@ -521,6 +523,8 @@ test('withComponent should compose shouldForwardProp with a flattened component'
   const YetAnotherComponent = SomeComponent.withComponent('span', {
     shouldForwardProp: prop => prop !== 'bar'
   })
-  const { container } = render(<YetAnotherComponent foo bar qwe xyz />)
+  const { container } = render(
+    <YetAnotherComponent foo="true" bar="true" qwe="true" xyz="true" />
+  )
   expect(container.firstChild).toMatchSnapshot()
 })

From 35b151c8f869bd2113a36d7c6b60460df1d4a9b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 13 Dec 2024 00:21:51 +0100
Subject: [PATCH 36/54] tweak

---
 packages/jest/src/matchers.js                 |  5 ++
 packages/jest/src/utils.js                    |  3 -
 .../test/__snapshots__/printer.test.js.snap   |  8 +--
 packages/jest/test/matchers.test.js           | 23 ++++++-
 packages/jest/test/printer.test.js            | 66 ++++++++++++++-----
 5 files changed, 77 insertions(+), 28 deletions(-)

diff --git a/packages/jest/src/matchers.js b/packages/jest/src/matchers.js
index d5d9b9330b..4edae6bb6c 100644
--- a/packages/jest/src/matchers.js
+++ b/packages/jest/src/matchers.js
@@ -44,6 +44,11 @@ function toHaveStyleRule(
   value,
   options /* ?: { target?: string | RegExp, media?: string } */ = {}
 ) {
+  if (Array.isArray(received)) {
+    throw new Error(
+      '`toHaveStyleRule` expects to receive a single element but it received an array.'
+    )
+  }
   const { target, media } = options
   const classNames = getClassNamesFromNodes([received])
   const cssString = getStylesFromClassNames(classNames, getStyleElements())
diff --git a/packages/jest/src/utils.js b/packages/jest/src/utils.js
index f705d522c4..6f07d60756 100644
--- a/packages/jest/src/utils.js
+++ b/packages/jest/src/utils.js
@@ -100,9 +100,6 @@ function getClassNamesFromCheerio(selectors, node) {
 }
 
 function getClassNamesFromDOMElement(selectors, node) {
-  if (!isDOMElement(node)) {
-    throw new Error('`toHaveStyleRule` expects to receive an element.')
-  }
   return getClassNames(selectors, node.getAttribute('class'))
 }
 
diff --git a/packages/jest/test/__snapshots__/printer.test.js.snap b/packages/jest/test/__snapshots__/printer.test.js.snap
index 85f6444a1a..0c53bd88af 100644
--- a/packages/jest/test/__snapshots__/printer.test.js.snap
+++ b/packages/jest/test/__snapshots__/printer.test.js.snap
@@ -40,10 +40,10 @@ exports[`jest-emotion with DOM elements disabled replaces class names and insert
 }
 
 <div
-  class="emotion-0"
+  className="emotion-0"
 >
   <svg
-    class="emotion-1"
+    className="emotion-1"
   />
 </div>"
 `;
@@ -76,10 +76,10 @@ exports[`jest-emotion with dom elements replaces class names and inserts styles
 }
 
 <div
-  class="emotion-0"
+  className="emotion-0"
 >
   <svg
-    class="emotion-1"
+    className="emotion-1"
   />
 </div>"
 `;
diff --git a/packages/jest/test/matchers.test.js b/packages/jest/test/matchers.test.js
index 5360d98cbd..b699737fac 100644
--- a/packages/jest/test/matchers.test.js
+++ b/packages/jest/test/matchers.test.js
@@ -1,7 +1,9 @@
 /** @jsx jsx */
 import 'test-utils/setup-env'
 import React from 'react'
+import { act } from 'react'
 import { render } from '@testing-library/react'
+import * as testRenderer from 'react-test-renderer'
 import { css, jsx } from '@emotion/react'
 import styled from '@emotion/styled'
 import { matchers } from '@emotion/jest'
@@ -292,11 +294,26 @@ describe('toHaveStyleRule', () => {
     expect(container.firstChild.firstChild).toHaveStyleRule('color', 'hotpink')
   })
 
-  test('should throw a friendly error when it receives non-element', () => {
+  test('should throw a friendly error when it receives an array', async () => {
+    const tree = (
+      await act(() =>
+        testRenderer.create(
+          <>
+            <div
+              css={css`
+                color: hotpink;
+              `}
+            />
+            {'Some text'}
+          </>
+        )
+      )
+    ).toJSON()
+
     expect(() =>
-      expect([]).toHaveStyleRule('color', 'hotpink')
+      expect(tree).toHaveStyleRule('color', 'hotpink')
     ).toThrowErrorMatchingInlineSnapshot(
-      `"\`toHaveStyleRule\` expects to receive an element."`
+      `"\`toHaveStyleRule\` expects to receive a single element but it received an array."`
     )
   })
 })
diff --git a/packages/jest/test/printer.test.js b/packages/jest/test/printer.test.js
index 3289885a5c..04df8787ac 100644
--- a/packages/jest/test/printer.test.js
+++ b/packages/jest/test/printer.test.js
@@ -1,11 +1,13 @@
-import React from 'react'
+/** @jsx jsx */
 import 'test-utils/setup-env'
+import React from 'react'
+import { act } from 'react'
 import prettyFormat from 'pretty-format'
-/** @jsx jsx */
 import { css, jsx, CacheProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
 import { createSerializer } from '@emotion/jest'
 import { render } from '@testing-library/react'
+import * as testRenderer from 'react-test-renderer'
 import { ignoreConsoleErrors } from 'test-utils'
 
 let emotionPlugin = createSerializer()
@@ -21,14 +23,18 @@ describe('jest-emotion with dom elements', () => {
     width: 100%;
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', () => {
-    const { container } = render(
-      <div css={divStyle}>
-        <svg css={svgStyle} />
-      </div>
-    )
-
-    const output = prettyFormat(container.firstChild, {
+  test('replaces class names and inserts styles into React test component snapshots', async () => {
+    const tree = (
+      await act(() =>
+        testRenderer.create(
+          <div css={divStyle}>
+            <svg css={svgStyle} />
+          </div>
+        )
+      )
+    ).toJSON()
+
+    const output = prettyFormat(tree, {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
     })
 
@@ -62,21 +68,23 @@ describe('jest-emotion with DOM elements disabled', () => {
     width: 100%;
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', () => {
-    const { container } = render(
-      <div css={divStyle}>
-        <svg css={svgStyle} />
-      </div>
+  test('replaces class names and inserts styles into React test component snapshots', async () => {
+    const tree = await act(() =>
+      testRenderer.create(
+        <div css={divStyle}>
+          <svg css={svgStyle} />
+        </div>
+      )
     )
 
-    const output = prettyFormat(container.firstChild, {
+    const output = prettyFormat(tree.toJSON(), {
       plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
     })
 
     expect(output).toMatchSnapshot()
   })
 
-  test('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', async () => {
     const divRef = React.createRef()
     render(
       <div css={divStyle} ref={divRef}>
@@ -143,7 +151,29 @@ describe('jest-emotion with nested selectors', () => {
     }
   `
 
-  test('replaces class names and inserts styles into React test component snapshots', () => {
+  test('replaces class names and inserts styles into React test component snapshots', async () => {
+    const tree = (
+      await act(() => testRenderer.create(<div css={divStyle} />))
+    ).toJSON()
+
+    const output = prettyFormat(tree, {
+      plugins: [emotionPlugin, ReactElement, ReactTestComponent, DOMElement]
+    })
+
+    expect(output).toBe(`.emotion-0 {
+  color: blue;
+}
+
+header .emotion-0 {
+  color: red;
+}
+
+<div
+  className="emotion-0"
+/>`)
+  })
+
+  test('replaces class names and inserts styles into DOM element snapshots', () => {
     const { container } = render(<div css={divStyle} />)
 
     const output = prettyFormat(container.firstChild, {

From 6511abc0280ce15c65eaf3f6b2d33c2b9c3ef002 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 13 Dec 2024 00:24:02 +0100
Subject: [PATCH 37/54] fixed test

---
 packages/native/test/native-styled.test.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/native/test/native-styled.test.js b/packages/native/test/native-styled.test.js
index 95a6ddad62..87d8f7be33 100644
--- a/packages/native/test/native-styled.test.js
+++ b/packages/native/test/native-styled.test.js
@@ -28,11 +28,13 @@ describe('Emotion native styled', () => {
       font-size: 20px;
       background-color: ${props => props.back};
     `
-    const tree = await act(() =>
-      renderer.create(
-        <Text style={{ fontSize: 40 }} back="red">
-          Emotion Primitives
-        </Text>
+    const tree = (
+      await act(() =>
+        renderer.create(
+          <Text style={{ fontSize: 40 }} back="red">
+            Emotion Primitives
+          </Text>
+        )
       )
     ).toJSON()
     expect(tree).toMatchSnapshot()

From 9e3912b1b5f3e7c3cec53b65ef054abe5355e6c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 13 Dec 2024 00:25:14 +0100
Subject: [PATCH 38/54] tweaks

---
 packages/jest/test/matchers.test.js        |  2 +-
 packages/jest/test/printer.test.js         |  2 +-
 packages/native/test/native-styled.test.js | 28 ++++++++++++----------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/jest/test/matchers.test.js b/packages/jest/test/matchers.test.js
index b699737fac..131c432589 100644
--- a/packages/jest/test/matchers.test.js
+++ b/packages/jest/test/matchers.test.js
@@ -3,7 +3,7 @@ import 'test-utils/setup-env'
 import React from 'react'
 import { act } from 'react'
 import { render } from '@testing-library/react'
-import * as testRenderer from 'react-test-renderer'
+import testRenderer from 'react-test-renderer'
 import { css, jsx } from '@emotion/react'
 import styled from '@emotion/styled'
 import { matchers } from '@emotion/jest'
diff --git a/packages/jest/test/printer.test.js b/packages/jest/test/printer.test.js
index 04df8787ac..31161eda09 100644
--- a/packages/jest/test/printer.test.js
+++ b/packages/jest/test/printer.test.js
@@ -7,7 +7,7 @@ import { css, jsx, CacheProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
 import { createSerializer } from '@emotion/jest'
 import { render } from '@testing-library/react'
-import * as testRenderer from 'react-test-renderer'
+import testRenderer from 'react-test-renderer'
 import { ignoreConsoleErrors } from 'test-utils'
 
 let emotionPlugin = createSerializer()
diff --git a/packages/native/test/native-styled.test.js b/packages/native/test/native-styled.test.js
index 87d8f7be33..4538a3b038 100644
--- a/packages/native/test/native-styled.test.js
+++ b/packages/native/test/native-styled.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { act } from 'react'
-import renderer from 'react-test-renderer'
+import testRenderer from 'react-test-renderer'
 import { ThemeProvider } from '@emotion/react'
 import styled, { css } from '@emotion/native'
 import reactNative from 'react-native'
@@ -30,7 +30,7 @@ describe('Emotion native styled', () => {
     `
     const tree = (
       await act(() =>
-        renderer.create(
+        testRenderer.create(
           <Text style={{ fontSize: 40 }} back="red">
             Emotion Primitives
           </Text>
@@ -47,7 +47,7 @@ describe('Emotion native styled', () => {
 
     const tree = (
       await act(() =>
-        renderer.create(
+        testRenderer.create(
           <ThemeProvider theme={theme}>
             <Text>Hello World</Text>
           </ThemeProvider>
@@ -64,7 +64,7 @@ describe('Emotion native styled', () => {
     }))
     const tree = (
       await act(() =>
-        renderer.create(<Text decor="hotpink">Emotion Primitives</Text>)
+        testRenderer.create(<Text decor="hotpink">Emotion Primitives</Text>)
       )
     ).toJSON()
     expect(tree).toMatchSnapshot()
@@ -76,7 +76,7 @@ describe('Emotion native styled', () => {
     `
     const tree = (
       await act(() =>
-        renderer.create(
+        testRenderer.create(
           <Title style={{ padding: 10 }}>Emotion primitives</Title>
         )
       )
@@ -91,7 +91,7 @@ describe('Emotion native styled', () => {
     `
     const tree = (
       await act(() =>
-        renderer.create(<Text style={styles.foo}>Emotion primitives</Text>)
+        testRenderer.create(<Text style={styles.foo}>Emotion primitives</Text>)
       )
     ).toJSON()
     expect(tree).toMatchSnapshot()
@@ -103,7 +103,7 @@ describe('Emotion native styled', () => {
     `
     const Name = Text.withComponent(reactNative.Text)
     const tree = (
-      await act(() => renderer.create(<Name decor="hotpink">Mike</Name>))
+      await act(() => testRenderer.create(<Name decor="hotpink">Mike</Name>))
     ).toJSON()
     expect(tree).toMatchSnapshot()
   })
@@ -118,7 +118,7 @@ describe('Emotion native styled', () => {
       font-style: ${props => props.sty};
     `
     const tree = (
-      await act(() => renderer.create(<StyledTitle sty="italic" />))
+      await act(() => testRenderer.create(<StyledTitle sty="italic" />))
     ).toJSON()
     expect(tree).toMatchSnapshot()
   })
@@ -127,10 +127,12 @@ describe('Emotion native styled', () => {
     const ViewOne = styled.View`
       background-color: ${props => props.color};
     `
-    const treeOne = await act(() => renderer.create(<ViewOne color="green" />))
+    const treeOne = await act(() =>
+      testRenderer.create(<ViewOne color="green" />)
+    )
     const ViewTwo = ViewOne.withComponent(reactNative.Text)
     const treeTwo = await act(() =>
-      renderer.create(<ViewTwo color="hotpink" />)
+      testRenderer.create(<ViewTwo color="hotpink" />)
     )
 
     expect(treeOne).toMatchSnapshot()
@@ -143,7 +145,7 @@ describe('Emotion native styled', () => {
     `
     const tree = (
       await act(() =>
-        renderer.create(
+        testRenderer.create(
           <Image
             source={{
               uri: 'https://camo.githubusercontent.com/209bdea972b9b6ef90220c59ecbe66d35ffefa8a/68747470733a2f2f63646e2e7261776769742e636f6d2f746b6834342f656d6f74696f6e2f6d61737465722f656d6f74696f6e2e706e67',
@@ -164,7 +166,7 @@ describe('Emotion native styled', () => {
       padding: 20;
     `
 
-    await act(() => renderer.create(<Text>Hello World</Text>))
+    await act(() => testRenderer.create(<Text>Hello World</Text>))
 
     expect(console.error).toBeCalledWith(
       "'padding' shorthand property requires units for example - padding: 20px or padding: 10px 20px 40px 50px"
@@ -183,7 +185,7 @@ describe('Emotion native styled', () => {
 
     const tree = (
       await act(() =>
-        renderer.create(<Text backgroundColor="blue">Hello World</Text>)
+        testRenderer.create(<Text backgroundColor="blue">Hello World</Text>)
       )
     ).toJSON()
 

From bd315a1e04b39be911f5f605e5f7a885caddeefd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 13 Dec 2024 00:28:27 +0100
Subject: [PATCH 39/54] unskip 2 tests

---
 .../css/test/__snapshots__/css.test.js.snap   | 33 +++++++++++++++++++
 packages/css/test/css.test.js                 |  2 +-
 .../instance/__snapshots__/css.test.js.snap   | 30 +++++++++++++++++
 packages/css/test/instance/css.test.js        |  2 +-
 4 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/packages/css/test/__snapshots__/css.test.js.snap b/packages/css/test/__snapshots__/css.test.js.snap
index e1df309402..c4b2a1a926 100644
--- a/packages/css/test/__snapshots__/css.test.js.snap
+++ b/packages/css/test/__snapshots__/css.test.js.snap
@@ -439,6 +439,39 @@ exports[`css nested at rule 1`] = `
 />
 `;
 
+exports[`css nested at rules 1`] = `
+@supports (display: grid) {
+  .emotion-0 {
+    display: grid;
+  }
+
+  @supports (display: flex) {
+    .emotion-0 {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+    }
+  }
+}
+
+@media (min-width: 420px) {
+  .emotion-0 {
+    color: pink;
+  }
+
+  @media (max-width: 500px) {
+    .emotion-0 {
+      color: hotpink;
+    }
+  }
+}
+
+<div
+  class="emotion-0"
+/>
+`;
+
 exports[`css null rule 1`] = `
 <div
   class="emotion-0"
diff --git a/packages/css/test/css.test.js b/packages/css/test/css.test.js
index bdbd457c55..a7264ef135 100644
--- a/packages/css/test/css.test.js
+++ b/packages/css/test/css.test.js
@@ -145,7 +145,7 @@ describe('css', () => {
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
-  test.skip('nested at rules', () => {
+  test('nested at rules', () => {
     const cls1 = css`
       @supports (display: grid) {
         display: grid;
diff --git a/packages/css/test/instance/__snapshots__/css.test.js.snap b/packages/css/test/instance/__snapshots__/css.test.js.snap
index 110868fccb..1c4228cbfc 100644
--- a/packages/css/test/instance/__snapshots__/css.test.js.snap
+++ b/packages/css/test/instance/__snapshots__/css.test.js.snap
@@ -340,6 +340,36 @@ exports[`css nested array 1`] = `
 />
 `;
 
+exports[`css nested at rules 1`] = `
+@supports (display: grid) {
+  .emotion-0 {
+    display: grid;
+  }
+
+  @supports (display: flex) {
+    .emotion-0 {
+      display: flex;
+    }
+  }
+}
+
+@media (min-width: 420px) {
+  .emotion-0 {
+    color: hotpink;
+  }
+
+  @media (max-width: 500px) {
+    .emotion-0 {
+      color: hotpink;
+    }
+  }
+}
+
+<div
+  class="emotion-0"
+/>
+`;
+
 exports[`css null rule 1`] = `
 <div
   class="emotion-0"
diff --git a/packages/css/test/instance/css.test.js b/packages/css/test/instance/css.test.js
index 3c13228855..600cbdc38e 100644
--- a/packages/css/test/instance/css.test.js
+++ b/packages/css/test/instance/css.test.js
@@ -150,7 +150,7 @@ describe('css', () => {
     const { container } = render(<div className={cls1} />)
     expect(container.firstChild).toMatchSnapshot()
   })
-  test.skip('nested at rules', () => {
+  test('nested at rules', () => {
     const cls1 = differentCss`
       @supports (display: grid) {
         display: grid;

From de74f253dfac50a8b3dd5c61c9acf890f3604090 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 13 Dec 2024 00:29:00 +0100
Subject: [PATCH 40/54] unskip again

---
 packages/jest/test/matchers.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/jest/test/matchers.test.js b/packages/jest/test/matchers.test.js
index 131c432589..18e9ed61cb 100644
--- a/packages/jest/test/matchers.test.js
+++ b/packages/jest/test/matchers.test.js
@@ -67,7 +67,7 @@ describe('toHaveStyleRule', () => {
     expect(container.firstChild).toHaveStyleRule('color', /red/)
   })
 
-  it.skip('returns a message explaining the failure', () => {
+  it('returns a message explaining the failure', () => {
     const { container } = render(<div css={divStyle} />)
 
     // When expect(container.firstChild).toHaveStyleRule('color', 'blue') fails

From 5f411c7b0f93c11a72c2f5b2bb7471616f4ade7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 13 Dec 2024 12:01:08 +0100
Subject: [PATCH 41/54] stuff

---
 packages/css/test/instance/inline.test.js | 13 ++++---------
 packages/css/test/instance/stream.test.js | 14 ++++----------
 packages/server/test/inline.test.js       | 14 ++++----------
 packages/server/test/stream.test.js       | 14 ++++----------
 packages/server/test/util.js              |  1 +
 scripts/test-utils/src/index.js           |  5 -----
 6 files changed, 17 insertions(+), 44 deletions(-)

diff --git a/packages/css/test/instance/inline.test.js b/packages/css/test/instance/inline.test.js
index 7f77816275..6d65cdd6fb 100644
--- a/packages/css/test/instance/inline.test.js
+++ b/packages/css/test/instance/inline.test.js
@@ -1,8 +1,4 @@
-import {
-  stripDataReactRoot,
-  disableBrowserEnvTemporarily,
-  safeQuerySelector
-} from 'test-utils'
+import { disableBrowserEnvTemporarily, safeQuerySelector } from 'test-utils'
 import {
   getComponents,
   getInjectedRules,
@@ -41,15 +37,14 @@ describe('renderStylesToString', () => {
       ).toMatchSnapshot()
     })
   })
+  // blocked on https://github.com/facebook/react/issues/31754
   test.skip('renders large recursive component', async () => {
     await disableBrowserEnvTemporarily(() => {
       resetAllModules()
       const BigComponent = createBigComponent(emotion)
       expect(
-        stripDataReactRoot(
-          emotionServer.renderStylesToString(
-            renderToString(<BigComponent count={200} />)
-          )
+        emotionServer.renderStylesToString(
+          renderToString(<BigComponent count={200} />)
         )
       ).toMatchSnapshot()
     })
diff --git a/packages/css/test/instance/stream.test.js b/packages/css/test/instance/stream.test.js
index bff2c94aca..af327f8336 100644
--- a/packages/css/test/instance/stream.test.js
+++ b/packages/css/test/instance/stream.test.js
@@ -1,11 +1,7 @@
 /**
  * @jest-environment node
  */
-import {
-  stripDataReactRoot,
-  disableBrowserEnvTemporarily,
-  safeQuerySelector
-} from 'test-utils'
+import { disableBrowserEnvTemporarily, safeQuerySelector } from 'test-utils'
 
 let React
 let renderToString
@@ -44,11 +40,9 @@ describe('renderStylesToNodeStream', () => {
       resetAllModules()
       const BigComponent = util.createBigComponent(emotion)
       expect(
-        stripDataReactRoot(
-          await util.renderToStringWithStream(
-            <BigComponent count={200} />,
-            emotionServer
-          )
+        await util.renderToStringWithStream(
+          <BigComponent count={200} />,
+          emotionServer
         )
       ).toMatchSnapshot()
     })
diff --git a/packages/server/test/inline.test.js b/packages/server/test/inline.test.js
index 15a4b18aeb..4d290ad8bd 100644
--- a/packages/server/test/inline.test.js
+++ b/packages/server/test/inline.test.js
@@ -1,8 +1,4 @@
-import {
-  stripDataReactRoot,
-  disableBrowserEnvTemporarily,
-  safeQuerySelector
-} from 'test-utils'
+import { disableBrowserEnvTemporarily, safeQuerySelector } from 'test-utils'
 
 let React
 let renderToString
@@ -51,7 +47,7 @@ describe('renderStylesToString', () => {
       )
 
       expect(output).toEqual(expect.not.stringContaining('undefined'))
-      expect(stripDataReactRoot(output)).toMatchSnapshot()
+      expect(output).toMatchSnapshot()
     })
   })
   test.skip('renders large recursive component', async () => {
@@ -59,10 +55,8 @@ describe('renderStylesToString', () => {
       resetAllModules()
       const BigComponent = util.createBigComponent(emotion)
       expect(
-        stripDataReactRoot(
-          emotionServer.renderStylesToString(
-            renderToString(<BigComponent count={200} />)
-          )
+        emotionServer.renderStylesToString(
+          renderToString(<BigComponent count={200} />)
         )
       ).toMatchSnapshot()
     })
diff --git a/packages/server/test/stream.test.js b/packages/server/test/stream.test.js
index f8f4c158f8..a0defc8191 100644
--- a/packages/server/test/stream.test.js
+++ b/packages/server/test/stream.test.js
@@ -1,11 +1,7 @@
 /**
  * @jest-environment node
  */
-import {
-  stripDataReactRoot,
-  disableBrowserEnvTemporarily,
-  safeQuerySelector
-} from 'test-utils'
+import { disableBrowserEnvTemporarily, safeQuerySelector } from 'test-utils'
 
 let React
 let renderToString
@@ -44,11 +40,9 @@ describe('renderStylesToNodeStream', () => {
       resetAllModules()
       const BigComponent = util.createBigComponent(emotion)
       expect(
-        stripDataReactRoot(
-          await util.renderToStringWithStream(
-            <BigComponent count={200} />,
-            emotionServer
-          )
+        await util.renderToStringWithStream(
+          <BigComponent count={200} />,
+          emotionServer
         )
       ).toMatchSnapshot()
     })
diff --git a/packages/server/test/util.js b/packages/server/test/util.js
index 269f052747..f34b4e7255 100644
--- a/packages/server/test/util.js
+++ b/packages/server/test/util.js
@@ -150,6 +150,7 @@ export const createBigComponent = ({ injectGlobal, css } /*: Emotion */) => {
               .toString(16)
               .padStart(6, '0')
         })}
+        data-count={count}
       >
         woah there
         <span>hello world</span>
diff --git a/scripts/test-utils/src/index.js b/scripts/test-utils/src/index.js
index 41ba5d70a8..8f7d808ce6 100644
--- a/scripts/test-utils/src/index.js
+++ b/scripts/test-utils/src/index.js
@@ -26,11 +26,6 @@ export let safeQuerySelector = (selector /*: string */) /*: HTMLElement */ => {
   return element
 }
 
-// React 18 doesn't use this attribute anymore
-// we normalize this to avoid snapshot mismatches between React versions
-export let stripDataReactRoot = (html /*: string*/) /*: string*/ =>
-  html.replace(' data-reactroot=""', '')
-
 const removeGlobalProp = prop => {
   let descriptor = Object.getOwnPropertyDescriptor(global, prop)
   Object.defineProperty(global, prop, {

From a9cf700b932d6cce0dd9449c2e19aa8080bf1a50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 13 Dec 2024 12:27:38 +0100
Subject: [PATCH 42/54] fix streams

---
 packages/css/test/instance/stream.test.js |  5 ++---
 packages/server/test/stream.test.js       |  5 ++---
 packages/server/test/util.js              | 19 +++++++++++++++----
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/css/test/instance/stream.test.js b/packages/css/test/instance/stream.test.js
index af327f8336..fb899f77fa 100644
--- a/packages/css/test/instance/stream.test.js
+++ b/packages/css/test/instance/stream.test.js
@@ -1,8 +1,7 @@
-/**
- * @jest-environment node
- */
 import { disableBrowserEnvTemporarily, safeQuerySelector } from 'test-utils'
 
+globalThis.setImmediate ??= cb => setTimeout(cb, 0)
+
 let React
 let renderToString
 let render
diff --git a/packages/server/test/stream.test.js b/packages/server/test/stream.test.js
index a0defc8191..9c03606419 100644
--- a/packages/server/test/stream.test.js
+++ b/packages/server/test/stream.test.js
@@ -1,8 +1,7 @@
-/**
- * @jest-environment node
- */
 import { disableBrowserEnvTemporarily, safeQuerySelector } from 'test-utils'
 
+globalThis.setImmediate ??= cb => setTimeout(cb, 0)
+
 let React
 let renderToString
 let render
diff --git a/packages/server/test/util.js b/packages/server/test/util.js
index f34b4e7255..1563001d36 100644
--- a/packages/server/test/util.js
+++ b/packages/server/test/util.js
@@ -4,6 +4,8 @@ import prettify from '@emotion/css-prettifier'
 /* import type { Emotion } from '@emotion/css/create-instance' */
 import { renderToPipeableStream } from 'react-dom/server'
 import HTMLSerializer from 'jest-serializer-html'
+import { Buffer } from 'buffer'
+import { Transform } from 'stream'
 
 /*
 type EmotionServer = {
@@ -150,7 +152,6 @@ export const createBigComponent = ({ injectGlobal, css } /*: Emotion */) => {
               .toString(16)
               .padStart(6, '0')
         })}
-        data-count={count}
       >
         woah there
         <span>hello world</span>
@@ -216,14 +217,24 @@ export const getInjectedRules = () =>
       .join('')
   )
 
+class TransformToBuffer extends Transform {
+  constructor() {
+    super({ readableObjectMode: false, writableObjectMode: false })
+  }
+  _transform(chunk, encoding, callback) {
+    this.push(!Buffer.isBuffer(chunk) ? Buffer.from(chunk) : chunk)
+    callback()
+  }
+}
+
 export const renderToStringWithStream = (
   element /*: React.Element<*> */,
   { renderStylesToNodeStream } /*: EmotionServer */
 ) /*: Promise<string> */ =>
   new Promise((resolve, reject) => {
-    const stream = renderToPipeableStream(element).pipe(
-      renderStylesToNodeStream()
-    )
+    const stream = renderStylesToNodeStream()
+    const { pipe } = renderToPipeableStream(element)
+    pipe(new TransformToBuffer()).pipe(stream)
     let html = ''
     stream.on('data', data => {
       html += data.toString()

From 65735bce5676613215758545cf7697299806e20f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 14 Dec 2024 00:02:33 +0100
Subject: [PATCH 43/54] skip some tests

---
 packages/css/test/instance/stream.test.js | 4 +++-
 packages/server/test/inline.test.js       | 2 ++
 packages/server/test/stream.test.js       | 4 +++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/css/test/instance/stream.test.js b/packages/css/test/instance/stream.test.js
index fb899f77fa..3324194297 100644
--- a/packages/css/test/instance/stream.test.js
+++ b/packages/css/test/instance/stream.test.js
@@ -34,7 +34,9 @@ describe('renderStylesToNodeStream', () => {
       ).toMatchSnapshot()
     })
   })
-  test('renders large recursive component', async () => {
+
+  // blocked on https://github.com/facebook/react/issues/31754
+  test.skip('renders large recursive component', async () => {
     await disableBrowserEnvTemporarily(async () => {
       resetAllModules()
       const BigComponent = util.createBigComponent(emotion)
diff --git a/packages/server/test/inline.test.js b/packages/server/test/inline.test.js
index 4d290ad8bd..b5f551b0ad 100644
--- a/packages/server/test/inline.test.js
+++ b/packages/server/test/inline.test.js
@@ -50,6 +50,8 @@ describe('renderStylesToString', () => {
       expect(output).toMatchSnapshot()
     })
   })
+
+  // blocked on https://github.com/facebook/react/issues/31754
   test.skip('renders large recursive component', async () => {
     await disableBrowserEnvTemporarily(() => {
       resetAllModules()
diff --git a/packages/server/test/stream.test.js b/packages/server/test/stream.test.js
index 9c03606419..f6242519cf 100644
--- a/packages/server/test/stream.test.js
+++ b/packages/server/test/stream.test.js
@@ -34,7 +34,9 @@ describe('renderStylesToNodeStream', () => {
       ).toMatchSnapshot()
     })
   })
-  test('renders large recursive component', async () => {
+
+  // blocked on https://github.com/facebook/react/issues/31754
+  test.skip('renders large recursive component', async () => {
     await disableBrowserEnvTemporarily(async () => {
       resetAllModules()
       const BigComponent = util.createBigComponent(emotion)

From 88873ec6bc7cd1eb3fe56b4b0e4ca7089d2121b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 14 Dec 2024 00:04:36 +0100
Subject: [PATCH 44/54] tweak

---
 packages/react/__tests__/rehydration.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
index ae9cdc85c4..6ab113a97e 100644
--- a/packages/react/__tests__/rehydration.js
+++ b/packages/react/__tests__/rehydration.js
@@ -140,7 +140,7 @@ test('initializing another Emotion instance should not move already moved styles
           data-emotion="stl"
           data-s=""
         >
-          
+
           .stl-168r6j{color:hotpink;}
         </style>
       </div>
@@ -188,7 +188,7 @@ test('initializing another Emotion instance should not move already moved styles
           data-emotion="stl"
           data-s=""
         >
-          
+
           .stl-168r6j{color:hotpink;}
         </style>
       </div>
@@ -405,7 +405,7 @@ test('duplicated global styles can be removed safely after rehydrating HTML SSRe
         data-emotion="muii-global"
         data-s=""
       >
-        
+
       </style>
       <style
         data-emotion="muii 1lrxbo5"
@@ -604,7 +604,8 @@ test('duplicated global styles can be removed safely after rehydrating HTML SSRe
     </head>
   `)
 })
-;(React.useId ? describe : describe.skip)('useId', () => {
+
+describe('useId', () => {
   test('no hydration mismatch for styled when using useId', async () => {
     const finalHTML = await disableBrowserEnvTemporarily(() => {
       resetAllModules()

From 04f646771d1df9f9d9a57ddda1b262cdb6594c0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 14 Dec 2024 00:10:16 +0100
Subject: [PATCH 45/54] fix things

---
 .../__tests__/__snapshots__/at-import.js.snap |  8 ++-----
 packages/react/__tests__/at-import.js         | 13 +++++------
 packages/react/__tests__/import-prod.js       | 23 ++++---------------
 3 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/at-import.js.snap b/packages/react/__tests__/__snapshots__/at-import.js.snap
index 4cd8402130..ab9443d07e 100644
--- a/packages/react/__tests__/__snapshots__/at-import.js.snap
+++ b/packages/react/__tests__/__snapshots__/at-import.js.snap
@@ -19,9 +19,7 @@ exports[`basic 1`] = `
 
 exports[`basic 2`] = `
 <body>
-  <div
-    id="root"
-  >
+  <div>
     <div
       class="css-1lrxbo5"
     />
@@ -42,8 +40,6 @@ exports[`basic 4`] = `
 
 exports[`basic 5`] = `
 <body>
-  <div
-    id="root"
-  />
+  <div />
 </body>
 `;
diff --git a/packages/react/__tests__/at-import.js b/packages/react/__tests__/at-import.js
index 338b8077a6..6a18a1fbbe 100644
--- a/packages/react/__tests__/at-import.js
+++ b/packages/react/__tests__/at-import.js
@@ -1,17 +1,17 @@
-import * as React from 'react'
 /** @jsx jsx */
+import React from 'react'
 import { jsx } from '@emotion/react'
-import { render, unmountComponentAtNode } from 'react-dom'
+import { render } from '@testing-library/react'
 import { Global, css } from '@emotion/react'
 
 beforeEach(() => {
   document.head.innerHTML = ''
-  document.body.innerHTML = `<div id="root"></div>`
+  document.body.innerHTML = ``
 })
 
 gate({ development: false }, ({ test }) => {
   test('basic', () => {
-    render(
+    const { unmount } = render(
       <React.Fragment>
         <div css={{ color: 'hotpink' }} />
         <Global
@@ -23,8 +23,7 @@ gate({ development: false }, ({ test }) => {
             }
           `}
         />
-      </React.Fragment>,
-      document.getElementById('root')
+      </React.Fragment>
     )
     expect(document.head).toMatchSnapshot()
     expect(document.body).toMatchSnapshot()
@@ -42,7 +41,7 @@ gate({ development: false }, ({ test }) => {
       ".css-1lrxbo5 {color: hotpink;}",
     ]
   `)
-    unmountComponentAtNode(document.getElementById('root'))
+    unmount()
     expect(document.head).toMatchSnapshot()
     expect(document.body).toMatchSnapshot()
   })
diff --git a/packages/react/__tests__/import-prod.js b/packages/react/__tests__/import-prod.js
index 4ab884bf21..1ce8689036 100644
--- a/packages/react/__tests__/import-prod.js
+++ b/packages/react/__tests__/import-prod.js
@@ -1,5 +1,6 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { render } from '@testing-library/react'
 import { css, Global } from '@emotion/react'
 import styled from '@emotion/styled'
 import prettify from '@emotion/css-prettifier'
@@ -19,23 +20,9 @@ expect.addSnapshotSerializer({
   }
 })
 
-// can't use RTL as production React 18 throws when it's trying to use `act`
-const render = children =>
-  new Promise(resolve => {
-    const el = document.createElement('div')
-    document.body.appendChild(el)
-
-    if (ReactDOM.createRoot) {
-      const root = ReactDOM.createRoot(el)
-      root.render(<div ref={resolve}>{children}</div>)
-    } else {
-      ReactDOM.render(children, el, resolve)
-    }
-  })
-
 gate({ development: false }, ({ test }) => {
-  test('it works', async () => {
-    await render(
+  test('it works', () => {
+    render(
       <div>
         <Comp>something</Comp>
 

From 1c8ad31dd7cc27c7781d6ba34e634d639eda30b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 14 Dec 2024 00:11:46 +0100
Subject: [PATCH 46/54] fix snap

---
 packages/react/__tests__/rehydration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
index 6ab113a97e..6f05dc4912 100644
--- a/packages/react/__tests__/rehydration.js
+++ b/packages/react/__tests__/rehydration.js
@@ -140,7 +140,7 @@ test('initializing another Emotion instance should not move already moved styles
           data-emotion="stl"
           data-s=""
         >
-
+        
           .stl-168r6j{color:hotpink;}
         </style>
       </div>

From 76e458688b91a524d69cf66ff26bc2ebdb6d4401 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 14 Dec 2024 08:07:02 +0100
Subject: [PATCH 47/54] fixed snapshot indent

---
 packages/react/__tests__/rehydration.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
index 6f05dc4912..f86e5b936a 100644
--- a/packages/react/__tests__/rehydration.js
+++ b/packages/react/__tests__/rehydration.js
@@ -140,7 +140,7 @@ test('initializing another Emotion instance should not move already moved styles
           data-emotion="stl"
           data-s=""
         >
-        
+          
           .stl-168r6j{color:hotpink;}
         </style>
       </div>
@@ -188,7 +188,7 @@ test('initializing another Emotion instance should not move already moved styles
           data-emotion="stl"
           data-s=""
         >
-
+          
           .stl-168r6j{color:hotpink;}
         </style>
       </div>

From b4a7248f5dc0b90416914bce4ea30848561cba81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 14 Dec 2024 08:08:42 +0100
Subject: [PATCH 48/54] fixed extra snapshot issue

---
 packages/react/__tests__/rehydration.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/__tests__/rehydration.js b/packages/react/__tests__/rehydration.js
index f86e5b936a..b4cb40d142 100644
--- a/packages/react/__tests__/rehydration.js
+++ b/packages/react/__tests__/rehydration.js
@@ -405,7 +405,7 @@ test('duplicated global styles can be removed safely after rehydrating HTML SSRe
         data-emotion="muii-global"
         data-s=""
       >
-
+        
       </style>
       <style
         data-emotion="muii 1lrxbo5"

From 9b62fd215b07ae1e5988cc28f9023ea036e5a3f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 14 Dec 2024 08:51:39 +0100
Subject: [PATCH 49/54] strip-ansi

---
 packages/jest/package.json                             | 1 +
 packages/jest/test/__snapshots__/matchers.test.js.snap | 8 ++++----
 packages/jest/test/matchers.test.js                    | 5 +++--
 yarn.lock                                              | 1 +
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/jest/package.json b/packages/jest/package.json
index 44e15f56a6..2e335f32d3 100644
--- a/packages/jest/package.json
+++ b/packages/jest/package.json
@@ -65,6 +65,7 @@
     "pretty-format": "^22.4.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",
+    "strip-ansi": "^6.0.1",
     "typescript": "^5.4.5"
   },
   "author": "Kye Hohenberger",
diff --git a/packages/jest/test/__snapshots__/matchers.test.js.snap b/packages/jest/test/__snapshots__/matchers.test.js.snap
index e8e0942745..d792336b5f 100644
--- a/packages/jest/test/__snapshots__/matchers.test.js.snap
+++ b/packages/jest/test/__snapshots__/matchers.test.js.snap
@@ -2,14 +2,14 @@
 
 exports[`toHaveStyleRule returns a message explaining the failure 1`] = `
 "Expected color to match:
-  blue
+  blue
 Received:
-  red"
+  red"
 `;
 
 exports[`toHaveStyleRule returns a message explaining the failure 2`] = `
 "Expected color not to match:
-  red
+  red
 Received:
-  red"
+  red"
 `;
diff --git a/packages/jest/test/matchers.test.js b/packages/jest/test/matchers.test.js
index 18e9ed61cb..a92b7d43b1 100644
--- a/packages/jest/test/matchers.test.js
+++ b/packages/jest/test/matchers.test.js
@@ -7,6 +7,7 @@ import testRenderer from 'react-test-renderer'
 import { css, jsx } from '@emotion/react'
 import styled from '@emotion/styled'
 import { matchers } from '@emotion/jest'
+import stripAnsi from 'strip-ansi'
 
 const { toHaveStyleRule } = matchers
 
@@ -72,11 +73,11 @@ describe('toHaveStyleRule', () => {
 
     // When expect(container.firstChild).toHaveStyleRule('color', 'blue') fails
     const resultFail = toHaveStyleRule(container.firstChild, 'color', 'blue')
-    expect(resultFail.message()).toMatchSnapshot()
+    expect(stripAnsi(resultFail.message())).toMatchSnapshot()
 
     // When expect(container.firstChild).not.toHaveStyleRule('color', 'red')
     const resultPass = toHaveStyleRule(container.firstChild, 'color', 'red')
-    expect(resultPass.message()).toMatchSnapshot()
+    expect(stripAnsi(resultPass.message())).toMatchSnapshot()
   })
 
   test('matches styles on the focus, hover targets', () => {
diff --git a/yarn.lock b/yarn.lock
index caaa5137a0..4e2585ee0f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2808,6 +2808,7 @@ __metadata:
     react: 19.0.0
     react-dom: 19.0.0
     specificity: ^0.4.1
+    strip-ansi: ^6.0.1
     stylis: 4.2.0
     typescript: ^5.4.5
   peerDependencies:

From ab928dbfca79f852c4fe78df1f70e92580a21ac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 14 Dec 2024 09:05:15 +0100
Subject: [PATCH 50/54] Require TS 5.1

---
 packages/react/types/index.d.ts  |  2 +-
 packages/react/types/tests.tsx   | 24 ------------------------
 packages/styled/types/base.d.ts  |  2 +-
 packages/styled/types/index.d.ts |  2 +-
 4 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/packages/react/types/index.d.ts b/packages/react/types/index.d.ts
index 4f74e6a6ba..c2bb25fe48 100644
--- a/packages/react/types/index.d.ts
+++ b/packages/react/types/index.d.ts
@@ -1,2 +1,2 @@
-// TypeScript Version: 5.0
+// TypeScript Version: 5.1
 export * from '..'
diff --git a/packages/react/types/tests.tsx b/packages/react/types/tests.tsx
index b3bd3179a7..7d3749f95e 100644
--- a/packages/react/types/tests.tsx
+++ b/packages/react/types/tests.tsx
@@ -198,30 +198,6 @@ const anim1 = keyframes`
   />
 }
 
-{
-  // based on the code from @types/react@17.x
-  // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/98fa4486aefd5a1916aa385402467a7157e3c73f/types/react/v17/index.d.ts#L540-L548
-  type OldFC<P = {}> = OldFunctionComponent<P>
-  interface OldFunctionComponent<P = {}> {
-    (
-      props: React.PropsWithChildren<P>,
-      context?: any
-    ): React.ReactElement<any, any> | null
-    propTypes?: React.WeakValidationMap<P> | undefined
-    contextTypes?: React.ValidationMap<any> | undefined
-    defaultProps?: Partial<P> | undefined
-    displayName?: string | undefined
-  }
-  // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/40993
-  // this is really problematic behaviour by @types/react@<18 IMO
-  // but it's what @types/react did so let's not break it.
-  const CompWithImplicitChildren: OldFC = () => null
-  ;<CompWithImplicitChildren>
-    content
-    <div />
-  </CompWithImplicitChildren>
-}
-
 // Tests for WithConditionalCSSProp
 {
   const WithOptionalClassName = (props: { className?: string }) => null
diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
index 06ddfa5b03..e5ad6bffec 100644
--- a/packages/styled/types/base.d.ts
+++ b/packages/styled/types/base.d.ts
@@ -1,2 +1,2 @@
-// TypeScript Version: 5.0
+// TypeScript Version: 5.1
 export * from '../base'
diff --git a/packages/styled/types/index.d.ts b/packages/styled/types/index.d.ts
index 4f74e6a6ba..c2bb25fe48 100644
--- a/packages/styled/types/index.d.ts
+++ b/packages/styled/types/index.d.ts
@@ -1,2 +1,2 @@
-// TypeScript Version: 5.0
+// TypeScript Version: 5.1
 export * from '..'

From 97171074dcdd54274b9b4932b6b6aba0278f8462 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 14 Dec 2024 18:58:00 +0100
Subject: [PATCH 51/54] `useInsertionEffect` directly in `Global`

---
 packages/react/src/global.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/global.tsx b/packages/react/src/global.tsx
index 97bc3b9981..f1627662f0 100644
--- a/packages/react/src/global.tsx
+++ b/packages/react/src/global.tsx
@@ -1,11 +1,10 @@
-import * as React from 'react'
+import React from 'react'
 import isDevelopment from '#is-development'
 import { withEmotionCache } from './context'
 import { Theme, ThemeContext } from './theming'
 import { insertStyles } from '@emotion/utils'
 import { Options as SheetOptions, StyleSheet } from '@emotion/sheet'
 import isBrowser from '#is-browser'
-import { useInsertionEffectWithLayoutFallback } from '@emotion/use-insertion-effect-with-fallbacks'
 
 import { Interpolation, serializeStyles } from '@emotion/serialize'
 
@@ -86,7 +85,7 @@ export let Global = /* #__PURE__ */ withEmotionCache<GlobalProps>(
       [sheet: StyleSheet, isRehydrating: boolean] | undefined
     >(undefined)
 
-    useInsertionEffectWithLayoutFallback(() => {
+    React.useInsertionEffect(() => {
       const key = `${cache.key}-global`
 
       // use case of https://github.com/emotion-js/emotion/issues/2675
@@ -117,7 +116,7 @@ export let Global = /* #__PURE__ */ withEmotionCache<GlobalProps>(
       }
     }, [cache])
 
-    useInsertionEffectWithLayoutFallback(() => {
+    React.useInsertionEffect(() => {
       let sheetRefCurrent = sheetRef.current!
       let [sheet, rehydrating] = sheetRefCurrent
       if (rehydrating) {

From 3b7df117c8eb95f52908c61ac448a717922a1e12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 15 Dec 2024 11:53:13 +0100
Subject: [PATCH 52/54] keep old peer dep range in
 `use-insertion-effect-with-fallbacks`

---
 packages/use-insertion-effect-with-fallbacks/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/use-insertion-effect-with-fallbacks/package.json b/packages/use-insertion-effect-with-fallbacks/package.json
index b61a9bba7b..40a7a8535a 100644
--- a/packages/use-insertion-effect-with-fallbacks/package.json
+++ b/packages/use-insertion-effect-with-fallbacks/package.json
@@ -15,7 +15,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": "^19.0.0"
+    "react": ">=16.8.0"
   },
   "devDependencies": {
     "react": "19.0.0"

From ede88b8a36f56fa3115aed59f3294dd814453ae3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 15 Dec 2024 11:56:30 +0100
Subject: [PATCH 53/54] add changeset

---
 .changeset/amaranth-owls-dream.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/amaranth-owls-dream.md

diff --git a/.changeset/amaranth-owls-dream.md b/.changeset/amaranth-owls-dream.md
new file mode 100644
index 0000000000..38b5f13f77
--- /dev/null
+++ b/.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.

From 2d7a7ee1f2b976d086894cfc4f8ba7472de53f37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 15 Dec 2024 11:57:39 +0100
Subject: [PATCH 54/54] fixed lockfile

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index 4e2585ee0f..b2495f0d2f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2999,7 +2999,7 @@ __metadata:
   dependencies:
     react: 19.0.0
   peerDependencies:
-    react: ^19.0.0
+    react: ">=16.8.0"
   languageName: unknown
   linkType: soft