Vue Academy · レッスン

コンポーネントのマウントと検索

mount()、shallowMount()、wrapper.find()、wrapper.findAll()、getByText()、data-testid

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

テストでコンポーネントをレンダリングする

コンポーネントをテストするには、jsdomのDOMにレンダリングしてから結果を確認する必要があります。@vue/test-utilsにはmountと、クエリヘルパーを備えたwrapperオブジェクトが用意されています。

mount：完全なレンダリング

mountはコンポーネントと、そのすべての子コンポーネントを実際にレンダリングします。子コンポーネントが実際の出力をレンダリングすることに依存する動作をテストするときに使用してください。

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

const wrapper = mount(Card, {
  props: { title: "Hello" },
})

shallowMount：子コンポーネントをスタブ化する

shallowMountはコンポーネントをレンダリングしますが、子コンポーネントを軽量なスタブに置き換えます。これにより、テスト対象の単位を子コンポーネントの内部実装から分離できます。

import { shallowMount } from "@vue/test-utils"
import Page from "./Page.vue"

const wrapper = shallowMount(Page)
// child components appear as <child-stub />

mountとshallowMountの使い分け

目的に応じて選択してください。

mount — 統合テストに近い方法です。子コンポーネントがどのようにレンダリングされるかを確認します。
shallowMount — 単体テストに近い方法です。このコンポーネントのロジックとテンプレートだけをテストします。

shallowマウントは高速で、子コンポーネントの不具合による連鎖的な失敗を避けられます。

find：任意の一致

wrapper.find(selector)はCSSセレクターを受け取り、wrapperを返します。一致するものがない場合でも例外は発生せず、結果のexists()はfalseになります。

const title = wrapper.find("h1")
expect(title.exists()).toBe(true)
expect(title.text()).toBe("Hello")

get：必須の一致

wrapper.get(selector)はfindに似ていますが、要素が見つからないと例外をスローします。要素が存在しなければならない場合に使用してください。後でnullにアクセスしたときよりも、エラーメッセージが明確になります。

const button = wrapper.get("button.submit")
// throws immediately with a helpful message if absent

findとgetの使い分け

常に存在するはずの要素（内容を検証する要素）にはgetを使用してください。エラーバナーのように表示されたりされなかったりする要素など、存在または不在をテストする場合はfindを使用します。

expect(wrapper.find(".error").exists()).toBe(false)

const label = wrapper.get("label")
expect(label.text()).toBe("Email")

findAll：複数の要素

wrapper.findAll(selector)は、一致するすべての要素についてwrapperの配列を返します。リストの長さを検証したり、行を反復処理したりするのに適しています。

const items = wrapper.findAll("li")
expect(items).toHaveLength(3)
expect(items[0].text()).toBe("First")

text()でテキストを読み取る

wrapper.text()は、要素とその子要素のテキストコンテンツを連結し、前後の空白を除去して返します。正確なマークアップを気にせず、表示されるテキストを検証するのに便利です。

expect(wrapper.text()).toContain("3 results found")

html()でマークアップを確認する

wrapper.html()は、レンダリングされたHTML文字列を返します。テストが失敗したときのデバッグや、属性と構造の検証に便利です。

console.log(wrapper.html())
// <div class="card"><h1>Hello</h1></div>
expect(wrapper.html()).toContain("class=\"card\"")

子コンポーネントを検索する

CSSセレクターだけでなく、findとfindComponentではコンポーネントの参照も受け取れます。これにより、特定の子コンポーネントのインスタンスを検索できます。

import { findComponent } from "@vue/test-utils"
import Avatar from "./Avatar.vue"

const avatar = wrapper.findComponent(Avatar)
expect(avatar.exists()).toBe(true)

クイックチェック

Test Utilsでのクエリについて、理解度を確認してください。

まとめ

コンポーネントのレンダリングと検索方法を学びました。

mountは子コンポーネントを実際にレンダリングし、shallowMountは分離のためにスタブ化します。
findは空の場合もあるwrapperを返し、getは見つからないと例外をスローします。
findAllはリスト用の配列を返します。
text()は表示されるテキストを読み取り、html()はレンダリングされたマークアップを返します。
findComponentは特定の子コンポーネントを検索します。

よくある質問

「コンポーネントのマウントと検索」レッスンは無料ですか？

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

「コンポーネントのマウントと検索」で何を学びますか？

mount()、shallowMount()、wrapper.find()、wrapper.findAll()、getByText()、data-testid ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「コンポーネントのマウントと検索」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る