reactjs - Vitest avertisment: Runnerul de teste curent nu suportă hook-urile afterEach/teardown

Problema:
Lucrez la un proiect React folosind Vite și TypeScript și am întâmpinat câteva avertismente în timp ce rulam teste cu Vitest și RTL (React Testing Library). Deși testele rulează fără probleme, anterior am avut probleme cu netratarea cleanup() care provoca erori în unele teste. Avertismentele sunt următoarele:

stderr | unknown 
test The current test runner does not support afterEach/teardown hooks. This means we won't be able to run automatic cleanup and you should be calling cleanup() manually.

The current test runner does not support beforeAll/afterAll hooks. This means you should be setting IS_REACT_ACT_ENVIRONMENT manually.

Mediu:

• Rularea într-un devContainer (imagine Node.js și TypeScript)
• Versiunea Node: 20.x

Dependențe:

{
  "name": "armada-website",
  "private": true,
  "version": "1.0.0",
  "engines": {
    "node": "20.x"
  },
  "scripts": {
    "dev": "vite",
    "test": "vitest",
    "coverage": "vitest --coverage",
  },
  "dependencies": {
    "@swc/helpers": "^0.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.9.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react-swc": "^3.2.0",
    "@vitest/coverage-istanbul": "^0.29.8",
    "happy-dom": "^12.10.3",
    "jsdom": "^21.1.1",
    "typescript": "^5.2.2",
    "vite": "^4.5.0",
    "vite-tsconfig-paths": "^4.2.1",
    "vitest": "^0.29.7"
  },
}

Configurare Vite (vite.config.ts):

import react from '@vitejs/plugin-react-swc';
import type { UserConfig } from 'vite';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import type { InlineConfig } from 'vitest';

interface VitestConfigExport extends UserConfig {
  test: InlineConfig;
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    environment: 'happy-dom',
    coverage: {
      provider: 'istanbul',
      lines: 90,
      functions: 90,
      branches: 90,
      statements: 90,
    },
    dir: 'src/__tests__',
  },
  exclude: ['src/__tests__'],
} as VitestConfigExport);

Configurare TypeScript (tsconfig.json):

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmit": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  },
  "include": ["vite.config.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Întrebare: Cum pot rezolva aceste avertismente pentru a asigura un mediu de testare stabil? Există configurații sau versiuni specifice pe care ar trebui să le folosesc cu Vitest și RTL pentru a susține aceste funcții?

Notă Am lucrat la un proiect anterior practic cu aceleași setări și versiuni și nu am avut nicio avertizare în legătură cu acest lucru.

Răspuns #1

Vitest se așteaptă ca afterEach să fie definit la nivel global, ceea ce nu este cazul în mod implicit.

Așa că încearcă să adaugi următoarele în configurația ta vite

test: {
  ....
  globals: true
}

Vezi https://github.com/testing-library/vue-testing-library/issues/296 pentru mai multe informații