Chapter 06

Jestの導入とテストコードの作成・テスト実施

manycicadas
manycicadas
2021.01.14に更新

Jestのインストール

JestはJavaScriptのテストフレームワークです。
以下のコマンドでインストールすることができます。

$ yarn add jest ts-jest --dev

package.jsonの修正

scripts部分にtestを追加します。
その下に、Jestの設定を追加します。
テストはtestディレクトリ以下に置くので、testMatchで指定してあります。

{
  // 省略
  "scripts": {
    "lint": "eslint --fix 'src/**/*.ts'",
    "test": "jest" // 追加
  },
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "js"
    ],
    "transform": {
      "^.+\\.ts$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsconfig": "tsconfig.json"
      }
    },
    "testMatch": [
      "**/test/**/*.test.ts"
    ]
  },
  // 省略
}

テストコードの作成

src/trim.tsのテストコードをtest/trim.test.tsに記載します。
trimを実行した結果が想定どおりの結果になるかをテストします。

import trim from '../src/trim';

describe('trim test', (): void => {
  test('no space', (): void => {
    const response: string = trim('test');
    expect(response).toBe('test');
  });

  test('left space', (): void => {
    const response: string = trim('   test');
    expect(response).toBe('test');
  });

  test('right space', (): void => {
    const response: string = trim('test   ');
    expect(response).toBe('test');
  });

  test('left&right space', (): void => {
    const response: string = trim('   test   ');
    expect(response).toBe('test');
  });
});

テストの実施

テストが完成したら、実行します。
全てのテストが成功しました。
テストが失敗したら、実装が間違っているのか、テストコードが間違っているのか確認しましょう。

$ yarn test
#  PASS  test/trim.test.ts
#   trim test
#     ✓ no space (2 ms)
#     ✓ left space
#     ✓ right space (1 ms)
#     ✓ left&right space
# 
# Test Suites: 1 passed, 1 total
# Tests:       4 passed, 4 total
# Snapshots:   0 total
# Time:        2.873 s, estimated 3 s
# Ran all test suites.
# ✨  Done in 4.43s.

今回はライブラリの実装を行ってからテストを作っていますが、
テストファーストな方はライブラリの実装を作る前にテストコードを先に書き、テストが通るように実装をしてもらえればと思います。