2025.01.10

開発技術

Mock.jsを使用したAPIモッキングによるテスト

#VueJS

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

はじめに
Mock.js
インストール
基本的なテストAPIコーディング
ランダムデータを返すテストAPIコーディング
まとめ

はじめに

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

Webサービス開発において、フロントエンドからバックエンドAPIを呼び出す処理がある場合、APIが製造途中だと呼び出し処理のテストができないことがあります。
そんな時、フロントエンド側だけでAPI呼び出し時のリクエスト内容と、APIからのレスポンスを受け取った後の処理をテストできる仕組みがあれば、フロントエンド単体でAPI呼び出し処理のテストも行えて安心です。
本記事では、Mock.jsを使用したフロントエンドのみで実装できるAPIモッキングによるテスト実施方法についてご紹介いたします。
なお、フロントエンド環境はVue.jsを使用しています。

Mock.js

Mock.jsはJavaScriptで作られたライブラリで、フロントエンドからのAjaxによるリクエストを横取りして事前に定義したレスポンスデータを返すことができます。
レスポンスデータはオブジェクトで指定しますが、定数値だけでなくMock.jsが用意している関数を使用することでランダムなデータを返すこともできるようになっています。
また、Mock.jsはライブラリのインストール後、難しい設定もなくすぐに使えるため、「とりあえず試しにAPI呼び出しを動かしてみたい」といった場合にも有効です。

インストール

まずはMock.jsのインストールを行います。
公式サイトの手順にしたがってインストールします。

npm install mockjs

1	npm install mockjs

あとはテスト対象のコンポーネントにMock.jsをインポートすればAPIモッキングが可能になります。

基本的なテストAPIコーディング

最も単純な例として、リクエストに対して固定データを返すAPIモックを作成してみます。
テスト対象コンポーネントに以下のコードを追加します。

import Mock from 'mockjs'

Mock.mock('/company/info', (param) => {
  return {
    id: 1,
    companyname: '株式会社テスト',
    president: 'テスト太郎',
    employees: 100,
    address: '愛知県',
  }
})

import Mock from 'mockjs'

Mock.mock('/company/info', (param) => {

return {

id: 1,

companyname: '株式会社テスト',

president: 'テスト太郎',

employees: 100,

address: '愛知県',

}

})

Mock.mock関数の第一引数に指定したURLにリクエストを送信すると、第二引数に指定したコールバック関数の戻り値がレスポンスとして返ってきます。
このようにMock.jsを使用することで簡単にAPIをモックすることができます。

GETリクエスト送信時にはクエリパラメータを付与することが多いかと思いますが、Mock.mock関数の第一引数は正規表現に対応しているので、クエリパラメータに対応する場合は正規表現でURLを指定します。

import Mock from 'mockjs'

const mockUrl = new RegExp(/\/company\/info\?*/)
Mock.mock(mockUrl, (param) => {
  return {
    id: 1,
    companyname: '株式会社テスト',
    president: 'テスト太郎',
    employees: 100,
    address: '愛知県',
  }
})

import Mock from 'mockjs'

const mockUrl = new RegExp(/\/company\/info\?*/)

Mock.mock(mockUrl, (param) => {

return {

id: 1,

companyname: '株式会社テスト',

president: 'テスト太郎',

employees: 100,

address: '愛知県',

}

})

第二引数のコールバック関数の引数（param）には、リクエストを受けたURLやHTTPメソッド、HTTPリクエストボディのデータが渡されてくるため、HTTPメソッドごとにリクエスト内容に従ってレスポンスデータを返すといったことも可能です。

ランダムデータを返すテストAPIコーディング

テストにおいては様々なパターンのレスポンスデータが必要になることもあるため、Mock.jsの主要機能であるランダムデータを作成する機能を使用してみます。
Mock.mock関数の引数に特定の書式を記述したオブジェクトを指定することで、書式に応じたランダムなデータを戻り値として返してくれます。

例として、会社リスト取得のAPIモックを作成してみます。

import Mock from 'mockjs'

Mock.mock('/company/list', (param) => {
  return Mock.mock({
    'companies|1-10': [
      {
        'id|+1': 1,
        companyname: function () {
          return '株式会社テスト' + this.id
        },
        president: '@name',
        'employees|1-1000': 1,
        'address|1': ['愛知県', '東京都', '大阪府'],
      },
    ],
  })
})

import Mock from 'mockjs'

Mock.mock('/company/list', (param) => {

return Mock.mock({

'companies|1-10': [

{

'id|+1': 1,

companyname: function () {

return '株式会社テスト' + this.id

president: '@name',

'employees|1-1000': 1,

'address|1': ['愛知県', '東京都', '大阪府'],

})

例示した書式について解説します。

・‘companies|1-10’:[～]
companiesという1～10のランダムな要素数の配列を生成します。
プロパティ名の後ろに要素数の範囲を指定します。範囲指定せずに数値のみ指定した場合は指定した数値分要素を生成します。配列の各要素は、書式内に指定したオブジェクトを元に生成します。

・‘id|+1’: 1
idに1から始まる1ずつ加算した値をセットします。
プロパティ名の後ろに増分、値に初期値を指定します。今回のような配列の場合、要素ごとにidの数値を加算してセットします。

・companyname: function(){～}
companynameに関数の戻り値をセットします。
関数内ではthisを用いて他プロパティの値を取得できます。

・president: ‘@name’
presidentにMock.jsがランダムな人名を生成してセットします。
他の例とは違い、ここは値に書式を指定しています。

・’employees|1-1000′: 1
employeesに1～1000のランダムな数値を生成してセットします。

・‘address|1’: [‘愛知県‘, ‘東京都‘, ‘大阪府‘]
addressに配列に指定した値のうち、ランダムに1つセットします。
他にもいろいろな書式を指定することができますが、詳しくは公式サイトを参照ください。
このAPIモックを呼び出すと、以下のようなレスポンスデータが返ってきます。

{
    "companies": [
        {
            "id": 1,
            "president": "Joseph Wilson",
            "employees": 310,
            "address": "東京都",
            "companyname": "株式会社テスト1"
        },
        {
            "id": 2,
            "president": "Karen Gonzalez",
            "employees": 6,
            "address": "東京都",
            "companyname": "株式会社テスト2"
        },
        {
            "id": 3,
            "president": "George Walker",
            "employees": 490,
            "address": "大阪府",
            "companyname": "株式会社テスト3"
        }
    ]
}