vite-plugin-mockを使用してMock.jsを扱いやすくする

#VueJS

この記事を書いたチーム：tenko

はじめに
インストールと各種設定
ファイル構成
テストコーディング
まとめ

はじめに

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

以前、Mock.jsというライブラリを使用して、フロントエンドからバックエンドAPIへのHTTPリクエストのテストをバックエンドサーバーなしで実施する方法をご紹介しました。

ただ、Mock.js単体でAPIのテストを行う場合、テスト対象のコンポーネントにテストコードを記述する必要があり、ソース管理において意図せずテストコードが紛れ込むといったリスクがあり、少々悩ましい部分がありました。

そこで今回は、Mock.jsを扱いやすくしてくれるvite-plugin-mockをご紹介したいと思います。

vite-plugin-mockはVite用のプラグインで、このプラグインを導入することでMock.jsのテストコードを別ファイルに分離し、vite.config.jsの設定によってモックを使用するかどうかを制御できるようになります。

これにより、テストコード自体もGitなどで管理しやすくなり、テストコードの有効化／無効化も簡単に行うことができます。

インストールと各種設定

まずはvite-plugin-mockのインストールを行います。なお、Mock.jsはインストール済みの前提とします。

vite-plugin-mockのGitHubページに記載の手順にしたがってインストールします。

npm i vite-plugin-mock -D

1	npm i vite-plugin-mock -D

ちなみにGitHubでは最新バージョンがv2.9.1となっていますが、インストールされるバージョンはv3.0.2です（2025/04/15現在）。

次にvite.config.jsにvite-plugin-mockの設定を追加していきます。

vite.config.jsは各サービスの環境によってさまざまな設定がされていると思いますので、今回のポイントを抜粋します。

import { viteMockServe } from 'vite-plugin-mock'  // インポート追加

// -- 中略 --

export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      // -- 中略 --
      // ここからvite-plugin-mockの設定
      viteMockServe({
        mockPath: 'mock',  // モックファイルの格納先パス
        enable: true,      // モックの有効化
        watchFiles: true,  // ファイルの変更を監視する
        logger: true,      // サーバーコンソールにログを出力する
      }),
      // -- 中略 --
    ],
  }
}

import { viteMockServe } from 'vite-plugin-mock' // インポート追加

// -- 中略 --

export default ({ command }: ConfigEnv): UserConfigExport => {

return {

plugins: [

vue(),

// -- 中略 --

// ここからvite-plugin-mockの設定

viteMockServe({

mockPath: 'mock', // モックファイルの格納先パス

enable: true, // モックの有効化

watchFiles: true, // ファイルの変更を監視する

logger: true, // サーバーコンソールにログを出力する

}),

// -- 中略 --

}

vite-plugin-mockからviteMockServeをインポートし、pluginsの配列に追加します。viteMockServeは関数で、引数に設定値を指定します。enableの設定をfalseにするとテストコードが無効になるため、実在するバックエンドAPIにリクエストを送信したい場合はenable: falseにします。

これで前準備は完了したので、テストコードを作成していきます。

ファイル構成

vite.config.jsのmockPathの設定値に従ってフォルダを作成し、その中にモックファイルを作成します。mockPathの既定値は’mock’なので、mockPathを設定していない場合は、プロジェクトルート直下にmockフォルダを作成し、その中にモックファイルを作成します。モックファイルは複数作成することもできるので、機能やAPIパスなど決まった単位で分割すると管理しやすくなるかと思います。

テストコーディング

ファイルの準備ができたらコーディングしていきます。

以下にGETメソッドを処理する簡単なサンプルコードを示します。

// 配列をエクスポートする
export default [
  // 1要素に1定義
  {
    url: '/api/mock/data', // モックするURL
    method: 'get',          // HTTPメソッド
    response: (req) => {
      // 戻り値にレスポンスを設定
      return {
        id: 1,
        companyname: '株式会社テスト',
        president: 'テスト太郎',
        employees: 100,
        address: '愛知県',
      }
    },
  },
]