Frontend Academy · レッスン

@testing-library/vue：コンポーネントのマウント

@testing-library/vue で Vue コンポーネントをマウントし、Props とグローバルプラグインを渡し、ユーザーイベントをシミュレートして、レンダリングされたテンプレートをアサートします。

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

Vue用Testing Library

@testing-library/vueは、Vue 3コンポーネントに対して、同じユーザー中心のテスト方法を提供します。APIはReact版と同様で、render()、screenクエリ、userEvent、jest-domのMatcherを使用します。

インストール

Vue用のTesting Libraryパッケージをインストールします。

npm install -D @testing-library/vue @testing-library/user-event @testing-library/jest-dom
# Also install vitest for a Vite project:
npm install -D vitest jsdom

Vue用のrender()

render(Component, options)はVueコンポーネントをマウントします。optionsオブジェクトを使って、props、グローバルプラグイン、セットアップオプションを渡します。

import { render, screen } from '@testing-library/vue';
import Button from './Button.vue';

test('renders button label', () => {
  render(Button, { props: { label: 'Submit' } });
  expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
});

Propsを渡す

optionsオブジェクトでpropsを渡します。defineProps<T>()を使用すると、TypeScriptがpropsの型をチェックします。

render(UserCard, {
  props: {
    user: { id: 1, name: 'Alice', email: 'alice@example.com' }
  }
});

グローバルプラグインを提供する

グローバル設定（プラグイン、コンポーネント、provideする値）は、globalオプションで渡します。

import { createPinia } from 'pinia';
import router from './router';

render(App, {
  global: {
    plugins: [createPinia(), router],
    provide: { theme: 'dark' }
  }
});

再利用可能なrenderWithPluginsヘルパー

テストに必要なすべてのプラグインを含むカスタムのrenderラッパーを作成し、各テストでセットアップを繰り返さないようにします。

// test-utils.ts
import { render } from '@testing-library/vue';
import { createPinia } from 'pinia';

export function renderWithSetup(component: any, options = {}) {
  return render(component, {
    global: { plugins: [createPinia()] },
    ...options
  });
}

イベントのテスト

userEventでコンポーネントを操作し、その後、ユーザーに表示される内容や、イベントが発生したことをアサートします。

import userEvent from '@testing-library/user-event';

test('emits submit on form submit', async () => {
  const user = userEvent.setup();
  const { emitted } = render(LoginForm);

  await user.type(screen.getByLabelText('Email'), 'alice@example.com');
  await user.click(screen.getByRole('button', { name: /login/i }));

  expect(emitted().submit[0]).toEqual([{ email: 'alice@example.com' }]);
});

スロットのテスト

renderのオプションで、スロットのコンテンツを文字列またはコンポーネントとして渡します。

render(Card, {
  slots: {
    default: '<p>Card body content</p>',
    header: '<h2>My Card Title</h2>'
  }
});

expect(screen.getByText('Card body content')).toBeInTheDocument();

v-modelの動作をテストする

userEventで入力欄に値を入力し、発生したイベント、または表示された出力が期待する更新後の状態と一致することを確認します。

Piniaストアのテスト

各テストで新しいPiniaインスタンスを作成します。セットアップではストアの状態を直接変更し、その後、レンダリングされた出力をアサートします。

const pinia = createPinia();
render(Counter, { global: { plugins: [pinia] } });

const store = useCounterStore();
store.count = 5; // set initial state
await nextTick();

expect(screen.getByText('5')).toBeInTheDocument();

非同期更新後の要素を見つける

VueはDOMを非同期に更新します。非同期の状態変更を引き起こすイベントを発生させた後は、await nextTick()またはfindBy*クエリを使用します。

import { nextTick } from 'vue';

await user.click(button);
await nextTick();
expect(screen.getByText('Updated!')).toBeInTheDocument();

クイックチェック

@testing-library/vueでテストするコンポーネントに、PiniaまたはVue Routerをどのように渡しますか？

まとめ：@testing-library/vue

render(Component, options)でVueコンポーネントをマウントします。options.propsでpropsを渡します。global.pluginsでプラグインを提供します。emitted()でカスタムイベントを確認します。options.slotsでスロットを渡します。Vueの非同期更新にはawait nextTick()を使用します。共有プラグインのセットアップには、カスタムのrenderWithSetup()ラッパーを作成します。

よくある質問

「@testing-library/vue：コンポーネントのマウント」レッスンは無料ですか？

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

「@testing-library/vue：コンポーネントのマウント」で何を学びますか？

@testing-library/vue で Vue コンポーネントをマウントし、Props とグローバルプラグインを渡し、ユーザーイベントをシミュレートして、レンダリングされたテンプレートをアサートします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「@testing-library/vue：コンポーネントのマウント」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

Jest のセットアップと基本テスト
@testing-library/react：render と userEvent
@testing-library/vue：コンポーネントのマウント
モジュールと API 呼び出しのモック

← Frontend Academyに戻る