reactjs - Vitest varovanie: Súčasný testovací spúšťač nepodporuje afterEach/teardown háky

Problém:
Pracujem na projekte v Reacte s využitím Vite a TypeScriptu a pri spúšťaní testov s Vitest a RTL (React Testing Library) som narazil na niekoľko varovaní. Napriek tomu, že testy bežia správne, predtým som mal problémy s tým, že nepoužitie cleanup() narušovalo niektoré testy. Varovania sú nasledovné:

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.

Prostredie:

• Spustenie v devContaineri (obrázok Node.js a TypeScript)
• Verzia Node: 20.x

Závislosti:

{
  "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"
  },
}

Konfigurácia 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);

Konfigurácia 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"]
}

Otázka: Ako môžem vyriešiť tieto varovania, aby som zaistil stabilné testovacie prostredie? Existujú konkrétne konfigurácie alebo verzie, ktoré by som mal používať s Vitest a RTL na podporu týchto funkcií?

Poznámka Pracoval som na predchádzajúcom projekte s prakticky rovnakými nastaveniami a verziami a nemal som žiadne upozornenia týkajúce sa toho.

Odpoveď č. 1

Vitest očakáva, že afterEach bude globálne definované, čo v predvolenom nastavení nie je pravda.

Tak skúste pridať nasledujúce do vašej konfigurácie Vite

test: {
  ....
  globals: true
}

Viac informácií nájdete na https://github.com/testing-library/vue-testing-library/issues/296