Vue Test Utilsによる単体テスト
Vue Test Utilsを使ってコンポーネントの単体テストを記述します。
「Vue Test Utilsによる単体テスト」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
コンポーネントをテストする
Vue Test Utilsを使うと、テスト内でコンポーネントをレンダリングし、出力を調べ、ユーザー操作をシミュレートできます。その後、コンポーネントが期待どおりに動作することを検証します。
mount
mount関数は、すべての子コンポーネントを含めてコンポーネント全体をレンダリングします。レンダリングされた出力を検索したり操作したりするためのヘルパーを備えたwrapperオブジェクトを返します。
import { mount } from "@vue/test-utils"
import Counter from "./Counter.vue"
const wrapper = mount(Counter)shallowMount
shallowMountはコンポーネントをレンダリングしますが、子コンポーネントをスタブに置き換えます。テスト対象のコンポーネントを子コンポーネントから分離できるため、純粋なユニットテストに適しています。
import { shallowMount } from "@vue/test-utils"
const wrapper = shallowMount(ParentComponent)
// child components are stubbed outmountとshallowMountの比較
コンポーネントを子コンポーネントと一緒にテストしたい場合は mount を使い、このコンポーネントだけを分離してテストしたい場合は shallowMount を使います。shallow mountにすると、テストの対象を絞り込め、実行も速くなります。
要素を見つける
CSSセレクターを指定した wrapper.find を使って要素を見つけます。find は、その要素を調べたり操作したりできるwrapperを返します。
const button = wrapper.find("button")
const title = wrapper.find(".title")レンダリング結果を検証する
レンダリングされたテキストまたはHTMLを確認し、コンポーネントが期待どおりに表示されることを検証します。
test("renders the message", () => {
const wrapper = mount(Greeting, {
props: { name: "Sam" }
})
expect(wrapper.text()).toContain("Hello, Sam")
})propsをテストする
mountのオプションを通してpropsを渡し、コンポーネントがそれらを正しくレンダリングすることを検証します。これにより、コンポーネントが入力値に応じて反応することを確認できます。
const wrapper = mount(UserCard, {
props: { user: { name: "Lin", role: "Admin" } }
})
expect(wrapper.text()).toContain("Lin")
expect(wrapper.text()).toContain("Admin")イベントを発生させる
triggerを使ってユーザー操作をシミュレートします。これはプロミスを返すため、awaitしてVueがDOMを更新してから検証してください。
test("increments on click", async () => {
const wrapper = mount(Counter)
await wrapper.find("button").trigger("click")
expect(wrapper.text()).toContain("1")
})入力値を設定する
入力要素のwrapperで setValue を使って入力操作をシミュレートし、その結果の動作を検証します。
const input = wrapper.find("input")
await input.setValue("hello@example.com")
expect(wrapper.vm.email).toBe("hello@example.com")発行されたイベントをテストする
コンポーネントがイベントを発行すると、wrapper.emittedに記録されます。正しいイベントが正しいペイロードで発生したことを検証します。
test("emits submit with form data", async () => {
const wrapper = mount(LoginForm)
await wrapper.find("form").trigger("submit")
expect(wrapper.emitted("submit")).toBeTruthy()
expect(wrapper.emitted("submit")[0]).toEqual([{ user: "" }])
})テストを組み立てる
完全なコンポーネントテストでは、コンポーネントをマウントし、操作を行い、出力または発行されたイベントを検証します。
import { mount } from "@vue/test-utils"
import TodoInput from "./TodoInput.vue"
test("adds a todo", async () => {
const wrapper = mount(TodoInput)
await wrapper.find("input").setValue("Buy milk")
await wrapper.find("button").trigger("click")
expect(wrapper.emitted("add")[0]).toEqual(["Buy milk"])
})確認テスト
Vue Test Utilsについての知識を確認しましょう。
まとめ
Vue Test Utilsでは、mount（ツリー全体）または shallowMount（子をスタブ化）でコンポーネントをレンダリングします。findで検索し、triggerとsetValueで操作をシミュレートし（これらはawaitします）、text()またはemitted()で検証します。mountのオプションを通してpropsを渡します。次はアプリ全体をエンドツーエンドでテストします。
よくある質問
「Vue Test Utilsによる単体テスト」レッスンは無料ですか？
はい。「Vue Test Utilsによる単体テスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「Vue Test Utilsによる単体テスト」で何を学びますか？
Vue Test Utilsを使ってコンポーネントの単体テストを記述します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「Vue Test Utilsによる単体テスト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- テストフレームワーク入門
- Vue Test Utilsによる単体テスト
- エンドツーエンドテスト