more converted tests

emotion-js · Dec 12, 2024 · 8deec1f · 8deec1f
1 parent 2d6717f
commit 8deec1f
Show file tree

Hide file tree

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