読者です 読者をやめる 読者になる 読者になる

ES6のクラス記法を使ってテストを書いてみた

表題の通り、JavaScriptのテストをES6のクラス記法を使って書いてみたのでメモ。
今回テストを実装しようとしたときに、各テストケースごとに決まった前・後処理があったので、継承を利用して決まった処理の部分は隠蔽できないかなと思ったのがきっかけです。

準備

テストのライブラリはavaを使いました。
ES6の記法を使うので、合わせてbabelもインストールします。

$ npm init
$ npm install ava babel babel-core babel-preset-es2015 --save-dev 

avaとbabelの設定をします。

// package.jsonに以下の記述を追記
{
  ...

  "ava": {
    "require": "babel-register",
    "babel": "inherit"
  },
  "scripts": {
    "test": "node_modules/ava/cli.js -v "
  },

  ...
}
// .babelrcに作成してbabelの設定を入れる
{
  "presets": ["es2015"]
}

テストサンプル

// testBase.js
// 各テストケースの抽象クラス

class TestBase {
  constructor(test) {
    this.test = test;
    this.beforeEach();
    this.afterEach();
  }
  beforeEach() {
   this.test.beforeEach(t => {
     // テストケースごとの先行処理
   });
  }
  afterEach() {
    this.test.afterEach(t => {
      // テストケースごとの後続処理
    });
  }
  runTests() {
    // メソッド名がtestで始まるメソッドを取得
    const methodNames = Object.getOwnPropertyNames(this.__proto__).filter(methodName => {
        return methodName.match(/^test.+/);
    });
    // 取得したメソッドを実行
    methodNames.forEach(m => {
      this[m]();
    });
  }
}

export default TestBase;
// testCase.js
// 個別のテストケース

import test from 'ava';
import TestBase from './testBase';

class TestCase extends TestBase {
  constructor(test){
    super(test);
  }
  testSample() {
    this.test('sample test', t => {
      // テストケース処理
    });
  }
}

const testCase = new TestCase(test);
testCase.runTests();

実行

以下のような感じで実行できる。

$ npm test testCase.js