reactjs - Vitest waarschuwing: De huidige testrunner ondersteunt geen afterEach/teardown hooks

Probleem:
Ik werk aan een React-project met Vite en TypeScript, en ik ben enkele waarschuwingen tegengekomen tijdens het uitvoeren van tests met Vitest en RTL (React Testing Library). Ondanks dat de tests goed draaien, had ik eerder problemen wanneer ik cleanup() niet gebruikte, waardoor sommige tests niet goed werkten. De waarschuwingen zijn als volgt:

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.

Omgeving:

• Uitvoeren in een devContainer (Node.js & TypeScript-image)
• Node-versie: 20.x

Afhankelijkheden:

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

Vite Configuratie (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);

TypeScript-configuratie (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"]
}

Vraag: Hoe kan ik deze waarschuwingen oplossen om een stabiele testomgeving te garanderen? Zijn er specifieke configuraties of versies die ik zou moeten gebruiken met Vitest en RTL om deze functies te ondersteunen?

Opmerking Ik werkte aan een vorig project met vrijwel dezelfde instellingen en versies, en ik kreeg geen waarschuwingen hierover.

Antwoord #1

Vitest verwacht dat afterEach globaal gedefinieerd is, wat standaard niet het geval is.

Probeer dus het volgende toe te voegen aan je Vite-configuratie

test: {
  ....
  globals: true
}

Zie https://github.com/testing-library/vue-testing-library/issues/296 voor meer informatie