Vue.js コンポーネントテストの基本とJest活用ガイド

2026年6月25日

Contents

1 Vue.js コンポーネントテストの重要性と基本概念
- 1.1 なぜコンポーネントテストが必要か
- 1.2 テスト自動化のメリット
2 ユニットテストとインテグレーションテストの違い
3 JestとVue Test Utilsの導入方法
- 3.1 開発環境設定手順
- 3.2 基本的なAPI構文
4 コンポーネントテストの実践手法
- 4.1 イベントハンドラの検証
  - 4.1.1 実例コード
- 4.2 リアクティブデータのチェック
5 モックデータの扱い方とステブ技術
- 5.1 API呼び出しのモック
- 5.2 子コンポーネントの擬装
6 テストカバレッジの測定とCI/CD連携
- 6.1 カバレッジレポートの生成
  - 6.1.1 実例コード（jest.config.js）
- 6.2 GitHub Actionsでの自動実行
  - 6.2.1 実例コード（test.yml）
7 まとめ

スポンサードリンク

Vue.js コンポーネントテストの重要性と基本概念

Vue.jsアプリケーション開発において、コンポーネントテストは信頼性向上や保守性強化に不可欠なプロセスです。特にVue.jsではリアクティブデータやライフサイクルフックが密接に関与するため、変更時の不具合を早期に検出できます。このセクションでは、テストの意義と自動化によるメリットを解説します。

なぜコンポーネントテストが必要か

コード品質の確保：単体テストでロジックの誤りを発見し、バグの早期発見が可能
保守性の向上：変更後の破壊的影響を最小限に抑え、リファクタリング時の安心感を提供
チーム開発支援：テストケースが明確な場合、他のメンバーによる修正や拡張がスムーズに進む

テスト自動化のメリット

項目	内容	補足
効率性	手動テストよりも短時間で実行可能	CI/CD環境での自動実行が推奨
正確性	人間の誤りを排除し、再現性のある検証が可能	テストカバレッジを可視化できる
コスト削減	後期に発見されたバグの修正費用が数倍になることを防ぐ	継続的テストは長期的な投資

ユニットテストとインテグレーションテストの違い

Vue.jsでは、コンポーネント単体や外部依存との連携を目的とした2種類のテスト手法があります。それぞれの対象範囲と実装例を見て、使い分け方を理解しましょう。

それぞれの対象範囲

ユニットテスト：コンポーネント内部のロジック（メソッドやデータ）のみを検証
インテグレーションテスト：子コンポーネントやAPIとの連携動作を確認

shallowMountとmountの使い分け

以下の比較表で、両者の違いを明確にします。

項目	`shallowMount`	`mount`
目的	子コンポーネントをモックしロジックのみ検証	実際の子コンポーネントと連携して動作テスト
使用例	単体のメソッドやリアクティブデータの検証	UIとのインタラクション（イベント、DOM操作）を検証
性能	テスト速度が速い（子コンポーネント無視）	実際のコンポーネント構造を反映して実行

実装例で見るテストケース

以下に、<Counter>コンポーネントを想定したテストケースの違いを示します。

ユニットテストの例（`shallowMount`使用）

import { shallowMount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter コンポーネント', () =&gt; {
  it('初期値が0であることを確認する', () =&gt; {
    const wrapper = shallowMount(Counter);
    expect(wrapper.vm.count).toBe(0);
  });
});

import { shallowMount } from '@vue/test-utils';

import Counter from '@/components/Counter.vue';

describe('Counter コンポーネント', () => {

it('初期値が0であることを確認する', () => {

const wrapper = shallowMount(Counter);

expect(wrapper.vm.count).toBe(0);

});

インテグレーションテストの例（`mount`使用）

import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter コンポーネント', () =&gt; {
  it('ボタンクリックでカウントが増えることを確認する', async () =&gt; {
    const wrapper = mount(Counter);
    await wrapper.find('button').trigger('click');
    expect(wrapper.vm.count).toBe(1);
  });
});

import { mount } from '@vue/test-utils';

import Counter from '@/components/Counter.vue';

describe('Counter コンポーネント', () => {

it('ボタンクリックでカウントが増えることを確認する', async () => {

const wrapper = mount(Counter);

await wrapper.find('button').trigger('click');

expect(wrapper.vm.count).toBe(1);

});

JestとVue Test Utilsの導入方法

JestはJavaScriptのテストフレームワークとして幅広く採用されており、Vue Test Utilsは公式ライブラリです。create-vueプロジェクトに標準で含まれるため、手軽に導入できます。

開発環境設定手順

プロジェクト生成：npm create vue@latestで新規作成
依存関係のインストール：JestとVue Test Utilsは自動インストールされる（vue test-utilsは@vue/test-utilsとしてインポート）
テストファイルの作成：src/components/ExampleComponent.spec.tsのような命名で作成

基本的なAPI構文

関数	説明	使用例
`shallowMount()`	子コンポーネントをモックしてロジックのみテスト	`shallowMount(ExampleComponent)`
`mount()`	実際の子コンポーネントと連携して動作テスト	`mount(ExampleComponent)`
`expect()`	アサーションを行うメソッド	`expect(wrapper.text()).toContain('Hello')`

コンポーネントテストの実践手法

テストコードを書く際は、イベントハンドラやリアクティブデータの検証が不可欠です。shallowMountとmountの使い分けにより、効率的なテストが可能です。

イベントハンドラの検証

クリックイベント：trigger('click')で擬似的に実行
入力イベント：setValue()で値を設定し、変更を監視

実例コード

describe('ボタンクリック時の挙動', async () =&gt; {
  const wrapper = mount(ButtonComponent);
  await wrapper.find('button').trigger('click');
  expect(wrapper.emitted().submit).toBeTruthy();
});

describe('ボタンクリック時の挙動', async () => {

const wrapper = mount(ButtonComponent);

await wrapper.find('button').trigger('click');

expect(wrapper.emitted().submit).toBeTruthy();

});

リアクティブデータのチェック

プロップスの検証：propsDataで初期値を設定
ライフサイクルフックのテスト：created()やmounted()が正しく実行されるか確認

モックデータの扱い方とステブ技術

外部依存を含むコンポーネントテストでは、モックデータが必須です。jest.fn()やmockResolvedValueを使用することで、実際のAPI呼び出しを避けられます。

API呼び出しのモック

fetch()のモック：jest.spyOn(window, 'fetch')で置き換え

注意事項: window.fetchはグローバルスコープに影響を与えるため、テスト終了時に必ずjest.restoreAllMocks()を実行してください。
レスポンスデータの設定：mockResolvedValue()で擬似データを返す

子コンポーネントの擬装

mount()では本物の子コンポーネントがロードされる
shallowMount()ではモック化し、内部実装を検証しない

テストカバレッジの測定とCI/CD連携

テストカバレッジは、コードがどれだけテストされているかを数値化する指標です。GitHub Actionsで自動実行することで、継続的インテグレーションに組み込み可能です。

カバレッジレポートの生成

jestの設定ファイル：jest.config.jsにcollectCoverage: trueを追加
出力フォルダ指定：coverageDirectory: 'coverage'で出力場所を決める
HTMLレポート生成：npx jest --coverで実行後、coverage/index.htmlを開く

実例コード（jest.config.js）

module.exports = {
  collectCoverage: true,
  coverageDirectory: 'coverage',
  // テスト対象のファイルを指定（例）  
  testMatch: ['**/?(*.)(spec|test).ts?(x)'],
};

module.exports = {

collectCoverage: true,

coverageDirectory: 'coverage',

// テスト対象のファイルを指定（例）

testMatch: ['**/?(*.)(spec|test).ts?(x)'],

};

GitHub Actionsでの自動実行

.github/workflows/test.yml：Jestを実行するジョブを定義
カバレッジチェック：codecovやcoverallsなどのサービスと連携して可視化

実例コード（test.yml）

name: Test

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm install
      - name: Run tests with coverage
        run: npx jest --cover

name: Test

on: [push]

jobs:

test:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v3

- name: Install dependencies

run: npm install

- name: Run tests with coverage

run: npx jest --cover

まとめ

本記事では、Vue.jsコンポーネントテストの重要性から最新ツールの活用方法までをステップバイステップで解説しました。

ユニットテストとインテグレーションテストの使い分け方
JestとVue Test Utilsの導入および実践的なコード例
モックデータやカバレッジ測定の方法
CI/CDとの連携例

読者には、テスト自動化の実現と信頼性の高いアプリケーション開発への第一歩を踏み出すことを目指しています。記事のサンプルコードはGitHubに公開しており、ぜひ実践課題として活用してみてください。