reactjs - Amaran Vitest: Pemacu ujian semasa tidak menyokong hook afterEach/teardown

Masalah:
Saya sedang mengerjakan projek React menggunakan Vite dan TypeScript, dan saya telah menghadapi beberapa amaran semasa menjalankan ujian dengan Vitest dan RTL (React Testing Library). Walaupun ujian berjalan dengan baik, saya sebelum ini menghadapi masalah kerana tidak menggunakan cleanup() yang menyebabkan beberapa ujian gagal. Amaran-amaran tersebut adalah seperti berikut:

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.

Persekitaran:

• Menjalankan dalam devContainer (imej Node.js & TypeScript)
• Versi Node: 20.x

Kebergantungan:

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

Konfigurasi 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);

Konfigurasi 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"]
}

Soalan: Bagaimana saya boleh menyelesaikan amaran ini untuk memastikan persekitaran ujian yang stabil? Adakah terdapat konfigurasi atau versi tertentu yang perlu saya gunakan dengan Vitest dan RTL untuk menyokong ciri-ciri ini?

Nota Saya sedang bekerja pada projek sebelumnya dengan tetapan dan versi yang pada dasarnya sama, dan saya tidak menerima sebarang amaran mengenai ini.

Jawapan #1

Vitest menjangkakan afterEach ditakrifkan secara global, yang bukan kesnya secara lalai.

Jadi cuba tambah yang berikut ke dalam konfigurasi vite anda

test: {
  ....
  globals: true
}

Lihat https://github.com/testing-library/vue-testing-library/issues/296 untuk maklumat lanjut