Vue Academy · レッスン

VueプロジェクトでのVitest設定

vitest.config.ts、jsdom環境、@vue/test-utils、v8によるカバレッジ、テストスクリプト

「VueプロジェクトでのVitest設定」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

VueでVitestを使う理由

VitestはViteを基盤に構築された高速なテストランナーです。Vue 3プロジェクトではすでにViteを使用しているため、Vitestは同じ設定と変換処理を再利用できます。テスト用に別のビルドパイプラインを用意する必要はありません。

Jestに似たAPIに加えて、ネイティブESMとTypeScriptをサポートしています。

ツールをインストールする

Vitest、Vueのテストユーティリティ、そしてjsdom（Node用のブラウザーに似たDOM）を追加します。

// terminal
// npm install -D vitest @vue/test-utils jsdom @vitest/coverage-v8

jsdom環境

コンポーネントをマウントするにはDOMが必要です。NodeにはDOMがないため、テストはブラウザーAPIをシミュレートするjsdomで実行します。設定でテスト環境として指定してください。

// vitest.config.ts
import { defineConfig } from "vitest/config"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "jsdom",
  },
})

グローバルを有効にする

デフォルトでは、各ファイルでdescribe、it、expectをインポートします。globals: trueを設定すると、Jestのようにインポートなしでどのファイルからでも利用できます。

// vitest.config.ts
export default defineConfig({
  test: {
    environment: "jsdom",
    globals: true,
  },
})

グローバル用のTypeScript型

TypeScriptでグローバルを使う場合は、エディターがdescribeなどを認識できるように、Vitestの型を追加してください。

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

最初のテストファイル

Vitestは.test.tsまたは.spec.tsで終わるファイルを検出します。グローバルを有効にすれば、すぐにテストを記述できます。

// math.test.ts
describe("add", () => {
  it("sums two numbers", () => {
    expect(1 + 2).toBe(3)
  })
})

コンポーネントをマウントする

@vue/test-utilsをインストールしてjsdomを設定すると、テスト内で実際のコンポーネントをマウントし、レンダリング結果を検証できます。

import { mount } from "@vue/test-utils"
import Hello from "./Hello.vue"

it("renders the greeting", () => {
  const wrapper = mount(Hello, { props: { name: "Ada" } })
  expect(wrapper.text()).toContain("Hello, Ada")
})

カバレッジを追加する

カバレッジを使うと、テストで実行された行を確認できます。Vitestはv8プロバイダー（高速でネイティブ）をサポートしています。test.coverageの下で設定してください。

// vitest.config.ts
export default defineConfig({
  test: {
    coverage: {
      provider: "v8",
      reporter: ["text", "html"],
    },
  },
})

HTMLカバレッジレポート

htmlレポーターは、ブラウザーで閲覧できるレポート（デフォルトではcoverage/index.html）を出力します。開いて、ファイルごとの行カバレッジと分岐カバレッジを確認し、カバレッジが不足している箇所をハイライト表示で把握してください。

// after running coverage:
// open coverage/index.html in a browser
// red lines = not executed by any test

package.jsonのスクリプト

便利なスクリプトを設定します。testはテストスイートを実行し、coverageはカバレッジフラグ付きで実行します。

// package.json
{
  "scripts": {
    "test": "vitest",
    "test:run": "vitest run",
    "coverage": "vitest run --coverage"
  }
}

WatchモードとRunモード

通常のvitestはWatchモードで動作し、保存時に影響を受けるテストを再実行します。開発中に便利です。CIでは1回だけ実行して終了させるため、vitest runを使用してください。

// local dev:  npm run test     (watch)
// CI pipeline: npm run test:run (one pass, exits)

クイックチェック

Vitestのセットアップについて、理解度を確認してください。

まとめ

Vueプロジェクト用にVitestを設定しました。

vitest、@vue/test-utils、jsdom、そしてカバレッジプロバイダーをインストールします。
コンポーネントがDOMを利用できるよう、environment: "jsdom"を設定します。
globals: trueでテストヘルパーのインポートを省略し、tsconfigのtypesにvitest/globalsを追加します。
v8プロバイダーとhtmlレポーターを使ってカバレッジを設定します。
testとcoverageのスクリプトを追加し、CIではvitest runを使用します。

よくある質問

「VueプロジェクトでのVitest設定」レッスンは無料ですか？

はい。「VueプロジェクトでのVitest設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「VueプロジェクトでのVitest設定」で何を学びますか？

vitest.config.ts、jsdom環境、@vue/test-utils、v8によるカバレッジ、テストスクリプトブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「VueプロジェクトでのVitest設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る