テスト駆動でフロントエンドも開発したい
テスト書いてますか？
自分はどんな小さいロジックでもテストを書くようにしています。
「1＋1」だろうがテストを書きます。
めんどくさいだろうが、時間がかかろうが書きます。
さて、以前の記事でも書いたようにバックエンドからフロントエンドへ転向することになりました。
フロントエンドでまず最初に思ったのが
「テストって何やるんやろう？」
ということ。
ローカルサーバーでクライアント画面を立ち上げて、挙動のチェックをするのだろうなぁとは思っていたのですが、
わざわざ手を動かしてテストを行うのがいちいち面倒だなって思ったのでテストコードを書いて単体テストを実施したい。
「フロントエンド テスト」で検索するとJestというJavascript用のテストランナーを使うことがわかった。
なので今回の記事を見てJestを使ったテストの書き方を学んでほしい。
対象読者
- 駆け出しエンジニア
- これからJestを使ってテストを書きたいと思っている人
- 駆け出しフロントエンドエンジニア
Jestのテストの書き方
モジュールのテストはめちゃくちゃ簡単だった。
Jestのインストール
ドキュメント通りに実施する。
テストを書いてみる
その前にテストコードを書くために必要なことを簡単にまとめる。
itとexpect
itまたはtestというテストを定義するための関数を使って書いていく。
第一引数にはテストの説明を、第二引数にはテストする関数を書く。
import { <テスト対象の関数名> } from "./path/to/module"; // 拡張子は不要なので注意 it("テストの説明をここに書く", () => { // テストの内容を書く // たとえば、ある値がtrueかどうかを判断する場合 const trueOrFalse = true; expect(trueOrFalse).toBe(true); }
expectは結果の期待値を記述するための関数。
toBeやtoEqualなどのマッチャーを使って期待する結果を宣言する。
では、簡単な関数を作成してテストを行ってみる。
ディレクトリ構成
.
┝ add.ts
└ add.test.ts
テスト対象ファイル
// add.ts // 渡された引数を使って足し算を行う関数 export function addNums(num1: number, num2: number): number { return num1 + num2; }
テストファイル
// add.test.ts import { addNums } from "./add"; it("[OK] 1足す1は2", () => { const result: number = addNums(1, 1); expect(result).toEqual(2); })
テストの実行
package.jsonにスクリプトを追記。
"scripts": { "test": "jest" }
npm testコマンドを叩いてテストを実行する。
$ npm test > test > jest PASS ./add.test.ts √ [OK] 1足す1は2 (2 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.648 s Ran all test suites.
参考ドキュメント
- Jestでテストを書こう
- Jest - getting started
