TypeScriptのテストをパッと書く

typescriptのユニットテストしたいんじゃー的な時。余計なビルド結果を出力したくないのでプリプロセッサ機能必須。
ts-jest で書いていたが なんかコレジャナイ感あったので 一周回って mocha + power-assert + espower-typescript の王道構成に戻ってきたらメンテされて使いやすくなってた。

 

モジュールインストール

yarn add mocha power-assert espower-typescript --dev

型定義インストール

yarn add @types/power-assert @types/mocha --dev

実行

./node_modules/.bin/mocha --compilers ts:espower-typescript/guess test/spec/**/*-test.(ts|tsx)

とかでプロジェクトのtsconfig.jsonの設定を読んでいい感じにやってくれる。

package.jsonにシェル書いとけば npm test　とか yarn test で動く

"scripts": {
    "test": "./node_modules/.bin/mocha --compilers ts:espower-typescript/guess test/spec/ --timeout 30000",
}

test.ts

tsconfigの設定によってはES7 async や デコレータも使えて調子いいっすね

import "mocha";
import assert = require("power-assert");

const sleep = (time : number)=> new Promise(r => setTimeout(r , time))

describe("section", ()=>{

    it("非同期テスト", async ()=>{
        await sleep(2000)
        assert.equal(3 ,3)
    });

    it("高階関数テスト" , ()=>{

        function decorate(clazz) {
            return class extends clazz {
                constructor() {
                    super();
                }
                prop : number = 100;
            }
        }

        @decorate
        class BaseClass {
            prop : number = 0;
        }

        const base = new BaseClass()
            assert.equal(base.prop , 100)
        });
    });
});

---

特に何も入れずにスクレイプのテストをパッと書く

スクレイプ / WebサイトE2Eテストの構成がほしい時。

TypeScript勢は上記の構成に好きにヘッドレスブラウザなりを入れて自由にしたらいいと思うが、それ以外の方。

結論から言うとこちらのボイラープレートを参考にするのが一番早い
nightmare-ava-example

 

ava はmochaみたいなテストフレームワークで、デフォルトでasyncをサポートしていたりとシンプル。
Nightmareはヘッドブラウザphantomjsのラッパー。(casperjsみたいなもん)…だったが、最近はElectron(chromium)が裏で立ち上がるようになってる。

こんな感じ

import test from 'ava';
import Nightmare from 'nightmare';

const nightmare = Nightmare({ show: true });

test.serial('Async/Await!', async (t) => {
    const result = await nightmare
       .goto('http://yahoo.com')
       .screenshot('output/png/hoge.jpg')
       .type('form[action*="/search"] [name=p]', 'github nightmare');

    const result2 = await nightmare.click('form[action*="/search"] [type=submit]')
       .wait('#main')
       .evaluate(function () {
           return document.querySelector('#main .searchCenterMiddle li a').href;
       });
    t.true(result2.includes('images.search.yahoo.com'));
});

実行

./node_modules/.bin/ava --verbose spec/

すぐに書き始められていいかと思う。