Zenn
🐙

VitestでVueコンポーネントをテストする

2022/12/19に公開
Vue.js
JavaScript
Vite
Vitest
tech

コンポーネントテストとなるとまたハードルが上がる

関連記事:
JestをES6化してimport/exportを使う方法
vite版JestことVitestでユニットテスト

Vitestを使い出したがなかなか良い感じ。
ガシガシテストしていきたいが、
VueJSをテストする際、ハードルになる点がいくつかある。
その一つがコンポーネントのテストだ。

コンポーネントをVueとして登録して使用しないと、
本来の機能と食い違った動きをしてしまう。

そこで今回はViteを使いつつ、
Vueのテストツールを使ってコンポーネントのテストをしてみる。

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

Vue.jsとViteをインストール

適当なディレクトリにvueをインストールする。
今回はcreate-viteからプロジェクトを作成する。
プロジェクト名(ディレクトリ名)を comp_test とする。

bash
npm init vite
 Need to install the following packages:
   create-vite@4.0.0
 Ok to proceed? (y)
 ✔ Project name: … comp-test
 ✔ Select a framework: › Vue
 ✔ Select a variant: › TypeScript
 Scaffolding project in ~/comp-test...
 Done. Now run:
cd comp-test
npm install
npm run dev

http://localhost:5173/ へアクセス


Hello World

Vitestをインストール

TypeScriptのテストランナーにvitestを使用する。
tests ディレクトリを作成してそこにテストを格納していく

bash
mkdir tests
npm i -D vitest
vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [Vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  test: {
    globals: true,
  },
} as any)

仮のテストを作成

tests/HelloWorld.test.ts
import HelloWorld from "@/components/HelloWorld.vue";
import {beforeEach, describe, expect, test} from "vitest";

describe("HelloWorld", () => {
  test("hello world", async () => {
    expect("HelloWorld").toBe(HelloWorld.__name)
  })
})

テスト実行

bash
npx vitest run
 ✓ tests/HelloWorld.test.ts (1)

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  14:00:47
   Duration  3.06s (transform 1.76s, setup 0ms, collect 371ms, tests 7ms)

(･ω･) 問題なし！

Vue Test Utilsをインストール

Vueのテストサポートツールである @vue/test-utils をインストール。

bash
npm i -D @vue/test-utils

テスト対象の HelloWorld.vue は、
msg値をpropとして引き取り、
html上に反映する仕様のようなので、
設定値がHTML上に表示されているかを確認するテストをする。

<HelloWorld msg="new message" />

コンポーネントのテストを追加で実装する。

tests/HelloWorld.test.ts
import HelloWorld from "@/components/HelloWorld.vue";
import {beforeEach, describe, expect, test} from "vitest";
import {shallowMount} from "@vue/test-utils";

describe("HelloWorld", () => {
  test("hello world", async () => {
    expect("HelloWorld").toBe(HelloWorld.__name)
  })
  test("Component Test", async () => {
    const expected = "test message";
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg:expected },
    })
    expect(wrapper.text()).toContain(expected)
  })
})

テストを実行する。

bash
npx vitest run
 RUN  v0.25.6 ~/comp-test
 ✓ tests/HelloWorld.test.ts (2)
 Test Files  1 passed (1)
      Tests  2 passed (2)
   Start at  15:18:35
   Duration  1.88s (transform 947ms, setup 0ms, collect 277ms, tests 22ms)

(･∀･) テスト成功！

------------------- ↓ 後書きはここから ↓-------------------

参考:
https://lmiller1990.github.io/vue-testing-handbook/v3/
https://stackoverflow.com/a/74453402

Discussion