More than 3 years have passed since last update.

Express + MongoDBで作成したAPIサーバーをJestでテストする

Last updated at 2021-09-10Posted at 2020-08-10

はじめに

テストを書くのは好きですか？

アプリケーションを作成するうえで、テストは必ず書かなきゃいけないものですが、テストの書き方まで丁寧に記載されている書籍やサイトって少ないように感じます。

今回はExpress + MongoDBで作成したAPIサーバーをJestでテストします。

まずはモジュールごとに依存関係を切り離した単体テストを作成します。
Jestの強力なモック機能を活用することができます。

その後supertestを用いた結合テストまで作成します。
supertestは擬似的なHTTPリクエストを送ることができます。

テスト対象のアプリケーション

予め作成しておいた以下のコードをテストします。
機能としては簡単に、/api/users/:usernameをGETで叩くと指定したユーザーネームのユーザーを取得でき、/api/usersをPOSTで叩くと、ユーザーを作成できるという最小限のものです。

すべてのコードはここから確認することができます。
https://github.com/azukiazusa1/express-test

MVCモデルにのっとり、大きくわけてルーティング、コントローラー、モデルで構成されています。

src
  ├ controllers
    ├ userController.ts
  ├ middleware
    ├ error.ts
  ├ models
    ├ userModel.ts
  ├ routes
    ├ index.ts
    ├ userRoutes.ts
  ├ index.ts
package.json
package-lock.json
tsconfid.json

以下、srcフォルダの中身です、

index.ts

src/index.ts

import Express from 'express'
import bodyParser from 'body-parser'
import mongoose from 'mongoose'
import router from './routes'
import errorMiddleware from './middleware/error'

const app = Express()
const port = 3000

// dbに接続
mongoose.connect('mongodb://localhost:27017/express-test', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true
})

mongoose.Promise = global.Promise

// postリクエストを受け取るための設定
app.use(
  bodyParser.urlencoded({
    extended: true
  })
)
app.use(bodyParser.json())

// /api以下にルートを作成
app.use('/api', router)

// エラーハンドリング
app.use('/', errorMiddleware.notFound)
app.use(errorMiddleware.errorHandler)

// サーバースタート
app.listen(port, () => {
  console.log('server start')
})

export default app

routes/index.ts

src/routes/index.ts

import Express from 'express'
import userRoutes from './userRoutes'

// すべてのルーティングをここにまとめます。
const router = Express.Router()

router.use('/users', userRoutes)

export default router

routes/userRoute.ts

src/routes/userRoute.ts

import Express from 'express'
import usersController from '../controllers/usersController'

const router = Express.Router()

router.get('/:username', userController.show)
router.post('/', usersController.create)

export default router

controllers/userController.ts

src/controllers/userController.ts

// controllerはModelとリクエストを仲介します。
import Express from 'express'
import User from '../Models/user'

export default {
  // ユーザーを一人返す
  show: async (
    req: Express.Request,
    res: Express.Response,
    next: Express.NextFunction
  ) => {
    try {
      const username: string = req.params.username
      const user = await User.findOne().findByUserName(username)
      res.status(200).json({ user })
    } catch (e) {
      next(e)
    }
  },
  // ユーザーを作成する
  create: async (
    req: Express.Request,
    res: Express.Response,
    next: Express.NextFunction
  ) => {
    try {
      const user = await User.create(req.body)
      res.status(201).json({ user })
    } catch (e) {
      next(e)
    }
  }
}

models/user.ts

src/models/user.ts

import mongoose, { Schema, Document, Model, DocumentQuery } from 'mongoose'
import { User } from '../types/user'

export interface UserDoc extends Document, User {
  fullName?: string
}


// スキーマを定義
const userSchema: Schema = new Schema(
  {
    username: {
      type: String,
      required: true,
      unique: true
    },
    fristName: {
      type: String
    },
    lastName: {
      type: String
    },
    gender: {
      type: String,
      required: true,
      enum: ['male', 'female']
    },
    age: {
      type: Number,
      min: 0,
      max: 100
    }
  },
  {
    timestamps: true
  }
)

// バーチャルフィールド
userSchema.virtual('fullName').get(function(this: User) {
  return `${this.firstName} ${this.lastName}`
})

// クエリヘルパー
const queryHelpers = {
  findByUserName(this: DocumentQuery<any, User>, username: string) {
    return this.findOne({ username })
  }
}
userSchema.query = queryHelpers

interface UserModel extends Model<User, typeof queryHelpers> {}

export default mongoose.model<User, UserModel>('User', userSchema)

テストを記述する

それでは、これからテストを記述していきましょう。
幸いなことに、今回テストするアプリケーションは、ルーティング、コントローラー、モデルに切り離されて構築されているので、それぞれに単体レベルでテストを書くことができます。

それぞれのモジュールが依存するモジュールをモック化することで、影響範囲を小さくしてテストをすることができます。

そして、最終的にはモジュールを結合して擬似的なHTTPリクエストを送る、結合テストまで記述していきます。

Jestのテスト環境の構築

今回は、Jestというテストフレームワークを使ってテストを記述していきます。

まずはJestをインストールしましょう。

npm i -D jest @types/jest

package.json

package.jsonのscriptsをJestを使用するように書き換えます。

package.json

{
  "name": "express-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
--  "test": "echo \"Error: no test specified\" && exit 1",
++  "test": "jest",
    "serve": "ts-node-dev src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/mongoose": "^5.7.34",
    "express": "^4.17.1",
    "mongoose": "^5.9.27"
  },
  "devDependencies": {
    "@types/express": "^4.17.7",
    "@types/node": "^14.0.27",
    "ts-node-dev": "^1.0.0-pre.56",
    "typescript": "^3.9.7"
  }
}

tsconfig.json

Visual Studio Codeに怒られないように、tsconfig.jsonにJestの型定義を追加します。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "moduleResolu``tion": "node",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
+   "types": ["@types/jest"]
  }
}

babel.config.js

Babelを使用するための設定を追加します。Babelを使用することで、テストファイル中でもimport/export構文が使えたり、ECMAScriptの新しい記法を使うことができます。

まずは必要なモジュールをインストールします。

npm i -D babel-jest @babel/core @babel/preset-env @babel/preset-typescript

プロジェクトルートに、babel.config.jsonを追加します。

babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

jest.config.js

Jestではデフォルトのテスト環境はブラウザになるので、Node.jsの環境でテストするように設定を追加します。

プロジェクトルートにjest.config.jsを追加します。

jest.config.js

module.exports = {
  testEnvironment: 'node'
}

テストのテスト

テストのテストを書いて確認してみましょう。testフォルダを作成し、その中にindex.spec.tsファイルを作成し、簡単なテストを記述します。

test/index.spec.ts

describe('simple test', () => {
  test('1 === 1', () => {
    expect(1).toBe(1)
  })

  test('1 === 2', () => {
    expect(1).toBe(2)
  })
})

テストはnpm testで実行します。うまくいけば、テストは一つは成功し、もう一つは失敗します。

npm test

> express-test@1.0.0 test /express-test
> jest

 FAIL  test/index.spec.ts
  simple test
    ✓ 1 === 1 (3 ms)
    ✕ 1 === 2 (6 ms)

  ● simple test › 1 === 2

    expect(received).toBe(expected) // Object.is equality

    Expected: 2
    Received: 1

       5 | 
       6 |   test('1 === 2', () => {
    >  7 |     expect(1).toBe(2)
         |               ^
       8 |   })
       9 | })
      10 | 

      at Object.<anonymous> (test/index.spec.ts:7:15)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        2.669 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

コントローラーのテスト

まずは、コントローラーからテストを記述していきます。
コントローラーの責務から、次の観点に基づいてテストを記述します。

リクエストを受け取った結果正しいレスポンスを返すか
正しいステータスコードを返すか
エラーハンドリングが正しく行われているか

テスト対象をコントローラーに絞ってテストを書きたいですが、コントローラーはExpress（レスポンスとリクエストの処理）とモデル(データベースの処理）に依存しています。
この2つのモジュールをモック化しましょう。

test/controller/userController.spec.tsに記述していきます。

Expressをモック化する

Expressをモック化するために、sinon-express-mockというモジュールをインストールします。
これは、Expressのリクエストとレスポンスメソッドをを簡単にスパイ化してくれます。

npm i -D sinon-express-mock @types/sinon-express-mock sinon

使い方は、以下のとおりです。

mockReqにオブジェクトを渡して生成すると、モックリクエストを渡すことができます。
mockReq()、mockRes()で生成されたのは、スパイメソッドです。スパイ化されたメソッドは引数、戻り値、thisの値、およびすべての呼び出しに対してスローされた例外（存在する場合）を記録します。

よって、resオブジェクトが何回呼び出されたか、どのような引数で呼び出されたかなどをテストすることができます。この例では、res.status()がステータスコード201で呼び出されていることをテストしています。