[TypeScript] jest/supertestでexpressのテストコードを書く

 supertestを使えばエンドポイントごとのexpressのテストコードを書くことができます。

ライブラリのインストール


 まずはライブラリのインストール。

npm install express
npm install -D jest ts-jest typescript supertest @types/express @types/jest @types/supertest

 次にjestの設定。package.jsonの一番下に以下のような記述をします。

 ここはお好みで。これはtestsディレクトリ配下の~.test.tsをテストコードと認識する設定です。

    "jest": {
        "transform": {
            ".(ts|tsx)": "ts-jest"
        },
        "testMatch": [
            "**/tests/**/*.test.(ts|tsx)"
        ],
    }

appとapp.listenをファイル分けする


 supertestを使うときは実際にlistenしないのでappとapp.listenをファイル分けする必要があります。

 例えばこんな感じ。

import express from 'express'

const app = express()
const todos = [
  {
    username: 'user1',
    title: 'title1',
  },
  {
    username: 'user2',
    title: 'title2',
  },
]
app.get('/todos', (req, res) => {
  res.send({
    todos: todos,
  })
})
app.post("/todos", (req, res) => {
  todos.push(req.body)
  res.send(200)
})
export default app
import app from './app'

app.listen(3000, () => {
  console.log('Listen 3000')
})

supertestでテストコードを書く


 こんな感じでテストコードが書けます。内容はだいぶてきとーですが必要なこと一通り書いてあると思います。

 先ほどの分割したappをimportしてsupertestのrequestに渡すことでエンドポイントのテストができます。

 post/get.then((res) => {~})の中でレスポンスのテストを記述します。

 sendでpostのbodyを指定できます。getのパラメータは直接URLに記述します。

import request from 'supertest'
import app from '../app'

describe('Todos', () => {
  test('Add todos', async () => {
    return request(app)
      .post('/todos')
      .send({
        username: 'user3',
        title: 'title3',
      })
      .then((res) => {
        expect(res.status).toBe(200)
      })
  })

  test('Get todos', async () => {
    return request(app)
      .get("/todos")
      .then((res) => {
        expect(res.status).toBe(200)
        expect(res.body.length).toBe(3)
      })
  })
})

認証用トークンを設定する場合


 こんな感じでsetメソッドでトークン設定ができます。

post(~)
  .set('Authorization', `Bearer ${token}`)
  .send(~).then(~)


TypeScript/Express/supertest/prismaなどを使ったサンプルコード


 TypeScript/Express/supertest/prismaあたりを用いたサンプルコードをGithubにあげているのでよかったら見てみてください。

 supertestである程度テストコード書いています。

https://github.com/pei223/express-prisma-sample

コメントを残す

メールアドレスが公開されることはありません。