test: add jest-dom matchers and eslint plugin

.eslintrc.json

@@ -22,6 +22,7 @@
     "import",
     "@vitest",
     "eslint-plugin-react-compiler",
+    "jest-dom",
     "testing-library"
   ],
   "parser": "@typescript-eslint/parser",
@@ -107,6 +108,7 @@
   "overrides": [
     {
       "extends": [
+        "plugin:jest-dom/recommended",
         "plugin:testing-library/react",
         "plugin:@vitest/legacy-recommended"
       ],

.github/workflows/test-old-typescript.yml

@@ -85,6 +85,9 @@ jobs:
         if: ${{ matrix.typescript == '4.4.4' || matrix.typescript == '4.3.5' || matrix.typescript == '4.2.3' || matrix.typescript == '4.1.5' ||  matrix.typescript == '4.0.5' || startsWith(matrix.typescript, '3.') }}
         run: |
           pnpm add -D vitest@0.33.0 @vitest/coverage-v8@0.33.0 @vitest/ui@0.33.0
+          pnpm add -D @testing-library/jest-dom@5 @types/testing-library__jest-dom@5 
+          sed -i~ 's/"@testing-library\/jest-dom"/"@types\/testing-library__jest-dom"/' tsconfig.json
+
       - name: Patch testing setup for older TS
         if: ${{ matrix.typescript == '4.0.5' || startsWith(matrix.typescript, '3.') }}
         run: |

package.json

@@ -128,6 +128,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.1",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/babel__core": "^7.20.5",
@@ -147,6 +148,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",

tests/react/async.test.tsx

@@ -1,12 +1,5 @@
 import { StrictMode, Suspense, useEffect, useRef } from 'react'
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-  waitForElementToBeRemoved,
-} from '@testing-library/react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { expect, it } from 'vitest'
 import { useAtom } from 'jotai/react'

tests/react/optimization.test.tsx

@@ -41,24 +41,24 @@ it('only relevant render function called (#156)', async () => {
     </>,
   )
 
-  expect(screen.getByText('count1: 0')).toBeDefined()
-  expect(screen.getByText('count2: 0')).toBeDefined()
+  expect(screen.getByText('count1: 0')).toBeInTheDocument()
+  expect(screen.getByText('count2: 0')).toBeInTheDocument()
 
   const viewCount1AfterMount = viewCount1
   const viewCount2AfterMount = viewCount2
 
   await userEvent.click(screen.getByText('button1'))
 
-  expect(screen.getByText('count1: 1')).toBeDefined()
-  expect(screen.getByText('count2: 0')).toBeDefined()
+  expect(screen.getByText('count1: 1')).toBeInTheDocument()
+  expect(screen.getByText('count2: 0')).toBeInTheDocument()
 
   expect(viewCount1).toBe(viewCount1AfterMount + 1)
   expect(viewCount2).toBe(viewCount2AfterMount + 0)
 
   await userEvent.click(screen.getByText('button2'))
 
-  expect(screen.getByText('count1: 1')).toBeDefined()
-  expect(screen.getByText('count2: 1')).toBeDefined()
+  expect(screen.getByText('count1: 1')).toBeInTheDocument()
+  expect(screen.getByText('count2: 1')).toBeInTheDocument()
 
   expect(viewCount1).toBe(viewCount1AfterMount + 1)
   expect(viewCount2).toBe(viewCount2AfterMount + 1)
@@ -252,21 +252,21 @@ it('no extra rerenders after commit with derived atoms (#1213)', async () => {
 
   await userEvent.click(screen.getByText('inc1'))
 
-  expect(screen.getByText('count1: 1')).toBeDefined()
-  expect(screen.getByText('count2: 0')).toBeDefined()
+  expect(screen.getByText('count1: 1')).toBeInTheDocument()
+  expect(screen.getByText('count2: 0')).toBeInTheDocument()
 
   expect(viewCount1).toBe(viewCount1AfterCommit)
 
   await userEvent.click(screen.getByText('inc2'))
 
-  expect(screen.getByText('count1: 1')).toBeDefined()
-  expect(screen.getByText('count2: 1')).toBeDefined()
+  expect(screen.getByText('count1: 1')).toBeInTheDocument()
+  expect(screen.getByText('count2: 1')).toBeInTheDocument()
 
   expect(viewCount2).toBe(viewCount2AfterCommit)
 
   await userEvent.click(screen.getByText('inc1'))
 
-  expect(screen.getByText('count1: 2')).toBeDefined()
-  expect(screen.getByText('count2: 1')).toBeDefined()
+  expect(screen.getByText('count1: 2')).toBeInTheDocument()
+  expect(screen.getByText('count2: 1')).toBeInTheDocument()
   expect(viewCount1).toBe(viewCount1AfterCommit)
 })

tests/react/vanilla-utils/atomWithDefault.test.tsx

@@ -222,9 +222,9 @@ it('can be set synchronously by passing value', async () => {
 
   render(<Counter />)
 
-  expect(screen.getByText('count: 1')).toBeDefined()
+  expect(screen.getByText('count: 1')).toBeInTheDocument()
 
   await userEvent.click(screen.getByRole('button', { name: 'Set to 10' }))
 
-  expect(screen.getByText('count: 10')).toBeDefined()
+  expect(screen.getByText('count: 10')).toBeInTheDocument()
 })

tests/react/vanilla-utils/atomWithStorage.test.tsx

@@ -545,9 +545,9 @@ describe('atomWithStorage (with browser storage)', () => {
     expect(store.get(isLoggedAtom)).toBeTruthy()
     expect(store.get(isDevModeStorageAtom)).toBeTruthy()
 
-    expect(checkbox.checked).toBeTruthy()
+    expect(checkbox).toBeChecked()
     await userEvent.click(checkbox)
-    expect(checkbox.checked).toBeFalsy()
+    expect(checkbox).not.toBeChecked()
   })
 })