VSCodeでVitestを導入したばかりのときに"Cannot find name 'beforeAll'"と表示されてしまう場合の対処法

まず、VitestはデフォルトではJestのようにグローバルなAPIを提供していないので、明治的にグローバルで使用したいということを設定しないといけない。

これを行うには2パターンある。

１つはvitest実行時に--globalsオプションを渡す。 もう一つがglobals: trueをvitest.config.tsで指定する。

// vitest.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [tsconfigPaths()],
  test: {
    globals: true,
    environment: "node",
    include: ["./src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
  },
});

そして、これをTypeScriptでもグローバルAPIで動作するように指定するにはtsconfig.jsonのtypesフィールドにvitest/globalsを追加する。

// tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
    "paths": {
      "~/*": ["./src/*"],
    },
    "types": ["vitest/globals"],
    "esModuleInterop": true,
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}

これでCannot find name 'beforeAll'という表示がエディタ上で消えるはず。

Configuring Vitest | Vitest