reactjs - אזהרת Vitest: מנהל הבדיקות הנוכחי אינו תומך ב-hooks של afterEach/teardown

בעיה:
אני עובד על פרויקט React באמצעות Vite ו-TypeScript, ונתקלתי בכמה אזהרות בעת הרצת בדיקות עם Vitest ו-RTL (React Testing Library). למרות שהבדיקות רצות כשורה, בעבר נתקלתי בבעיות כאשר לא השתמשתי ב-cleanup() ששברו חלק מהבדיקות. האזהרות הן כדלקמן:

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.

סביבה:

• הרצה ב-devContainer (תמונת Node.js ו-TypeScript)
• גרסת Node: 20.x

תלויות:

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

שאלה: איך אני יכול לפתור את האזהרות האלה כדי להבטיח סביבה יציבה לבדיקות? האם יש הגדרות או גרסאות ספציפיות שעלי להשתמש בהן עם Vitest ו-RTL כדי לתמוך בתכונות האלה?

הערה עבדתי על פרויקט קודם עם אותן הגדרות וגרסאות בעצם, ולא קיבלתי שום אזהרות בנוגע לכך.

תשובה #1

Vitest מצפה ש-afterEach יוגדר באופן גלובלי, מה שאינו המצב כברירת מחדל.

אז נסה להוסיף את הדברים הבאים לקובץ הקונפיגורציה של vite שלך

test: {
  ....
  globals: true
}

ראה https://github.com/testing-library/vue-testing-library/issues/296 למידע נוסף