viteでの環境構築メモ | テスト編

viteでの環境構築メモ(*´ω｀*)

この記事のテスト編(*´ω｀*) - viteでの環境構築メモ | まとめ - くらげになりたい。

テスト周り

vitest

• テスト | ツールガイド | Vue.js
• Vitest | A blazing fast unit test framework powered by Vite

$ pnpm add -D vitest
$ pnpm add -D @vitejs/plugin-vue @vue/test-utils jsdom @vitest/coverage-c8

vitest.config.tsの追加

import { defineConfig } from "vitest/config";
import Vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [Vue()],
  test: {
    globals: true,
    environment: "jsdom",
  },
});

package.jsonの変更

    "scripts": {
       ...
+     "test": "vitest run",
+     "test:watch": "vitest",
+     "coverage": "vitest run --coverage"
    },

tsconfig.jsonの変更

  {
    "compilerOptions": {
      "target": "ESNext",
      "useDefineForClassFields": true,
      "module": "ESNext",
      "moduleResolution": "Node",
      "strict": true,
      "jsx": "preserve",
      "resolveJsonModule": true,
-     "isolatedModules": false,
        "esModuleInterop": true,
      "lib": ["ESNext", "DOM"],
      "skipLibCheck": true,
      "noEmit": true,
-     "types": ["chrome-types"]
+     "types": ["chrome-types", "vitest/globals"]
    },
    "include": ["src/**/*", "tests/**/*"],
    "references": [{ "path": "./tsconfig.node.json" }]
  }