Next.js と MSW 高階関数

BRANK

本稿では Next.js アプリ設計と同時に検討しておきたい、API Mocking の設計（MSW の活用テクニック）を紹介していきます。※ 解説のなかで jest を使いますが、ここは特別こだわりがあるわけではありません。 MSW で表現する API 群MSW は Next.js アプリのローカル開発に役立ちます。任意の API を任意のレイヤーで、個別にインターセプト可能です。「ブラウザー → API Routes」間でインターセプト「API Routes → API 群」間でインターセプト「getServerSideProps → API 群」間でインターセプトまた、自動テストに利用でき、フロントエンドの単体・結合テストが書きやすくなります。同一プロセスでサーバーレスポンスをモックするため、外部プロセスに依存しない、高速な自動テストを回すことができます。 MSW 高階関数とは「MSW ハンドラーを生成する関数」を指します（これは以前、こちらの記事でも触れた内容です）例えば以下のcreateHandlerの様に、特定のテストケースで 400 レスポンスをさしこめます。const server = setupMockServer(createHandler()); test("400", async () => { // Intercept mock Error server.use(createHandler(400)); // some test …