今日は、もりけん塾で勉強会のあったJestについてです。
こんにちは。Webコーダーのはるです。
所属しているもりけん塾のJestハンズオン勉強会で得たことをアウトプットします！
【もりけん塾】Jestハンズオン勉強会のまとめ
回線が悪くJestの勉強会をほぼ聴くことが出来ず…もりけん先生(@terrace_tec)のハンズオン資料をもとに自分で手を動かして学習しました。
勉強会のハンズオン資料はこちらです。
Jestの公式記事と一緒に進めました。
Jestとは？
Jest公式には、
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
と書かれています。
さらに調べてみて、プログラミングにはバグを見つけるためのテストを行う必要があり、それを補助する仕組みのことをテストフレームワークというと知りました。
テストとは？
勉強会に出られなかったこともあり、最初は「テストって何だろう。。。」状態だったのですが、これについては以下のサイトがとてもわかりやすくイメージを掴むことができました。
テストは主に2種類あり、
- 単体テスト・・・部品(モジュール)に分けてテスト
- 結合テスト・・・いくつかの部品をまとめてテスト
に分けられます。（今回のハンズオンでは、単体テストを扱っている)
プログラムにバグがないかどうかを手動で確認するのは大変な作業…そこでテストを自動化してくれるのがJestです。先ほどの参考サイトには以下のようにあります。
一般的に単体テストは「自動化」します。「こういう入力があったらこのモジュールはこういう動作をするよね」というのをあらかじめ記述しておき、それを自動的に実行するテストフレームワークにテストを任せます。テストフレームワークは、テストを通過したかどうか、どのテストが落ちたか、ソースコードの網羅率は、などの様々な情報を出力します。
環境構築
Jestは、Node,jsの環境下で動作します。以下コマンドでバージョンが出て来ればOK
node -v
ディレクトリの作成
今回はDesktopにtestディレクトリを作成しました。
cd /Users/takedaharuna/Desktop //Desktopへ移動
mkdir test //testディレクトリを作成
cd /Users/takedaharuna/Desktop/test //testディレクトリへ移動package.jsonを作成
testディレクトリ内でpackage.jsonを作成します。
npm init
ターミナル上で色々質問されるのでEnterを押していくとpackage.jsonが作成されました。
公式にならって、package.jsonに以下の設定を追加しました。
この設定をすることで、’npm test’ コマンドでテストができます。
{
"scripts": {
"test": "jest"
}
}Jestのインストール
最初は公式にならって、”npm install –save-dev jest” コマンドを使用したのですが、先生のハンズオンではES6の書き方(import/export)が使われていたので後々のハンズオンでエラーが出ました。
Jestは、Node.jsの仕様に合わせる形でCommonJSが使用されているから、書かれているES6のコードはサポートしていないよと怒られました。
よって、ES6に対応させるためにJestとbabelを一緒にインストールしました。
npm install --save-dev jest babel-jest babel-core@^7.0.0-bridge.0 @babel/core @babel/preset-envtestディレクトリを見るとnode_modulesが作成され、中にbabelもあります。
ES6に対応させるためにbabelのプラグインをインストールしました。
npm install --save-dev @babel/plugin-transform-modules-commonjs
testディレクトリ内に「.babelrc」ファイルを作成し、以下のように設定を書きました。
{
"env": {
"test": {
"plugins": [ "@babel/plugin-transform-modules-commonjs" ]
}
}
}ここまでで環境構築はおわりです。
ES6対応は、もっと良い方法があればぜひご教授頂けるとうれしいです🙇♀️（お問い合わせ）
はじめてのテスト
ハンズオンにならって簡単なテストを行いました。
ファイルを作成
まず、テストディレクトリ内に必要なファイルを作成します。
touch index.js
touch index.text.jsjsを記述するファイルをindex.js、テストを書くファイルをindex.test.jsとしました。
関数のコードを書く
index.jsに関数を追加します。exportをつけることで、外部から関数を使用することができます。
export function add(a, b) {
return a + b;
}テストを書く
index.test.jsにテストを書く。index.jsの関数を使うときは、importを使用します。
import { add } from "./index";
test('adds 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});testは、このように記述します。
test('テストの概要', () => {
expect(関数(引数)).toBe(想定される値);
});.toBe()はMetcherメソッド(マッチャー)の一つで、expectで書いた内容との等価性を評価するものです。
ここまでのコードは、ハンズオン資料をもとに書きました。
テストをする
実際にテストをしてみます。
先ほどpackage.jsonで設定を追加したので, npm testコマンドが使用できます。
npm test
- PASS ＝テスト通過しました！
- チェックマークの部分に、テストのコードに自分で書いた “テストの概要” が表示されます。
追加で学習したこと
Jestの環境構築と、最低限のテストを終えたあと、いくつか追加で学習しました。
テストをまとめて書く
テストをまとめて書いてnpm testすることで、複数のテストを一度に行うことができます。
describe('関数名', () => {
test('テストの概要', () => {
expect(関数(引数)).toBe(想定される値);
});
test('テストの概要', () => {
expect(関数(引数)).toBe(想定される値);
});
})このようにdiscribeメソッドを使用して、共通の関数に関するテストをまとめます。
Matcherメソッド(マッチャー)
マッチャーは、先ほど出てきた.toBe()以外にもたくさんあるので、公式のマッチャーに関するページを読みました。
- toBe: 厳密な等価性をチェック(===)
- toEqual: オブジェクトと配列を含めた厳密な等価性をチェック
- toContain: 配列や反復のオブジェクトの中に指定のアイテムが含まれているかチェック
など他にも様々なものがあり、公式内のリファレンスに完全版がありました。
Jest課題
ハンズオン資料に書かれていた課題に挑戦しました。長くなってしまいそうなので、もりけん先生にいただいたレビューで学んだことを書きます。
node_modulesはgitignoreする
node_modulesは膨大な量のファイルがある上、バージョン管理をする必要がないのでgitignoreします。
これは、常識だったようです。。そもそも、gitHubのPR画面に表示される「Files changed」に数千の量が表示されていたのでここで気付くべきでした。知ることができてよかったです。大変勉強になりました。
一度、gitにpushしてしまっていたので以下の手順でgitignoreへ追加しました。
①touch .gitignore //gitignoreファイル作成
②vim .gitignore //vimでファイルを編集
③以下のように追記して、shift + zzで保存
node_modules/
~
~
~
~
④node_modulesを残したままgit管理を外す
git rm -r --cached node_modules
⑤git push origin head以下のサイトを参考にしました。
指定の要素が配列に含まれない場合のテスト
課題３で「オレンジが配列に含まれているかチェックする」というコードを書きました。
filterOrangeは、配列にフィルターをかけてオレンジを取り出す関数です。
test('if the array contains orange, return new array in orange', () => {
const fruit = ["orange", "apple", "peach"];
expect(filterOrange(fruit)).toContain("orange");
});もりけん先生から、追加でもう一つテストケースを書いてみるようにレビューをいただきました。
想像力が無さすぎた。。一つのテストケースだけじゃテストしたとは言えないですよね。
早速、公式のマッチャーメソッドと睨めっこして書いてみました。
test('if the array not contains orange, return an empty array', () => {
const fruit = ["grape", "apple", "peach"];
expect(filterOrange(fruit)).toEqual([]);
});toEaual()というマッチャーメソッドを選びました。オブジェクトと配列を含めた厳密な等価性をチェックしてくれるものです。
fruitという配列にオレンジが含まれていなかったとき、新しい配列[ ]を返すかチェックするテストにしました。こちらでApproveいただきました。
追記：
ハンズオン資料をよくみたら、最後に先生の解答例が載っていました。
先生のコードを見れるチャンス👀！！
特につまづいた課題３の「配列にオレンジが含まれていないケース」を見てみると、
it("passed parameter array include orange, it should be empty arry", () => {
const fruits = ["pine", "apple", "peach"];
const result = filterOrange(fruits);
expect(result).toStrictEqual([])
// toEqualでも可
})toStrictEqual() というマッチャーが使用されていました。
toEqualでも可と書かれていますが、気になったので貼ってあったリファレンスで調べました。
toStrictEqualは、2つのオブジェクトが同じデータを持っているかどうかだけでなく、同じ構造を持っているかどうかもチェックします。
とあり、配列のキーの等価性までチェックしてくれるマッチャーだとわかりました。こちらの方がより厳密なのですね！
先生のコードをマジマジと見てしまった笑
先生の解答例はこちら
あとがき
そもそもテストという概念や、テストをするためのフレームワークがあることすら知らなかったので大変勉強になりました。node_modulesの件も本当に知れてよかった。。。
すごく楽しみにしていた勉強会だったのに、回線の調子が悪くて断念したのが悔やまれます。。やはり後から自分で追うと理解に時間がかかったし、特に環境構築に苦戦してしまいました。
次からの勉強会は、回線万全に臨みたいと思います。ありがとうございました！
私の書いたJest課題のコードはこちらから確認できます。
もりけん塾で勉強しています✨
もりけん先生(@terrace_tec)のHPはこちら
