【JS】【TS】JS単体試験ツール Jest ～ 入門編 ～

JavaScript TypeScript jest

■ はじめに

JavaScript / TypeScript の単体テストツールの話題になったので
調べてみたら、Jestがでてきたので、調べてみた。

目次

【１】主な単体テストツール
　１）比較サイト
【２】Jest 
　A）公式サイト
　B）できること
【３】環境設定
　１）Node をインストールする
　２）コマンドで設定を行う
　３）package.json の修正
【４】サンプル
　フォルダ構成
　例１：Hello world
　例２：複数メソッドの場合

【１】主な単体テストツール

１）Jest
２）Mocha
３）Jasmine
４）qunit
５）Tape
６）AVA
etc...

１）比較サイト

トレンド
https://www.npmtrends.com/jest-vs-jasmine-vs-mocha-vs-qunit

【２】Jest

* JavaScript / TypeScript の単体テストフレームワーク
* Facebook製
* MITライセンス (無料)

A）公式サイト
https://jestjs.io/ja/
B）できること 

１）テスト実行（非同期テストもできる！）
２）モック
３）テストカバレッジ
４）スナップショットテスト
　⇒ 2つのスナップショットが一致しない場合テストは失敗
　⇒ 意図した修正かどうかを確認するもの（なので失敗＝悪ではない）

https://jestjs.io/docs/ja/snapshot-testing

etc...

【３】環境設定

１）Node をインストールする 

* 以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2018/06/05/211900

２）コマンドで設定を行う 

# インストール
npm install --save-dev jest

３）package.json の修正 

{
  "scripts": {
    "test": "jest" <= ★追加★
  }
}

【４】サンプル

フォルダ構成

package.json
common.js
tests
  └─ common.test.js

例１：Hello world

https://jestjs.io/docs/ja/getting-started

を参考に行う。

common.js 

const sayHello = (name) => {
  return `Hello, ${name}!!`;
};

// コードが記述されているファイルをmoduleとして扱い、
// exportsしたオブジェクトをrequireキーワードを利用して
// 呼び出すことができるようにするための記述
module.exports = sayHello;

common.test.js 

const sayHello = require('../common');

test('Hello World for Jest', () => {
  expect(sayHello("Mike")).toBe("Hello, Mike!!");
});

実行 

npm test

> hello@1.0.0 test
> jest

 PASS  tests/common.test.js
  √ Hello World for Jest (2 ms)

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

エラーの場合 

> hello@1.0.0 test
> jest

 FAIL  tests/common.test.js
  × Hello World for Jest (7 ms)

  ● Hello World for Jest

    expect(received).toBe(expected) // Object.is equality
    Expected: "Hello, Sam!!"
    Received: "Hello, dummy!!"

      3 | 
      4 | test('Hello World for Jest', () => {
    > 5 |   expect(sayHello("dummy")).toBe("Hello, Sam!!");
        |                             ^
      6 | });

      at Object.<anonymous> (tests/common.test.js:5:29)  

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

例２：複数メソッドの場合

https://stackoverflow.com/questions/44302573/module-exports-multiple-functions-in-jest-testing

を参考に行った。

common.js 

const sayHello = (name) => {
  return `Hello, ${name}!`;
};

const sayWorld = (name) => {
  return `World, ${name}!!`;
};

// ★ここが差異★
module.exports = {
  sayHello: sayHello,
  sayWorld: sayWorld
};

// exports.sayHello = sayHello
// exports.sayWorld = sayWorld

common.test.js 

const common = require('../common');

test('sayHello for Jest', () => {
  expect(common.sayHello("Sam")).toBe("Hello, Sam!");
});

test('sayWorld for Jest', () => {
  expect(common.sayWorld("Sam")).toBe("World, Sam!!");
});

実行 

npm test

> hello@1.0.0 test
> jest

 PASS  tests/common.test.js
  √ sayHello for Jest (2 ms)
  √ sayWorld for Jest

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

参考文献

https://www.codegrid.net/articles/2017-jest-1/
https://tech.bitbank.cc/lets-test-by-jest/
https://qiita.com/moriaki3193/items/bc1120d572d55038d2d0

関連記事

JS単体試験ツール Jest ～ 基本編 ～
https://dk521123.hatenablog.com/entry/2021/01/08/164356
JS単体試験ツール Jest ～ Mock編 ～
https://dk521123.hatenablog.com/entry/2021/01/26/215558
JS単体試験ツール Jest ～ キャッシュ関連 ～
https://dk521123.hatenablog.com/entry/2021/03/12/164932
Jestを使った Vue / TypeScript の単体試験 ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2021/01/07/230317