test: use screen exposed by React Testing Library

pmndrs · Nov 3, 2024 · a1bc41d · a1bc41d
1 parent a6b44ba
commit a1bc41d
Show file tree

Hide file tree

Showing 10 changed files with 336 additions and 331 deletions.
diff --git a/tests/async.test.tsx b/tests/async.test.tsx
@@ -1,7 +1,7 @@
 /// <reference types="react/canary" />
 
 import ReactExports, { StrictMode, Suspense } from 'react'
-import { fireEvent, render, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { it } from 'vitest'
 import { proxy, useSnapshot } from 'valtio'
 
@@ -30,19 +30,19 @@ it.skipIf(typeof use === 'undefined')('delayed increment', async () => {
     )
   }
 
-  const { getByText, findByText } = render(
+  render(
     <StrictMode>
       <Suspense fallback="loading">
         <Counter />
       </Suspense>
     </StrictMode>,
   )
 
-  await findByText('count: 0')
+  await screen.findByText('count: 0')
 
-  fireEvent.click(getByText('button'))
-  await findByText('loading')
-  await findByText('count: 1')
+  fireEvent.click(screen.getByText('button'))
+  await screen.findByText('loading')
+  await screen.findByText('count: 1')
 })
 
 it.skipIf(typeof use === 'undefined')('delayed object', async () => {
@@ -61,19 +61,19 @@ it.skipIf(typeof use === 'undefined')('delayed object', async () => {
     )
   }
 
-  const { getByText, findByText } = render(
+  render(
     <StrictMode>
       <Suspense fallback="loading">
         <Counter />
       </Suspense>
     </StrictMode>,
   )
 
-  await findByText('text: none')
+  await screen.findByText('text: none')
 
-  fireEvent.click(getByText('button'))
-  await findByText('loading')
-  await findByText('text: hello')
+  fireEvent.click(screen.getByText('button'))
+  await screen.findByText('loading')
+  await screen.findByText('text: hello')
 })
 
 it.skipIf(typeof use === 'undefined')(
@@ -99,26 +99,26 @@ it.skipIf(typeof use === 'undefined')(
       )
     }
 
-    const { getByText, findByText } = render(
+    render(
       <StrictMode>
         <Suspense fallback="loading">
           <Counter />
         </Suspense>
       </StrictMode>,
     )
 
-    await findByText('loading')
+    await screen.findByText('loading')
     await waitFor(() => {
-      getByText('text: counter')
-      getByText('count: 0')
+      screen.getByText('text: counter')
+      screen.getByText('count: 0')
     })
 
-    fireEvent.click(getByText('button'))
+    fireEvent.click(screen.getByText('button'))
 
-    await findByText('loading')
+    await screen.findByText('loading')
     await waitFor(() => {
-      getByText('text: counter')
-      getByText('count: 1')
+      screen.getByText('text: counter')
+      screen.getByText('count: 1')
     })
   },
 )
@@ -139,17 +139,17 @@ it.skipIf(typeof use === 'undefined')('delayed falsy value', async () => {
     )
   }
 
-  const { getByText, findByText } = render(
+  render(
     <StrictMode>
       <Suspense fallback="loading">
         <Counter />
       </Suspense>
     </StrictMode>,
   )
 
-  await findByText('value: true')
+  await screen.findByText('value: true')
 
-  fireEvent.click(getByText('button'))
-  await findByText('loading')
-  await findByText('value: null')
+  fireEvent.click(screen.getByText('button'))
+  await screen.findByText('loading')
+  await screen.findByText('value: null')
 })