概要
APIのモック用にjson-serverを導入したので主な処理をざっくりとまとめた
json-serverについて
簡単にモックAPIを作成できるnodeのライブラリ
主にテスト作成時に使われるもの
導入
$ yarn add json-server
または
$ npm install –save-dev json-server
実際に使ってみる
次の内容のmock.jsonを作成する
{"test":{"id":"mock_id","text":"mock json desu"}}ターミナルで次のコマンドを実行
$ json-server mock.json
リクエストメソッドGET、エンドポイントhttp://localhost:3000/testを叩くと次の内容のレスポンスを取得できる
{"id":"mock_id","text":"mock json desu"}解説
mock.jsonの第一階層のキー名がそのままエンドポイントになる
例えば次のようにmock.jsonを作成すればエンドポイントが/testと/sampleのAPIのモックを作れる
{"test":{"id":"mock_id_1","text":"mock json test"},"sample":{"id":"mock_id_2","text":"mock json sample"}}リクエストメソッドは全てGETになる(仕様)
portの指定がなければ3000が割り振られる
オプションについて
-m {{ jsファイルのパス }}
APIモックが叩かれたらデータを取得する前に指定したjsファイルを実行してくれるGET以外のリクエストメソッドのAPIのモックを作成したい時やトークンでの認証をする時などに使う
例
mock.json
{"test":{"id":"mock_id_1","text":"mock json test"},"test_patch":{}}次の内容のmiddleware.jsを作成
module.exports=asyncfunction(req,_res,next){// リクエストメソッドが PATCH の場合、リクエストURLに _patch をつけ、リクエストメソッドを GET に直すif(req.method==='PATCH'){req.method='GET'req.url+='_patch'}next()}ターミナルで次のコマンドを実行
$ json-server mock.json -m middleware.js
リクエストメソッドPATCH、http://localhost:3000/testを叩くと次のレスポンスを取得する
{}
--routes {{ jsonファイルのパス }}
エンドポイントが/test/sampleのような形になる場合やエンドポイントにクエリパラメータが含まれる場合に使う
例
mock.json
{"mock_1":{"id":"mock_id_1","text":"mock json test"}}次の内容のroutes.jsonを作成
{"/test/sample":"/mock_1"}ターミナルで次のコマンドを実行
$ json-server mock.json --routes routes.json
http://localhost:3000/test/sampleを叩くと次のレスポンスを取得する
{
"id": "mock_id_1",
"text": "mock json test"
}
--host {{ host名 }}, -p {{ port番号 }}
ホスト名とポート番号を指定できる
おまけ
モックの数が増えるとmock.jsonの中身が煩雑になってくると思います
それの対策として他のファイルでjsonを作成して立ち上げ時にmock.jsonにまとめるという形にしました
次の内容のjsファイルを用意
constfs=require('fs')constpath=require('path')constroot=path.resolve('./','mocks')constapi=fs.readdirSync(root).reduce((api,file)=>{// ファイル名を取得constendpoint=path.basename(file,path.extname(file))// ファイル名をキー名にするapi[endpoint]=JSON.parse(fs.readFileSync(root+'/'+file,'utf-8'))returnapi},{})// 作成したjsonをmock.jsonに書き込むfs.writeFile('./mock.json',JSON.stringify(api),err=>{if(err)throwerr})mocksフォルダを作成し、その中にファイル名がパスになるjsonファイルを作成する
エンドポイントごとにファイルを分けられるのでmock.jsonだけの状態よりはかなり見やすくなります
最後にサンプル用に作成したリポジトリを置いておきます