test: incorporate eslint-plugin-testing-library and fix reported issu…

…es (#2844)

.eslintrc.json

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

package.json

@@ -130,6 +130,7 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-compiler": "19.0.0-beta-6fc168f-20241025",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-testing-library": "^6.4.0",
     "eslint-plugin-vitest": "^0.5.4",
     "immer": "^10.1.1",
     "jsdom": "^25.0.1",

tests/basic.test.tsx

@@ -729,7 +729,7 @@ it('works with "undefined" state', async () => {
     return <div>str: {str}</div>
   }
 
-  const { findByText } = render(
+  render(
     <StrictMode>
       <Component />
     </StrictMode>,

tests/persistAsync.test.tsx

@@ -336,8 +336,12 @@ describe('persist middleware with async configuration', () => {
     )
 
     await screen.findByText('count: 0')
+
     await waitFor(() => {
       expect(console.error).toHaveBeenCalled()
+    })
+
+    await waitFor(() => {
       expect(onRehydrateStorageSpy).toBeCalledWith({ count: 0 }, undefined)
     })
   })

tests/shallow.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { act, fireEvent, render } from '@testing-library/react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { create } from 'zustand'
 import { useShallow } from 'zustand/react/shallow'
@@ -60,27 +60,27 @@ describe('useShallow', () => {
   })
 
   it('input and output selectors always return shallow equal values', () => {
-    const res = render(
+    const { rerender } = render(
       <TestUseShallowSimple state={{ a: 1, b: 2 }} selector={Object.keys} />,
     )
 
     expect(testUseShallowSimpleCallback).toHaveBeenCalledTimes(0)
-    fireEvent.click(res.getByTestId('test-shallow'))
+    fireEvent.click(screen.getByTestId('test-shallow'))
 
     const firstRender = testUseShallowSimpleCallback.mock.lastCall?.[0]
 
     expect(testUseShallowSimpleCallback).toHaveBeenCalledTimes(1)
     expect(firstRender).toBeTruthy()
     expect(firstRender?.selectorOutput).toEqual(firstRender?.useShallowOutput)
 
-    res.rerender(
+    rerender(
       <TestUseShallowSimple
         state={{ a: 1, b: 2, c: 3 }}
         selector={Object.keys}
       />,
     )
 
-    fireEvent.click(res.getByTestId('test-shallow'))
+    fireEvent.click(screen.getByTestId('test-shallow'))
     expect(testUseShallowSimpleCallback).toHaveBeenCalledTimes(2)
 
     const secondRender = testUseShallowSimpleCallback.mock.lastCall?.[0]
@@ -91,25 +91,25 @@ describe('useShallow', () => {
 
   it('returns the previously computed instance when possible', () => {
     const state = { a: 1, b: 2 }
-    const res = render(
+    const { rerender } = render(
       <TestUseShallowSimple state={state} selector={Object.keys} />,
     )
 
-    fireEvent.click(res.getByTestId('test-shallow'))
+    fireEvent.click(screen.getByTestId('test-shallow'))
     expect(testUseShallowSimpleCallback).toHaveBeenCalledTimes(1)
     const output1 =
       testUseShallowSimpleCallback.mock.lastCall?.[0]?.useShallowOutput
     expect(output1).toBeTruthy()
 
     // Change selector, same output
-    res.rerender(
+    rerender(
       <TestUseShallowSimple
         state={state}
         selector={(state) => Object.keys(state)}
       />,
     )
 
-    fireEvent.click(res.getByTestId('test-shallow'))
+    fireEvent.click(screen.getByTestId('test-shallow'))
     expect(testUseShallowSimpleCallback).toHaveBeenCalledTimes(2)
 
     const output2 =
@@ -137,10 +137,10 @@ describe('useShallow', () => {
     }
 
     expect(countRenders).toBe(0)
-    const res = render(<TestShallow />)
+    render(<TestShallow />)
 
     expect(countRenders).toBe(1)
-    expect(res.getByTestId('test-shallow').textContent).toBe('a,b,c')
+    expect(screen.getByTestId('test-shallow').textContent).toBe('a,b,c')
 
     act(() => {
       useMyStore.setState({ a: 4 }) // This will not cause a re-render.
@@ -153,7 +153,7 @@ describe('useShallow', () => {
     })
 
     expect(countRenders).toBe(2)
-    expect(res.getByTestId('test-shallow').textContent).toBe('a,b,c,d')
+    expect(screen.getByTestId('test-shallow').textContent).toBe('a,b,c,d')
   })
 
   it('does not cause stale closure issues', () => {
@@ -176,12 +176,12 @@ describe('useShallow', () => {
       )
     }
 
-    const res = render(<TestShallowWithState />)
+    render(<TestShallowWithState />)
 
-    expect(res.getByTestId('test-shallow').textContent).toBe('a,b,c,0')
+    expect(screen.getByTestId('test-shallow').textContent).toBe('a,b,c,0')
 
-    fireEvent.click(res.getByTestId('test-shallow'))
+    fireEvent.click(screen.getByTestId('test-shallow'))
 
-    expect(res.getByTestId('test-shallow').textContent).toBe('a,b,c,1')
+    expect(screen.getByTestId('test-shallow').textContent).toBe('a,b,c,1')
   })
 })

tests/ssr.test.tsx

@@ -40,15 +40,15 @@ describe.skipIf(!React.version.startsWith('18'))(
           'react-dom/client',
         )
 
-      const markup = renderToString(
+      const view = renderToString(
         <React.Suspense fallback={<div>Loading...</div>}>
           <Counter />
         </React.Suspense>,
       )
 
       const container = document.createElement('div')
       document.body.appendChild(container)
-      container.innerHTML = markup
+      container.innerHTML = view
 
       expect(container.textContent).toContain('bears: 0')
 
@@ -80,15 +80,15 @@ describe.skipIf(!React.version.startsWith('18'))(
         return <div>bears: {bears}</div>
       }
 
-      const markup = renderToString(
+      const view = renderToString(
         <React.Suspense fallback={<div>Loading...</div>}>
           <Component />
         </React.Suspense>,
       )
 
       const container = document.createElement('div')
       document.body.appendChild(container)
-      container.innerHTML = markup
+      container.innerHTML = view
 
       expect(container.textContent).toContain('bears: 0')