#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本格入門」がおすすめです。

コメント

このブログの人気の投稿

#11 Rustで学ぶエラーハンドリングの基本

#16 TypeScriptで学ぶ辞書型(マップ)の基本

#19 Goで学ぶテスト(単体テスト)の基本