#19 JavaScriptで学ぶテスト(単体テスト)の基本
書いた関数が期待通りに動くかを、ブラウザやコンソールで毎回手作業で確かめていませんか?この記事では、JavaScriptで書いたコードを自動でチェックする「テスト」の基本を解説します。
なぜテストを書くのか
コードを修正するたびに、関連する機能が壊れていないかを手作業で確認するのは大変です。テストを用意しておけば、コマンド一つで「壊れていないか」を数秒で確認できます。最初は手間に感じますが、後から安心して機能を追加・修正できるようになります。
一番簡単なテストの考え方
テストの基本は「入力を渡して、期待した出力が返ってくるか確認する」ことです。まずは考え方をコードで見てみましょう。
function add(a, b) {
return a + b;
}
if (add(2, 3) !== 5) {
throw new Error("add(2, 3)が5になりません");
}
これでも簡易的なテストになりますが、実際の開発では次に紹介する専用のツールを使うのが一般的です。
Jestを使ったテストの書き方
JavaScriptではJestというテスト用ライブラリがよく使われます。npm install --save-dev jestで導入できます。
function add(a, b) {
return a + b;
}
test("2と3を足すと5になる", () => {
expect(add(2, 3)).toBe(5);
});
ターミナルでnpx jestと実行すると、test()で書かれたテストがすべて自動で実行され、結果が一覧表示されます。expect().toBe()という書き方で「この値になるはず」を宣言します。
異常系もテストしておく
正しい入力だけでなく、想定外の値(0やマイナスの値など)を渡した時の挙動もテストしておくと安心です。
test("0同士を足すと0になる", () => {
expect(add(0, 0)).toBe(0);
});
JavaScriptならではの注意点
JavaScriptは非同期処理(通信結果を待ってから処理するなど)が多い言語です。非同期の処理をテストする時は、Jestが用意しているasync/await対応のテストの書き方を使う必要があります。普通の書き方のままだと、処理が終わる前にテストが「成功した」と誤判定されてしまうことがあるので注意してください。
まとめ
テストは「正しく動くことを保証する仕組み」であり、安心してコードを修正するための土台になります。まずはexpect().toBe()のような単純な確認から始めて、慣れてきたら非同期処理のテストにも挑戦してみてください。
関連記事
本ページはプロモーションを含みます。
参考書籍(PR)
JavaScriptをもっと学びたい方には「改訂新版JavaScript本格入門」がおすすめです。
コメント
コメントを投稿