イイダリョウのブログ。JSフロントエンド開発環境の続きです。クモのようにコツコツとWeb開発環境まとめqiita.comテスト駆動開発とは何かJestは「テスト駆動開発(TDD)」のツールと言われる。ナンチャラ駆動開発はたくさんあって、その中の一つ。Development」のDrivenはDriveの過去形。テスト駆動開発には3つのサイクルが存在します。リファクタリングです。テスト駆動開発(TDD)はレッド(失敗)、グリーン(成功)、リファクタリング(修正)のサイクルを回しながら、一つ一つの部品の安全性を高めて次の工程に進む作り方をするようだ。信号みたいなイメージ。Developers.IOフロントエンド開発でテストってどんな物なのだろう。Qiitaフロントエンドのテストの難しさ。blogとにかくテストがどんなものか体験してみないとイメージしづらかった。いうことでJestで体験してみる。JestのインストールJestも前回のPretterと同じような流れでインストールでけた。-vJestを入れるフォルダを作る。今回は「jest_test」とした。cdコマンドでjest_testフォルダに移動。-yローカルにJestをインストールする。}テストの対象の元ファイルを作成(内税計算)ではさっそくテストを作成してみよう。公式サイトを参考に進めてみる。Jestまずテストの対象になる元ファイルsum.jsを作る。元ファイルsum.jsにはやりたい処理のコードを書く。uchizei;関数uchizei()で消費税の内税を計算する処理。module.exportsでuchizeiをモジュール(部品)としてエクスポート消費税の内税の計算式はこちらを参考にした。BLOG税率が10%になって外税は計算しやすくなったが、内税は相変わらず計算しづらいよなーと思い。テストファイルを作る次にテストを実行するファイルsum.test.jsを作る。テスト用ファイルは下記の構成で書くようだ。expect(処理).toBe(予想結果);});変数hogeにrequire()で元ファイルを読み込む。無名関数の中、expect()の引数に処理、toBe()の引数に予想結果を書く書いてみた。10)).toBe(78);});uchizei()の第一引数(合計)に860円、第二引数(税率)に10%を入れると結果は78円になるはずだよ、と想定している。(後略)おや?エラー?「テストが指定されていません」となった。ERRが何行か連なっている。package.jsonのscriptsを書き直す原因はpackage.jsonにありそう。自動的に作られたscriptsオプションはこうだった。},公式サイトによるとscriptsはこれだけでいいみたい。...(後略)お、テストが実行された!人生初テスト成功です!FAILのところが赤色になっている。レッドはテスト失敗という意味。テスト実行は成功したがテスト結果は失敗という。ERRはまだいくつか続いている。大元のnpmのバージョンが古いからか?と思いグローバルのnpmを入れ直してみた。Qiita結果は解消されず...。コードを書き直してテスト再実行(ついにグリーン!)とはいえテストの実行結果自体が出たのは前進!さっそくコードを修正してみよう。先ほどのレッドでは内税の計算結果に78.18181818181819と小数があるのことを指摘された。Math.floor()関数を使って小数を切り下げに書き直してみる。ERRが今回は出なかった。testお、FAIL(レッド)になった。10)).toBe(870);});今度はPASS(グリーン)。