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

2025-12-08 19:45:52 +00:00 · 2024-11-13 03:06:56 +01:00 · 2024-11-13 03:06:56 +01:00 · 5a8842fbc3
commit 5a8842fbc3
parent 15eaeb7aad
8 changed files with 104 additions and 8 deletions
--- a/.eslintrc.json
+++ b/.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"
      ],
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -20,6 +20,9 @@ devDependencies:
  '@rollup/plugin-typescript':
    specifier: ^12.1.1
    version: 12.1.1(rollup@4.24.3)(typescript@5.6.3)
+  '@testing-library/jest-dom':
+    specifier: ^6.6.3
+    version: 6.6.3
  '@testing-library/react':
    specifier: ^16.0.1
    version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc.0)(react@19.0.0-rc.0)
@ -65,6 +68,9 @@ devDependencies:
  eslint-plugin-import:
    specifier: ^2.31.0
    version: 2.31.0(@typescript-eslint/parser@8.12.2)(eslint@8.57.0)
+  eslint-plugin-jest-dom:
+    specifier: ^5.4.0
+    version: 5.4.0(@testing-library/dom@10.4.0)(eslint@8.57.0)
  eslint-plugin-prettier:
    specifier: ^5.2.1
    version: 5.2.1(eslint-config-prettier@9.1.0)(eslint@8.57.0)(prettier@3.3.3)
@ -125,6 +131,10 @@ devDependencies:

 packages:

+  /@adobe/css-tools@4.4.0:
+    resolution: {integrity: sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==}
+    dev: true
+
  /@ampproject/remapping@2.3.0:
    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
    engines: {node: '>=6.0.0'}
@ -1203,6 +1213,19 @@ packages:
      pretty-format: 27.5.1
    dev: true

+  /@testing-library/jest-dom@6.6.3:
+    resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+    dependencies:
+      '@adobe/css-tools': 4.4.0
+      aria-query: 5.3.0
+      chalk: 3.0.0
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      lodash: 4.17.21
+      redent: 3.0.0
+    dev: true
+
  /@testing-library/react@16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@19.0.0-rc.0)(react@19.0.0-rc.0):
    resolution: {integrity: sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==}
    engines: {node: '>=18'}
@ -1840,6 +1863,14 @@ packages:
      pathval: 2.0.0
    dev: true

+  /chalk@3.0.0:
+    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
  /chalk@4.1.2:
    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
    engines: {node: '>=10'}
@ -1888,6 +1919,10 @@ packages:
      which: 2.0.2
    dev: true

+  /css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+    dev: true
+
  /cssstyle@4.1.0:
    resolution: {integrity: sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==}
    engines: {node: '>=18'}
@ -2040,6 +2075,10 @@ packages:
    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
    dev: true

+  /dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+    dev: true
+
  /eastasianwidth@0.2.0:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
    dev: true
@ -2347,6 +2386,22 @@ packages:
      - supports-color
    dev: true

+  /eslint-plugin-jest-dom@5.4.0(@testing-library/dom@10.4.0)(eslint@8.57.0):
+    resolution: {integrity: sha512-yBqvFsnpS5Sybjoq61cJiUsenRkC9K32hYQBFS9doBR7nbQZZ5FyO+X7MlmfM1C48Ejx/qTuOCgukDUNyzKZ7A==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0, npm: '>=6', yarn: '>=1'}
+    peerDependencies:
+      '@testing-library/dom': ^8.0.0 || ^9.0.0 || ^10.0.0
+      eslint: ^6.8.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+    peerDependenciesMeta:
+      '@testing-library/dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@testing-library/dom': 10.4.0
+      eslint: 8.57.0
+      requireindex: 1.2.0
+    dev: true
+
  /eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0)(eslint@8.57.0)(prettier@3.3.3):
    resolution: {integrity: sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==}
    engines: {node: ^14.18.0 || >=16.0.0}
@ -2919,6 +2974,11 @@ packages:
    engines: {node: '>=0.8.19'}
    dev: true

+  /indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+    dev: true
+
  /inflight@1.0.6:
    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
    dependencies:
@ -3303,6 +3363,10 @@ packages:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
    dev: true

+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
+
  /loose-envify@1.4.0:
    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
    hasBin: true
@ -3375,6 +3439,11 @@ packages:
      mime-db: 1.52.0
    dev: true

+  /min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+    dev: true
+
  /minimatch@3.1.2:
    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
    dependencies:
@ -3681,6 +3750,14 @@ packages:
      resolve: 1.22.8
    dev: true

+  /redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+    dev: true
+
  /redux@5.0.1:
    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
    dev: true
@ -3712,6 +3789,11 @@ packages:
      set-function-name: 2.0.2
    dev: true

+  /requireindex@1.2.0:
+    resolution: {integrity: sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==}
+    engines: {node: '>=0.10.5'}
+    dev: true
+
  /resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@ -4039,6 +4121,13 @@ packages:
    engines: {node: '>=4'}
    dev: true

+  /strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      min-indent: 1.0.1
+    dev: true
+
  /strip-json-comments@3.1.1:
    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
    engines: {node: '>=8'}
--- a/tests/setup.ts
+++ b/tests/setup.ts
@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'
--- a/tests/shallow.test.tsx
+++ b/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')
  })
 })
--- a/tests/ssr.test.tsx
+++ b/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)
    })
  },
--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,6 +13,7 @@
    "verbatimModuleSyntax": true,
    "declaration": true,
    "isolatedDeclarations": true,
+    "types": ["@testing-library/jest-dom"],
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
--- a/vitest.config.ts
+++ b/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'],