mswをexpressで動かす

はじめに

mswをbrowser起動ではなく、Node.jsでserverとして起動でする方法がないか調査しました。

結論

mswをexpressで動かす

import express from "express";
import bodyParser from "body-parser";
import { handlers } from "./handlers";
import { createMiddleware } from '@mswjs/http-middleware'

console.log("Mock server is running");

const app = express();

app.use(bodyParser.json());
app.use(createMiddleware(...handlers));

// Start the server
const PORT = 3334;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

技術選定

今回作成するにあたり利用したライブラリ

• express
• @types/express
• msw v2系
• @mswjs/http-middleware
• tsx

expressでサーバーの構築

import express from "express";

console.log("Mock server is running");

const app = express();

// Start the server
const PORT = 3334;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

mswのhandlerを作成する

mswでmockするAPIを作成し、@mswjs/http-middlewareで登録します。

import express from "express";
import { createMiddleware } from '@mswjs/http-middleware'
import { handlers } from './handlers'

console.log("Mock server is running");

const app = express();
app.use(createMiddleware(...handlers))

// Start the server
const PORT = 3334;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

@mswjs/http-middleware

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

@mswjs/http-middlewareはmswのリクエストハンドラーを活用して、
HTTPサーバーを起動したり、既存のサーバーにミドルウェアとして組み込むためのライブラリです。

本記事では、既存のサーバーに対してmockを適応したいケースでしたので、createMiddlewareを採用しています。

サーバー自体を起動させたい場合は、createServerを使用することで実現できます。

import { http, HttpResponse } from 'msw'
import { createServer } from '@mswjs/http-middleware'

const httpServer = createServer(
  http.get('/user', () => {
    return HttpResponse.json({ firstName: 'John' })
  }),
)

httpServer.listen(9090)

サーバーの実行

tsxで起動させています。

https://tsx.is/

tsx --watch app.ts

localhost:9090に対してcurlすればmswでmockしたレスポンスが帰ります。