背景
- フロントエンドのテストという存在を辞めた同僚から聞いた
- その人が入った会社はかなり良いところで、そこではフロントエンドでもテストをやっているらしい
- いいところに入るのであれば私も勉強しておくかというわけで以下の本を買った
- フロントエンド開発のためのテスト入門
- 本について
- テストの種類や考え方、フロントエンドでもテストを行う利点について言及されていた
- このあたりの考え方は何となくは分かったけど、まだ理解はしきれていない
- ここでは単体テストを行うにはJestを使うとのことなので今回はJestの環境構築を本の内容に則ってやってみた。
- サンプルコードは使わずに０からインストールからやってみる
Jest環境構築
開発環境
開発言語
やったこと
yarn init
yarn add --dev jest
サンプルコードとテストコードの作成
関数用のファイルを作成
- 今回は面積を計算する関数を作ってみる
- src/areaCalc.ts
export const areaCalc = (base: number, height: number) => {
return (base * height) / 2
}
テストコード用ファイルを作成
- テストコードは専用のファイルを作らなければいけない
- この.test.〇〇ってやつはテストファイルという扱いなのだろうか
src/areaCalc.test.ts
import { areaCalc } from "./areaCalc";
test("areaCalc: 底辺5cm * 10cm は 面積25㎠", () => {
expect(areaCalc(5, 10)).toBe(25);
});
- あれ？
test とexpectでエラーが出てるぞ？
-
- あーTypeScript的な理由でエラーが起きたのかな？
- エラーログに書いてあった通りにjestの@typeをインストしてみる
- ただ今回はyarn使っているのでyarnに書き直して実行
yarn add @types/jest --dev
Jestの関数について
- test関数について、第２引数まで記載するのが基本セットのよう
test(テストタイトル, テスト関数);- 第１引数について、今回だとテストタイトル「areaCalc: 底辺5cm * 10cm は 面積25㎠」はこの関数で期待する結果はこれというものがわかりやすく書けていればいいっぽい
- 第２引数はテスト関数というらしい、この中に書く関数はアサーションと呼ぶ
- アサーションというのは「検証値が期待値通りである」という検証を行う文とのこと
- このあたりちょっと難しかったけどテストするにはアサーションの中にマッチャーというものを書くらしい
- 今回でいうとこういうロジックになる
- アサーション→expect(検証値).toBe(期待値)
- マッチャー→toBe(期待値)
- マッチャーはなんか他でも見たことある単語、なんだったかな・・・
- テストはdescribe関数を使えばグループとしてまとめてテストできるらしいけど、今回は１つテスト実行できればいいや
テストはどうやって実行する？
やり方は２つ
"scripts": {
"test": {
"test": "jest"
}
},
yarn run test
- ただしこのやり方はテストファイル全部を実行するので時間かかるし使い勝手悪いのでよろしくない
- ファイルの指定をしてテストするには以下のように書く
yarn run test 'src/areaCalc.test.ts'
Jest Runnerから実行
- 一々パス指定してテストするのは効率悪からJest Runnerがある
- Jest RunnerはVSCode用のプラグイン
- インストールするとテストコードの見た目が以下のようになる
(Run | Debugが付く)
- このRunを押下すると対象のテスト関数が実行されるらしい
- ぽちっと押すだけでテストやってくれるのでこりゃ楽だ🐪
- めっちゃエラー出てるけど・・・
今回はここまで
