test: add jest-dom matchers and eslint plugin (#2850)

.eslintrc.json

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

package.json

@@ -112,6 +112,7 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-typescript": "^12.1.1",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/node": "^22.8.4",
     "@types/react": "^18.3.12",
@@ -127,6 +128,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-6fc168f-20241025",

tests/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'

tests/shallow.test.tsx

@@ -140,7 +140,7 @@ describe('useShallow', () => {
     render(<TestShallow />)
 
     expect(countRenders).toBe(1)
-    expect(screen.getByTestId('test-shallow').textContent).toBe('a,b,c')
+    expect(screen.getByTestId('test-shallow')).toHaveTextContent('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(screen.getByTestId('test-shallow').textContent).toBe('a,b,c,d')
+    expect(screen.getByTestId('test-shallow')).toHaveTextContent('a,b,c,d')
   })
 
   it('does not cause stale closure issues', () => {
@@ -178,10 +178,10 @@ describe('useShallow', () => {
 
     render(<TestShallowWithState />)
 
-    expect(screen.getByTestId('test-shallow').textContent).toBe('a,b,c,0')
+    expect(screen.getByTestId('test-shallow')).toHaveTextContent('a,b,c,0')
 
     fireEvent.click(screen.getByTestId('test-shallow'))
 
-    expect(screen.getByTestId('test-shallow').textContent).toBe('a,b,c,1')
+    expect(screen.getByTestId('test-shallow')).toHaveTextContent('a,b,c,1')
   })
 })

tests/ssr.test.tsx

@@ -50,7 +50,7 @@ describe.skipIf(!React.version.startsWith('18'))(
       document.body.appendChild(container)
       container.innerHTML = view
 
-      expect(container.textContent).toContain('bears: 0')
+      expect(container).toHaveTextContent(/bears: 0/)
 
       await act(async () => {
         hydrateRoot(
@@ -62,7 +62,7 @@ describe.skipIf(!React.version.startsWith('18'))(
       })
 
       const bearCountText = await screen.findByText('bears: 1')
-      expect(bearCountText).not.toBeNull()
+      expect(bearCountText).toBeInTheDocument()
       document.body.removeChild(container)
     })
     it('should not have hydration errors', async () => {
@@ -90,7 +90,7 @@ describe.skipIf(!React.version.startsWith('18'))(
       document.body.appendChild(container)
       container.innerHTML = view
 
-      expect(container.textContent).toContain('bears: 0')
+      expect(container).toHaveTextContent(/bears: 0/)
 
       const consoleMock = vi.spyOn(console, 'error')
 
@@ -111,7 +111,7 @@ describe.skipIf(!React.version.startsWith('18'))(
       expect(consoleMock).toHaveBeenCalledTimes(0)
 
       const bearCountText = await screen.findByText('bears: 1')
-      expect(bearCountText).not.toBeNull()
+      expect(bearCountText).toBeInTheDocument()
       document.body.removeChild(container)
     })
   },

tsconfig.json

@@ -13,6 +13,7 @@
     "verbatimModuleSyntax": true,
     "declaration": true,
     "isolatedDeclarations": true,
+    "types": ["@testing-library/jest-dom"],
     "noEmit": true,
     "baseUrl": ".",
     "paths": {

vitest.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
     environment: 'jsdom',
     dir: 'tests',
     reporters: 'basic',
+    setupFiles: ['tests/setup.ts'],
     coverage: {
       include: ['src/**/'],
       reporter: ['text', 'json', 'html', 'text-summary'],