先日、ある関数を書いていました。
見る人が見ればすぐわかるらしいんですが、これだと一生"申込書到達"には到達しないそうです。ぴえん
ってことで、今日はこの関数を題材にテストコードを書いてみたいと思います。
今回はJestというフレームワークを使います。
テストコードって何
- 自分が書いた関数って本当に仕様満たしてる？？
- リファクタリング、修正した時に仕様漏れ発生しない？
- テスト通ってれば大丈夫でしょ！
みたいなことです。
まずは書く
まず、この関数に期待することを列挙してみましょう。
index.test.js
test('引数に0を渡した時に、"申込書到達"が返される', () => {
});
test('引数に1を渡した時に、"申込手続中"が返される', () => {
});
test('引数に2を渡した時に、"申込完了"が返される', () => {
});
test('引数に3を渡した時に、空文字が返される', () => {
});
期待することというか、要はここで仕様を網羅する必要があります。
そして、仕様が網羅されていなかったらテストの意味ないので、この段階でWIPでプルリクを出しておきましょう。
では、関数も追加しましょう。
index.test.js
test('引数に0を渡した時に、"申込書到達"が返される', () => {
expect(applicationProgressValue(0)).toBe("申込書到達");
});
test('引数に1を渡した時に、"申込手続中"が返される', () => {
expect(applicationProgressValue(1)).toBe("申込手続中");
});
test('引数に2を渡した時に、"申込完了"が返される', () => {
expect(applicationProgressValue(2)).toBe("申込完了");
});
test('引数に3を渡した時に、空文字が返される', () => {
expect(applicationProgressValue(3)).toBe("");
});
expect(applicationProgressValue(0)).toBe("申込書到達");
これは、applicationProgressValueに引数0を渡した時に、"申込書到達"が戻り値となることを期待する、という意味です。
そして、スクリプトを追加します。
pacage.json
"scripts": {
"test": "jest"
}
ではターミナルでコマンドを実行してみましょう。
npm run test
うーん🤔
FAIL ./index.test.js
✕ 引数に0を渡した時に、"申込書到達"が返される (7 ms)
✕ 引数に1を渡した時に、"申込手続中"が返される (1 ms)
✕ 引数に2を渡した時に、"申込完了"が返される
✓ 引数に3を渡した時に、空文字が返される (1 ms)
エラーがめちゃくちゃ出てしまいましたね。
どうやらこの関数は、私の意図した通りの挙動はしてくれないみたいです。
という風に、自分が書いた関数が本当に正しいのかチェックしてくれるのがテストコードの役割になります。
では、コードを修正していきましょう。
この辺はお好みでいいんですが、私は下記のように修正しました。
index.js
const applicationProgressValue = (num) => {
if (num !== 0 && num !== 1 && num !== 2) {
return "";
};
const progressValue = ["申込書到達", "申込手続中", "申込完了"];
return progressValue[num];
};
で、もう一度スクリプトを走らせてみると。。。
PASS ./index.test.js
✓ 引数に0を渡した時に、"申込書到達"が返される (3 ms)
✓ 引数に1を渡した時に、"申込手続中"が返される
✓ 引数に2を渡した時に、"申込完了"が返される
✓ 引数に3を渡した時に、空文字が返される (1 ms)
素敵。
おしまい。
最後に
いや、自分が書いたテストコードって正しいの？！
元々の関数を壊してみましょう。
テストが通らなくなったらきっと大丈夫。