Express アプリのテストの書き方
Node.js のフレームワーク Express を使ったウェブアプリケーション開発における自動テストの書き方をかんたんにまとめました。
利用ツール
今回 は React ベースのプロジェクトでよく使われる Jest をテストフレームワークとして使います。
- Node.js 16
- Express 4
- Jest 27
- SuperTest 6
前提
- Node.js 16
手順
プロジェクトを新規に作成するところから始めます。
Express アプリを作成する
プロジェクトディレクトリを作成し npm init
を実行します。
mkdir express-jest-example-jacd express-jest-example-janpm init
ダイアログがいくつか出てくるので答えます。
完了すれば package.json
が生成されます。
package.json
:
{"name": "express-jest-example-ja","version": "1.0.0","description": "","main": "app.js","scripts": {},"author": "Goto Hayato","license": "ISC"}
ECMAScript modules の設定を行う
ES modules シンタックス( import ~ from 'モジュール'
)を利用するための設定を行います。
なおこの手順はオプショナルで、デフォルトの CommonJS module シンタックス( require()
や module.exports
)を使う場合には不要です。
package.json
に "type": "module"
の設定を追加します。
package.json
:
{"name": "express-jest-example-ja","version": "1.0.0","description": "","main": "app.js","author": "Goto Hayato","license": "ISC","type": "module"}
Express をインストールする
続いて npm
で Express をインストールします。
npm install --save express
メインファイルを作成する
Express ベースのアプリのメインファイルを作成します。
app.js
:
import express from 'express'const app = express()const port = 3000app.get(`/`, (req, res) => {res.send(`Hello World!`)})app.listen(port, () => {console.log(`Example app listening at http://localhost:${port}`)})
これは Express 公式のチュートリアルのサンプルとほぼ同じです。
import
を使っているところだけが公式と異なります。
試しに動かしてみると、ブラウザで「 Hello World! 」と表示されることが確認できるはず です:
node app.jsExample app listening at http://localhost:3000
package.json
にこれを実行するためのスクリプトを追加しておきます。
package.json
:
{// 省略"scripts": {"start": "node app.js"},// 省略}
ここからテストを書いていきます。
自動テストのためのパッケージをインストールする
自動テストを行うためのパッケージをインストールします。
今回は Jest と Jest Puppeteer と SuperTest と start-server-and-test
を使います。
npm install --save-dev jest jest-puppeteer supertest start-server-and-test
jest
: Facebook が開発した人気のテストフレームワークjest-puppeteer
: Jest × Puppeteer のブラウザテストをかんたんに行えるようにするツールsupertest
: HTTP リクエスト用ライブラリsuperagent
ベースのテスト用ツールstart-server-and-test
: ブラウザテストをかんたんに行うためのテスト用ツール