javascriptでテストを行うときのツールとその説明 #JavaScript

テストの種類

javascriptでテストを行うとき、テストの種類は大きく分けて2つに分かれます。
「単体テスト」と「結合テスト」です。

単体テストとは

「単体テスト」とはメソッドや関数、モジュールなどの小さい単位を対象にして、その中身の構造やデータの受け渡しが意図した通りになっているかを検証するテスト。
※javascriptのコードチェックを行う。

結合テストとは

「結合テスト」とはそれぞれのモジュールを組み合わせて一連の流れを検証するテスト。「シナリオテスト」とも言われます。
※ブラウザを立ち上げてQAテスト項目を確認する

単体テストのツール

単体テストを行うときに使う主なツールはこちら

QUnit
Jasmine
Mocha
Jest

このなかで最新のテストツールが「Jest」になります。
また「Jest」は「React」を用いたアプリケーションのテストも行えるので、今後「単体テスト」を行うなら「Jest」導入を推します。

「Jasmine」「Mocha」「Jest」のテストコードの基本的な書き方は似ています。

テストコード

describe('', () => {
　beforeAll(() => {
    // 一回だけ呼ばれる事前処理
  });

  afterAll(() => {
    // 一回だけ呼ばれる事後処理
  });

  beforeEach(() => {
    // itごとに毎回呼ばれる事前処理
  });

  afterEach(() => {
    // itごとに毎回呼ばれる事後処理
  });

  it('', () => {
    // テストの内容
  });

  it('', () => {
    // テストの内容
  });
});

上記を実行したときの処理の順番

beforeAll
beforeEach
afterEach
beforeEach
afterEach
afterAll

Jestを導入するには

Jestを使うにはnpmインストールする必要があります。

jestをinstall

$ npm init
$ npm i jest -D
$ export PATH=$PATH:./node_modules/.bin   // パスを通す
$ jest --version

sum.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;

sum.test.js

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

test('引数の値を足したときの値を確認', () => {
  expect(sum(1, 2)).toBe(3);
});

※テストコードを書くファイルの拡張子は「test.js」にする必要があります。
テストを実行したときにjestがその拡張子のファイルを探しにいくためです。

package.jsonの中身を書き換え

package.json

"scripts": {
  "test": "jest"
}

テスト実行

$ npm test

実行結果

PASS  ./sum.test.js
  ✓ 引数の値の合計をテスト (3ms)

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

結合テストのツール

結合テストを行うときに使う主なツールはこちら

Zombie.js
PhantomJS
Selenium
TestCafe

このなかで最新のツール(フレームワーク)である「TestCafe」導入を推します。
その理由としては、

TestCafeでは各ブラウザのWebdriverを設定する必要がない
Node.jsをインストールしてない環境でもTestCafeでテスト結果を見ることができる。
ES6でテストコードを記述できる

TestCafe導入するには

TestCafeを使うにはnpmインストールする必要があります。

TestCafeをinstall

$ npm init
$ npm i testcafe -D
$ export PATH=$PATH:./node_modules/.bin   // パスを通す
$ testcafe -v

TestCafeのコード例

TestCafeのテストコード

// import 文
// 変数・定数等の宣言

fixture('テスト内容の分類やページのタイトル等')
  .page('テストするページのURL');

test('テスト項目名その1', async t => {
  // テスト記入
});

test('テスト項目名その2', async t => {
  // テスト記入
});

test('テスト項目名その3', async t => {
  // テスト記入
});