fix things

emotion-js · Dec 13, 2024 · 04f6467 · 04f6467
1 parent 88873ec
commit 04f6467
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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>