Problem:
I am working on a React project using Vite and TypeScript, and I've encountered some warnings while running tests with Vitest and RTL (React Testing Library). Despite the tests running fine, I previously faced issues with not using cleanup() breaking some tests. The warnings are as follows:

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.

Environment:

  • 在devContainer中运行(Node.js&类型脚本图像)
  • node 版本:20.x

Dependencies:

{
  "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 Configuration (100):

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 Configuration (100):

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

Question: 如何解决这些警告以确保稳定的测试环境?是否有特定的配置或版本,我应该使用Vitest和RTL来支持这些功能?

Note个 我之前的一个项目使用了基本相同的设置和版本,我没有收到任何关于这方面的警告.

推荐答案

Vitest希望After Each是全局定义的,但默认情况并非如此.

因此,try 将以下内容添加到您的Vite配置中

test: {
  ....
  globals: true
}

有关更多信息,请参阅https://github.com/testing-library/vue-testing-library/issues/296

Typescript相关问答推荐

根据第一个参数的值设置第二个参数的类型

需要使用相同组件重新加载路由变更数据—React TSX

将props传递给子组件并有条件地呈现它''

类型脚本泛型最初推断然后设置

返回具有递归属性的泛型类型的泛型函数

参数属性类型定义的REACT-RUTER-DOM中的加载器属性错误

是否可以从函数类型中创建简化的类型,go 掉参数中任何看起来像回调的内容,而保留其余的内容?

以Angular 自定义快捷菜单

TypeScrip错误:为循环中的对象属性赋值

类型脚本-处理值或返回值的函数

界面中数组中的混合类型导致打字错误

如何在try 运行独立的文字脚本Angular 项目时修复Visual Studio中的MODULE_NOT_FOUND

设置不允许相同类型的多个参数的线性规则

如何在Deno中获取Base64图像的宽/高?

递归生成常量树形 struct 的键控类型

作为参数的KeyOf变量的类型

TypeScript:如何使用泛型和子类型创建泛型默认函数?

如何避免TS2322;类型any不可分配给类型never;使用索引访问时

如何从联合类型推断函数参数?

const nav: typechecking = useNavigation() 和 const nav = useNavigation() 之间有什么区别?