Vue Academy · レッスン

ユーザー操作とイベントのテスト

wrapper.trigger('click')、setValue()、wrapper.vm.$emit()、非同期のflushPromises()

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

ユーザーの操作をシミュレートする

レンダリングを確認するだけでなく、テストではユーザーの操作を再現する必要があります。ボタンのクリック、入力欄への文字入力、フォームの送信などです。@vue/test-utilsのwrapperには、DOMイベントを発生させ、その後Vueを更新するメソッドが用意されています。

クリックイベント用のtrigger

wrapper.trigger("click")は要素のクリックイベントを発生させます。DOMが更新されるため、promiseを返します。検証時に結果が反映されるよう、awaitしてください。

const button = wrapper.get("button")
await button.trigger("click")
expect(wrapper.text()).toContain("Clicked once")

テストが非同期になる理由

VueはDOMを非同期で更新します。操作後、新しい状態は次のtickまで表示されません。triggerのpromiseをawaitすると、検証前にDOMの更新が完了します。

it("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.get("button").trigger("click")
  expect(wrapper.get(".count").text()).toBe("1")
})

入力欄用のsetValue

入力欄に文字を入力するには、inputのwrapperでwrapper.setValue(value)を使用します。値を設定してinputイベントを発生させるため、v-modelが更新されます。

const input = wrapper.get("input")
await input.setValue("hello@example.com")
expect(input.element.value).toBe("hello@example.com")

チェックボックスとセレクト

setValueは要素に応じて動作します。チェックボックスにはbooleanを、selectには選択肢の値を渡してください。

await wrapper.get("input[type=checkbox]").setValue(true)
await wrapper.get("select").setValue("tr")

発生したイベントを検証する

コンポーネントは発生させたイベントを通じて親に情報を伝えます。wrapper.emitted()は、コンポーネントが発生させたすべてのイベントを、名前をキーにした記録として返します。

await wrapper.get("button").trigger("click")
expect(wrapper.emitted()).toHaveProperty("submit")

発生したイベントのペイロードを確認する

wrapper.emitted("name")は、発生時の引数配列をまとめた配列を返します。最初に発生したイベントの最初の引数はemitted("name")[0][0]です。

await wrapper.get("button").trigger("click")
const events = wrapper.emitted("submit")
expect(events).toHaveLength(1)
expect(events[0][0]).toEqual({ email: "a@b.com" })

フォーム送信のテスト

これまでの要素を組み合わせます。入力欄に値を設定し、フォームを送信してから、発生したイベントのペイロードを検証します。

it("emits submit with the email", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.get("input").setValue("a@b.com")
  await wrapper.get("form").trigger("submit.prevent")
  expect(wrapper.emitted("submit")[0][0]).toEqual({ email: "a@b.com" })
})

コンポーネント内の非同期処理

多くのハンドラーはAPIを呼び出し、promiseが解決したときに状態を更新します。検証が実行される時点ではマイクロタスクがまだ実行されていない可能性があるため、待機する必要があります。

async function load() {
  loading.value = true
  data.value = await fetchData()
  loading.value = false
}

flushPromises

Test UtilsのflushPromisesは、保留中のすべてのマイクロタスク（thenコールバック）を解決します。非同期アクションを発生させた後にawaitすると、解決されたpromiseと、それによるDOM更新が適用されます。

import { flushPromises } from "@vue/test-utils"

await wrapper.get("button").trigger("click")
await flushPromises()
expect(wrapper.text()).toContain("Loaded")

非同期テストを組み立てる

基本の流れは、mount、操作、await flushPromises()、検証です。テスト関数をasyncとして、全体でawaitを使えるようにしてください。

it("shows results after fetch", async () => {
  const wrapper = mount(SearchBox)
  await wrapper.get("input").setValue("vue")
  await wrapper.get("form").trigger("submit.prevent")
  await flushPromises()
  expect(wrapper.findAll("li")).toHaveLength(2)
})

クイックチェック

操作のテストについて、理解度を確認してください。

まとめ

操作とイベントのテスト方法を学びました。

trigger("click")はイベントを発生させます。Vueの更新は非同期で行われるため、awaitしてください。
setValueは入力欄、チェックボックス、セレクトの値を設定し、v-model用のinputイベントを発生させます。
wrapper.emitted()は発生したイベントを記録し、emitted("name")[0][0]で最初のペイロードを読み取ります。
非同期ハンドラーを検証する前に、await flushPromises()を実行してください。
awaitを使うには、テストをasyncとして記述します。

よくある質問

「ユーザー操作とイベントのテスト」レッスンは無料ですか？

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

「ユーザー操作とイベントのテスト」で何を学びますか？

wrapper.trigger('click')、setValue()、wrapper.vm.$emit()、非同期のflushPromises() ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「ユーザー操作とイベントのテスト」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る