まだ完全にテスト駆動でやるところまではたどり着けてないのですが、最近ちょっとしたコードは学習用のテストまわしてからソースに組み込むということをやってます。

学習用テストの便利なところ

• 気軽にテストできる
• プロダクションコードじゃないから事故が怖くない
• コードスニペット集的にも使える
• 楽

準備

ファイルとライブラリの準備

$ npm init -y
$ npm install -D mocha power-assert
$ touch sample.test.js

空テストをまわす

sample.test.jsに以下のようなコードを書いておきます。

const assert = require('assert');

describe('first test', () => {
  it ('is is run?', () => {
    assert.ok(true)
  })
})

あとは./node_modules/mocha/bin/_mocha sample.test.jsを実行すればOKです。

最近やった例

ドメインから特定の文字を切り出す

XXXX.cloudfront.netドメインから「cloudfront」だけを抜き出すコードを書きたかったので、以下のようなテストを書いてみました。

describe('my test', () => {
  it ('cf target test', () => {
    const target = 'xxxxxx.cloudfront.net'
    assert.equal(target.split('.')[1], 'cloudfront')
  })
})

上のサンプルをテスト駆動っぽくかく

これくらいの小さいコードだと、比較的テスト駆動で書くことが簡単だったりします。

まずは理想形を先に書いておきます。
これはベタ打ちしてるので、テストが成功します。

describe('my test', () => {
  it ('cf target test', () => {
    const target = 'cloudfront'
    assert.equal(target, 'cloudfront')
  })
})

次に実際の値を入れてみます。
こっちは失敗します。

describe('my test', () => {
  it ('cf target test', () => {
    const target = 'xxxxxx.cloudfront.net'
    assert.equal(target, 'cloudfront')
  })
})

１回目のテストで、assert.equalの第一引数が’cloudfront’になればテストが成功するのはわかっています。
なので、あとは実際の値を入れている2つ目のテストが成功するようにコードを変えていけばOKです。

そのほかのテストコード

「あれ、このライブラリどんな動きしたっけ？」とか、「この正規表現自信ねーなー」というときにも便利です。

momentのフォーマット形式の確認

describe('my test', () => {
  it ('get valid format', () => {
    assert.equal('201711', moment().format('YYYYMM'))
  })
})

正規表現の確認

describe('path test', () => {
  it('match valid path', () => {
    const event = {
      path: '/server',
    }
    assert.ok(/\/server$/.test(event.path))
  })
})

おわりに

スニペットレベルなので、別にSPAでないWordPresサイト向けのJSとかでもいけるはずです。

いきなりプロダクションに投入するのは大変かもですが、自分PCに１つ学習用テスト環境持っておくと便利なんでみなさんぜひ。

参考書籍

テスト駆動開発 単行本（ソフトカバー） – 2017/10/14 Kent Beck (著),‎ 和田 卓人 (翻訳)

power-assertは翻訳者の和田さんが作られているライブラリですが、オブジェクトの比較などアサーションが親切なのでおすすめです。

assert.deepEqual()だと、実際の値も出してくれる。

1) find id
       sample:

      AssertionError: [ 'bbb', 'ccc', 'ddd' ] deepEqual [ 'bbb', 'ccc' ]
      + expected - actual

       [
         "bbb"
         "ccc"
      -  "ddd"
       ]

      at Context.it (sample.test.js:16:12)