• 2024/9/30
• 4分

【Mac】Mockoonでモックサーバーを実装する方法！APIテスト

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• macOS：Sonoma 14.6.1

Mockoonとは？

「Mockoon(モックーン)」はAPIのモックサーバーを簡単に作成できるアプリケーションです。アカウントの作成や費用などがかからず、無料で簡単にモックサーバーを実装することができるオープンソースのデスクトップアプリケーションになっています。

モックサーバーを作成しておくことでバックエンドの開発を待たずしてフロントエンドの開発やテストを進めることができるようになります。

Mockoonはクロスプラットフォームに対応しているためWindows、macOS、Linuxの各プラットフォームで動作し、エンドポイントを複数作成したり、異なるHTTPメソッド（GET、POST、PUT、DELETEなど）に対応したリクエストを模擬的に作成することが可能になっています。

また返却するステータスコードやレスポンスヘッダー、JSONやXML形式のレスポンスボディの設定、レスポンスの遅延などさまざまな機能が提供されているのは嬉しいポイントになります。

モックサーバーとスタブの違い

「モックサーバー(Mock Server)」と似たような意味の言葉に「スタブ(Stub)」があります。両者の特徴や意味をまとめておきます。

モックサーバー(Mock Server)

モックサーバーとはAPIやサービスの動作を模倣するためのサーバーです。エンドポイントとレスポンスをあらかじめ設定しておくことでリクエストを受け取った際に定義したレスポンスを返します。

モックサーバーはパラメータやHTTPメソッドの種類など複雑な条件のリクエストに応じた異なるレスポンスを返すことができるため、より本番に近いAPIのテストを行うことに適しています。

スタブ(Stub)

スタブは特定の機能やメソッドの実装を模倣するシンプルなオブジェクトのことを指します。APIに限った話ではなく未実装の部分の一時的な代替としてあてがうためのコードや関数などのことになります。

スタブには動作を模倣するというより期待されるであろう値を返すことが目的になります。

今回紹介するMockoonはモックサーバーを実装するためのアプリケーションになります。

Mockoonの導入方法

MacでMockoonを導入するにはHomebrewを使用して以下のコマンドを実行します。成功するとApplicationsディレクトリの中に「Mockoon.app」が生成されています。

$ brew install --cask mockoon

==> Installing Cask mockoon
==> Moving App 'Mockoon.app' to '/Applications/Mockoon.app'
🍺  mockoon was successfully installed!

アプリを起動してみると大きく分けて以下の3つのセクションに分かれています。

1. API環境
2. エンドポイント
3. レスポンス設定エリア

API環境

一番左のエリアは「API環境」が表示されます。初期表示では「Demo API」という名前のAPI環境が用意されており、アクセスするためのURLはhttp://localhost:3000/になっています。

上部の「+」をクリックしてjsonファイルを作成することで環境を追加することができます。この環境はプロジェクトごとに作成していくイメージになります。

追加すると自動的にlocalhost:番号の番号がインクリメントされていきますが任意の値に変更したい場合は上部の「Setting」タブから変更することが可能です。

エンドポイント

2番目のエリアは選択しているAPI環境に設定してあるエンドポイントのパスリストです。ここで選択しているパスが3番目のレスポンス設定エリアに表示されます。

レスポンス設定エリア

選択しているエンドポイントのレスポンス設定をいろいろとカスタマイズすることが可能です。

1. エンドポイントのパス
2. レスポンスの種類
3. HTTPステータスの種類
4. 返却するデータ

①エンドポイントのパス

公式リファレンス：APIルート

エンドポイントに指定できるパスでルートパラメータ(users/:id)や正規表現(users/*)などを使用したルート設定をすることも可能です。

②レスポンスの種類

②からこのエンドポイントに対するレスポンスを追加することが可能です。ヘッダーやルールなどを変更して成功パターンや失敗パターンなどを定義することができます。

③HTTPステータスの種類

返却するHTTPステータスを変更できます。

④返却するデータ

返却するデータはInlineで直接JSONデータを書き込んだり、Fileを指定して特定のファイルを返却するように設定できます。

モックサーバーを起動してテストする

モックサーバーを起動するためには上部の「」をクリックします。起動すると該当のURLでアクセスできるようになるのでcurlなどを使用してアクセスできるかテストしてみます。

$ curl -v http://localhost:3001/users

* Host localhost:3001 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
*   Trying [::1]:3001...
* Connected to localhost (::1) port 3001
> GET /users HTTP/1.1
> Host: localhost:3001
> User-Agent: curl/8.7.1
> Accept: */*
> 
* Request completely sent off
< HTTP/1.1 200 OK
< Content-Type: application/json; charset=utf-8
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS
< Access-Control-Allow-Headers: Content-Type, Origin, Accept, Authorization, Content-Length, X-Requested-With
< Content-Length: 313
< Date: Mon, 30 Sep 2024 13:00:17 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< 
{
  "users": [
    {
      "id": 1,
      "name": "吉田 真紘",
      "age": 28
    },
    {
      "id": 2,
      "name": "川本 依",
      "age": 34
    },
    {
      "id": 3,
      "name": "中川 健太",
      "age": 22
    },
    {
      "id": 4,
      "name": "吉田 葵",
      "age": 45
    }
  ]
* Connection #0 to host localhost left intact
}%

設定したHTTPステータスコードでJSONデータが返ってくることを確認できました。

クエリパラメータを指定する

クエリパラメータを指定したい場合はRulesタブから「Query Parameter」を選択します。例えば先ほどのusersに新しいレスポンスとしてクエリパラメータ付きの挙動を追加したい場合はまず「Response 2」を追加します。

そしてRulesタブから「Query Parameter」を選択し、キーと条件を指定します。Status & Bodyの返却値にはクエリパラメータで指定されて際に返却したい値を設定しておいてください。

$ curl -v "http://localhost:3001/users?id=1"

* Host localhost:3001 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
*   Trying [::1]:3001...
* Connected to localhost (::1) port 3001
> GET /users?id=1 HTTP/1.1
> Host: localhost:3001
> User-Agent: curl/8.7.1
> Accept: */*
> 
* Request completely sent off
< HTTP/1.1 200 OK
< Content-Type: application/json; charset=utf-8
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS
< Access-Control-Allow-Headers: Content-Type, Origin, Accept, Authorization, Content-Length, X-Requested-With
< Content-Length: 53
< Date: Mon, 30 Sep 2024 14:35:54 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< 
{
  "id": 1,
  "name": "吉田 真紘",
  "age": 28
* Connection #0 to host localhost left intact
}%

今クエリパラメータに?id=1を渡した時のレスポンスを用意しましたがこの状態で未定義のクエリパラメータの値を渡してリクエストを行うと/usersと同じ値が返ってきます。

$ curl -v "http://localhost:3001/users?id=2"

* Host localhost:3001 was resolved.
* IPv6: ::1
* IPv4: 127.0.0.1
*   Trying [::1]:3001...
* Connected to localhost (::1) port 3001
> GET /users?id=2 HTTP/1.1
> Host: localhost:3001
> User-Agent: curl/8.7.1
> Accept: */*
> 
* Request completely sent off
< HTTP/1.1 200 OK
< Content-Type: application/json; charset=utf-8
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS
< Access-Control-Allow-Headers: Content-Type, Origin, Accept, Authorization, Content-Length, X-Requested-With
< Content-Length: 313
< Date: Mon, 30 Sep 2024 14:36:51 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< 
{
  "users": [
    {
      "id": 1,
      "name": "吉田 真紘",
      "age": 28
    },
    {
      "id": 2,
      "name": "川本 依",
      "age": 34
    },
    {
      "id": 3,
      "name": "中川 健太",
      "age": 22
    },
    {
      "id": 4,
      "name": "吉田 葵",
      "age": 45
    }
  ]
* Connection #0 to host localhost left intact
}%

これはマッチするレスポンスがなかった場合にデフォルトで返却するレスポンスに「Response 1」が設定されているためです。デフォルトで返却するレスポンスはフラグがONになっているものが適応されるので、期待しないクエリ値には404レスポンスなどを作成しておくと良いかもしれません。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。