test: incorporate eslint-plugin-testing-library and fix reported issues

.eslintrc.json

@@ -21,6 +21,7 @@
     "react-hooks",
     "import",
     "vitest",
+    "testing-library",
     "eslint-plugin-react-compiler"
   ],
   "parser": "@typescript-eslint/parser",
@@ -109,6 +110,7 @@
   },
   "overrides": [
     {
+      "extends": ["plugin:testing-library/react"],
       "files": ["tests/**/*.ts", "tests/**/*.tsx"],
       "rules": {
         "import/extensions": ["error", "never"],

package.json

@@ -128,6 +128,7 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-compiler": "19.0.0-beta-8a03594-20241020",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-testing-library": "^6.4.0",
     "eslint-plugin-vitest": "^0.5.4",
     "jest-leak-detector": "^29.7.0",
     "jsdom": "^25.0.1",

tests/basic.test.tsx

@@ -516,16 +516,16 @@ it('stable snapshot object (#985)', async () => {
     )
   }
 
-  const { getByText, findByText } = render(<TestComponent />)
+  render(<TestComponent />)
 
-  await findByText('count: 0')
+  await screen.findByText('count: 0')
   expect(effectCount).toBe(1)
 
-  fireEvent.click(getByText('button'))
-  await findByText('count: 1')
+  fireEvent.click(screen.getByText('button'))
+  await screen.findByText('count: 1')
   expect(effectCount).toBe(1)
 
-  fireEvent.click(getByText('button'))
-  await findByText('count: 2')
+  fireEvent.click(screen.getByText('button'))
+  await screen.findByText('count: 2')
   expect(effectCount).toBe(1)
 })

tests/proxySet.test.tsx

@@ -641,16 +641,15 @@ describe('ui updates - useSnapshot', async () => {
       )
     }
 
-    const { getByText } = render(
+    render(
       <StrictMode>
         <TestComponent />
       </StrictMode>,
     )
 
-    fireEvent.click(getByText('Add Item'))
-    await waitFor(() => {
-      getByText('1')
-    })
+    fireEvent.click(screen.getByText('Add Item'))
+
+    expect(await screen.findByText('1')).toBeDefined()
   })
 
   it('should be reactive to changes when using keys method', async () => {
@@ -676,16 +675,14 @@ describe('ui updates - useSnapshot', async () => {
       )
     }
 
-    const { getByText } = render(
+    render(
       <StrictMode>
         <TestComponent />
       </StrictMode>,
     )
 
-    fireEvent.click(getByText('Add Item'))
-    await waitFor(() => {
-      getByText('item key: 1')
-    })
+    fireEvent.click(screen.getByText('Add Item'))
+    expect(await screen.findByText('item key: 1')).toBeDefined()
   })
 
   it('should be reactive to changes when using entries method', async () => {
@@ -711,16 +708,14 @@ describe('ui updates - useSnapshot', async () => {
       )
     }
 
-    const { getByText } = render(
+    render(
       <StrictMode>
         <TestComponent />
       </StrictMode>,
     )
 
-    fireEvent.click(getByText('Add Item'))
-    await waitFor(() => {
-      getByText('key: 1; value: 1')
-    })
+    fireEvent.click(screen.getByText('Add Item'))
+    expect(await screen.findByText('key: 1; value: 1')).toBeDefined()
   })
 })
 

vitest.config.ts

@@ -11,7 +11,9 @@ export default defineConfig({
   },
   test: {
     name: 'valtio',
-    setupFiles: './tests/setup.ts',
+    // Keeping globals to true triggers React Testing Library's auto cleanup
+    // https://vitest.dev/guide/migration.html
+    globals: true,
     coverage: {
       include: ['src/**/'],
       reporter: ['text', 'json', 'html', 'text-summary'],