Jest で始める JS のテスト

Laravel 5.6 から導入された新しいログのハンドリング方法について紹介してきます。

Jest

Jest は JavaScript のテストライブラリです。

複雑な設定を行う必要がなく、簡単に高速に使える、といった特徴は ava にも通じるところがありますが、 全体的なトレンドとしては Jest の方に軍配があがるようです。

https://stackshare.io/stackups/ava-vs-jest

Jest の導入

Jest は npm 経由でインストールします。

$ npm install --save-dev jest

次に、テストファイルを作成します。

Jest ではデフォルトで、__tests__ フォルダ内のJSファイル、 及び .test.js .spec.js といった拡張子のJSファイルをテストファイルとして扱います。

sample.test.js を以下のような形で作成してみましょう。

test('adds 1 + 2 to equal 3', () => {
  expect(1+2).toBe(3);
});

テストファイルの準備ができたら jest コマンドを実行してテストを実行しいます。

$ jest
 PASS  ./sample.test.js
  ✓ adds 1 + 2 to equal 3 (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.324s
Ran all test suites.

Jest と Matcher

Jest には標準で Assersion 用のライブラリが付属しており、通常これを用いてテストを記述します。

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

expect.toBe の形式のコードは最も一般的なコードで、 === を用いた厳格な評価を実行します。

オブジェクトの各要素を比較する場合には toEqual が利用されます。

test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

その他にも様々なマッチャーが用意されており、テストの状況に応じて適切なものを使い分けることができます。

https://jestjs.io/docs/ja/using-matchers

ES6 の利用

import などを使うには babel の 設定が必要です。

$ npm i --dev babel-jest babel-core regenerator-runtime babel-preset-env

必要なモジュールがインストールできたら .babelrc を設置します。

{
  "presets": ["env"]
}

参考

https://jestjs.io/docs/en/getting-started.html#using-babel

axios で CROSS ORIGIN 発行

Jest 内で axios を発行する際に CROSS ORIGIN のエラーが発生するケースがあります。

この場合、 jest.config.js を作成して以下のように設定すると良いでしょう。

{
  // ...
  testEnvironment: 'node'
  // ...
}

https://github.com/axios/axios/issues/1418


投稿一覧へ