【Mac】Mockoonでモックサーバーを実装する方法!APIテスト
この記事からわかること
- Mockoonとは?
- モックサーバーを実装する方法
- スタブとの違いと使い分け
- エンドポイントの設定方法
- クエリパラメータを指定する
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
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に限った話ではなく未実装の部分の一時的な代替としてあてがうためのコードや関数などのことになります。
スタブには動作を模倣するというより期待されるであろう値を返すことが目的になります。
特徴 | スタブ | モックサーバー |
---|---|---|
目的 | 特定の機能やメソッドのシンプルな模倣 | APIやサービスの動作を模擬 |
概要 | シンプルなレスポンスを返す | 複数のエンドポイントやリクエストに対応 |
設定 | 通常は固定の値を返す | リクエストに応じて異なるレスポンスを返す |
使用シナリオ | ユニットテストや単体テストでの依存関係の置き換え | フロントエンドの開発や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!
おすすめ記事:Homebrew(ホームブルー)のインストール方法
アプリを起動してみると大きく分けて以下の3つのセクションに分かれています。
- API環境
- エンドポイント
- レスポンス設定エリア
API環境
一番左のエリアは「API環境」が表示されます。初期表示では「Demo API」という名前のAPI環境が用意されており、アクセスするためのURLはhttp://localhost:3000/
になっています。
上部の「+
」をクリックしてjsonファイルを作成することで環境を追加することができます。この環境はプロジェクトごとに作成していくイメージになります。
追加すると自動的にlocalhost:番号
の番号がインクリメントされていきますが任意の値に変更したい場合は上部の「Setting」タブから変更することが可能です。
エンドポイント
2番目のエリアは選択しているAPI環境に設定してあるエンドポイントのパスリストです。ここで選択しているパスが3番目のレスポンス設定エリアに表示されます。
レスポンス設定エリア
選択しているエンドポイントのレスポンス設定をいろいろとカスタマイズすることが可能です。
- エンドポイントのパス
- レスポンスの種類
- HTTPステータスの種類
- 返却するデータ
①エンドポイントのパス
エンドポイントに指定できるパスでルートパラメータ(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レスポンスなどを作成しておくと良いかもしれません。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。