はじめに
仕事で、TypeScript(以下、TS)に最適化されたJestであるts-jestをyarnでインストールし、makeコマンドで実行するためにMakefile
に設定したので、備忘録を残します。
調べた際に、yarnでのインストールではなくnpmでのインストールのパターンが多く、makeコマンド
ではなくnpm scripts
への設定ばかりだったので、今回の記事を共有します。是非参考にしてもらえればと思います。
この記事では、以下について書いています。
- yarnでts-jestをインストールするコマンド
- Makefileの設定とmakeコマンドでのテスト実行
- テスト対象関数の作成と解説
- テストコード作成と解説
- テストの成功例と失敗例
ts-jestの準備
ディレクトリ構成
{{ workspace }}
└─ src ← テストコードやその他の実装があるディレクトリ
└─ jest.config.js ← Jestの設定ファイル
└─ Makefile ← makeコマンドの設定ファイル
yarnでts-jestをインストール
yarn add --dev jest typescript ts-jest @types/jest
jest.config.jsにts-jestの設定
他にも、package.jsonを使う方法等ありますが、今回はjest.config.js
を設定ファイルとしました。
module.exports = {
preset: 'ts-jest'
};
これはいくつか方法があるので、設定したいファイル ts-jest
とかでググってみて下さい。
Makefileを設定してmakeコマンドでテスト実行
よくあるパターンとしては、package.json
にscripts
キーを準備して、npm script
を使ってnpm testとかで実行できる方法がありますが。今回はmake
コマンドを使ってテスト実行します。
test:
npx jest
- npxとはnpm5.2.0の新機能。詳しくはこちら。
テストファイルの準備
ディレクトリ構成
{{ workspace }}
└─ src
└─ utils
└─ index.ts ← テスト対象関数があるファイル
└─ index.test.ts ← テストコード
└─ jest.config.js
└─ Makefile
テスト対象の関数のコード
// convertDateToString はDate型の日付をYYYY/MM/DDで返す
export function convertDateToString(date: Date): String {
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return year + '/' + month + '/' + day;
}
- Date型を渡されたら、YYYY/MM/DDのString型にして返す関数です。
date.getMonth()
では、実際の月から1引いた値(インデックス)が返るので、+1しています。
テストコード
import {convertDateToString} from '.';
describe('index.ts', (): void => {
test('Convert Date To String YYYY/MM/DD.', (): void => {
const successPattern = [
{
input: new Date(2020, 11, 31),
want: '2020/12/31',
},
{
input: new Date(2020, 11, 31, 23, 59, 59),
want: '2020/12/31',
},
];
successPattern.forEach((e) => {
const response = convertDateToString(e.input);
expect(response).toBe(e.want);
});
const failedPattern = [
{
input: new Date(2020, 12, 31),
want: '2020/12/31',
},
];
failedPattern.forEach((e) => {
const response = convertDateToString(e.input);
expect(response).not.toBe(e.want);
});
});
});
- テストしたいファイルをimportします。
- Table Driven Testを意識して、オブジェクトの配列を作成しています。
describe('index.ts',
←ここの’index.ts’は何でもOKです。実行した際に出力されるので、そのときに分かりやすい文字列を記述しておいて下さい。test('Convert Date To String YYYY/MM/DD.'
←ここの、’Convert Date To String YYYY/MM/DD.’も何でもOKです。実行した際に出力されるので、そのときに分かりやすい文字列を記述しておいて下さい。input
に、引数として渡すDate型の値をセットしています。want
に、関数から返ってきてほしい、想定の値をセットしています。expect(response).toBe(want);
←この一行で、関数の返り値とwant
が一致することを確認しています。expect(response).not.toBe(want);
←この一行で、関数の返り値とwant
が一致しないことを確認しています。
テストの実行と結果の例
make test
コマンドでテストが実行されます。
成功例
$ yarn test
yarn run v1.21.1
$ jest
PASS src/utils/index.test.ts
index.ts
✓ Convert Date To String YYYY/MM/DD. (2 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.702 s
Ran all test suites.
✨ Done in 4.35s.
失敗例
$ yarn test
yarn run v1.21.1
$ jest
FAIL src/utils/index.test.ts
index.ts
✕ Convert Date To String YYYY/MM/DD. (6 ms)
● index.ts › Convert Date To String YYYY/MM/DD.
expect(received).toBe(expected) // Object.is equality
Expected: "2020/12/30"
Received: "2020/12/31"
8 |
9 | const response = convertDateToString(target);
> 10 | expect(response).toBe(want);
| ^
11 | });
12 |
13 | })
at Object.<anonymous> (src/tests/utils_index.test.ts:10:22)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 3.236 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
※失敗例では、want
変数を2020/12/31
から2020/12/30
に変更して実行しています。
さいごに
今回は、以下の記事をまとめました。
- yarnでts-jestをインストールするコマンド
- Makefileの設定とmakeコマンドでのテスト実行
- テスト対象関数の作成と解説
- テストコード作成と解説
- テストの成功例と失敗例
最後までありがとうございます。
何かツッコミあれば、Twitter等でご連絡頂けると嬉しいです!