Zenn
📘

mswjs/http-middlewareでモックサーバーをたてるまで

2021/12/18に公開
npm
tech

雑にモックサーバーを立てる時にMock Service Workerが用意してるmswjs/http-middlewareが楽チンだったのでサンプルを書く。

https://github.com/mswjs/http-middleware

プロジェクトを作成する

mkdir mswjs-middleware-sample
cd mswjs-middleware-sample

npmで諸々インストールする

express、cors、@mswjs/http-middlewareの3つをインストールする。[1]

npm init -y
npm install express cors @mswjs/http-middleware --save-dev

モックサーバーを実装する

mkdir mocks
cd mocks
touch server.js

今回はjsonで実装する。[2]

server.js
const express = require('express')
const cors = require('cors')
const { rest } = require('msw')
const { createMiddleware } = require('@mswjs/http-middleware')
const app = express()
	
app.use(express.json())
app.use(cors())

app.use(
    createMiddleware(
        rest.get('/umamusume/search', (req, res, ctx) => {
            const season = req.url.searchParams.get('season')
            if (season == 1) {
                return res(
                    ctx.status(200),
                    ctx.json(
                        [
                            {
                                "name": "スペシャルウィーク",
                                "result": "17戦10勝",
                                "prize": "10億9262万3000円"
                            },
                            {
                                "name": "サイレンススズカ",
                                "result": "16戦9勝",
                                "prize": "4億5598万4000円"
                            }
                        ]
                    )
                )
            } else if (season == 2) {
                return res(
                    ctx.status(200),
                    ctx.json(
                        [
                            {
                                "name": "トウカイテイオー",
                                "result": "12戦9勝",
                                "prize": "6億2563万3500円"
                            },
                            {
                                "name": "メジロマックイーン",
                                "result": "21戦12勝",
                                "prize": "10億1465万7700円"
                            }
                        ]
                    )
                )
            } else {
                return res(
                    ctx.status(200),
                    ctx.json([])
                )
            }
        }),
        rest.post('/umamusume/register', (req, res, ctx) => {
            const name = req.body.name
            const result = req.body.result
            const prize = req.body.prize
            if (name == "" || result == "" || prize == "") {
                return res(
                    ctx.status(400),
                    ctx.json(
                        {
                            "message": "登録情報に不備があります。",
                            "error_code": "U0001"
                        }
                    )
                )
            } else {
                return res(
                    ctx.status(200),
                    ctx.json(
                        {
                            "message": "登録しました。",
                            "error_code": ""
                        }
                    )
                )
            }
        })
    )
)

app.listen(9090)

サーバーを起動する

node server.js

動作確認をする

ステータスコードとレスポンスボディのみの確認。

curl 'http://localhost:9090/umamusume/search?season=1' -o /dev/null -w '%{http_code}\n' -s
200

curl http://localhost:9090/umamusume/search?season=1
[{"name":"スペシャルウィーク","result":"17戦10勝","prize":"10億9262万3000円"},{"name":"サイレンススズカ","result":"16戦9勝","prize":"4億5598万4000円"}]200

curl 'http://localhost:9090/umamusume/search?season=2' -o /dev/null -w '%{http_code}\n' -s
200

curl http://localhost:9090/umamusume/search?season=2
[{"name":"トウカイテイオー","result":"12戦9勝","prize":"6億2563万3500円"},{"name":"メジロマックイーン","result":"21戦12勝","prize":"10億1465万7700円"}]

curl 'http://localhost:9090/umamusume/search?season=3' -o /dev/null -w '%{http_code}\n' -s
200

curl 'http://localhost:9090/umamusume/search?season=3'
[]

curl -X POST -H "Content-Type: application/json" -d '{"name": "トウカイテイオー","result": "12戦9勝","prize": "6億2563万3500円"}' http://localhost:9090/umamusume/register -o /dev/null -w '%{http_code}\n' -s
200

curl -X POST -H "Content-Type: application/json" -d '{"name": "トウカイテイオー","result": "12戦9勝","prize": "6億2563万3500円"}' http://localhost:9090/umamusume/register
{"message":"登録しました。","error_code":""}

curl -X POST -H "Content-Type: application/json" -d '{"name": "トウカイテイオー","result": "12戦9勝","prize": ""}' http://localhost:9090/umamusume/register -o /dev/null -w '%{http_code}\n' -s
400

sato@DESKTOP-UOO17L2 MINGW64 /d/program/python/application
curl -X POST -H "Content-Type: application/json" -d '{"name": "トウカイテイオー","result": "12戦9勝","prize": ""}' http://localhost:9090/umamusume/register
{"message":"登録情報に不備があります。","error_code":"U0001"}
脚注

  1. corsはクロスドメイン制約のため。 ↩︎

  2. 他の形式で実装したい場合はココを参照。 ↩︎

Discussion