Babel6でMochaとChaiを使ったテストを書く #JavaScript

はじめに

最近Reactとか触っています。Github上とかでいろいろなコードを見させていただくのですが、React周辺はReduxを使っているのでBabel使ってるけど、テストはFacebookのJestを使っていてあんまりBabel使えてなかったり、もはやテスト書いてなかったりします。
そもそもReactはフロントエンドのライブラリなので、あまりテストを書きたくなくなるのもわかります。ですが、Railsやっててもなるべくテストを書くことを尊重する雰囲気になってきているので、React周辺でもテストを書いていきたいのです。そこで、JestではなくてMochaとChaiを使ってテストを書くにはどうするべきなのかと思い、まとめました。

環境

node: v5.1.0
npm: 3.3.12
ディレクトリ構成

.
├── .babelrc
├── .eslintrc
├── package.json
└── test
    ├── setup.js
    └── test.spec.js

ライブラリのインストール

まず、表題にもある通りBabel、Mocha、Chaiをインストールしましょう。
npm init -yとかでpackage.jsonを作成しておいてください。
$ npm i --save-dev babel babel-core babel-preset-es2015 chai mocha
当然babel,chai,mochaをインストールします。この3つ以外にインストールしているものについて紹介します。

babel-core

babel-coreの用途を説明します。
Mochaにオプションでコンパイラを指定するときにbabel-registerというライブラリを使うので、関連ライブラリをまとめてインストールできるbabel-coreをインストールします。babel-registerだけインストールするのも良いのですが、そのうち他のライブラリを使う可能性があるので、babel-coreがいいかと思います。

babel-preset-es2015

babel-preset-es2015の用途を説明します。
Babel6からは新しい機能はプラグインとして配布されるようになったので、ES6の記法を利用したい場合はプラグインを有効にする必要があります。なので、babel-preset-es2015を使って有効にします。

.babelrc

{
  "presets": ["es2015"]
}

.babelrcにこのように記述することで、コンパイル時にES6の記法も使うことができます。これがないとimportなどがSyntaxErrorになってしまいます。

テストコマンド

package.jsonに以下のようにコマンドを追加します。

package.json

{
  ...
  "scripts": {
    "test": "NODE_ENV=test mocha --compilers js:babel-register --recursive $(find test -name '*.spec.js')",
    ...
  },
  ...
}

Mochaにオプションでコンパイラを渡します。先ほどインストールしたbabel-registerをコンパイラオプションに渡してあげます。
また、テストの記述するファイルをディレクトリ分けするために、--recursiveオプションを指定します。ここでは単純にディレクトリを渡していません。というのも、Reactを記述する際に最終的にはコンポーネントのテストもするはずなので、そのためにモックを用意するコードをtestディレクトリに用意した時に、その中も読み込んでしまいます。それを避けるため、テストを記述しているファイルは.spec.jsという名前をつけ、テストを便利にする振る舞いを記述したファイルはそのままのJSのファイル名で置いておくことで、いい感じになります。

テストコード

準備ができました。これでBabel6を使ってテストをかけます。
test/test.spec.jsにテストを記述してみましょう。

test.spec.js

import { expect } from 'chai';

describe('test', () => {
  it('1 + 2 = 3', () => {
    expect(1 + 2).to.equal(3);
  });
});

そしてnpm run testを走らせてみます。

  test
    ✓ 1 + 2 = 3


  1 passing (12ms)

こんな感じです。

まとめ

今回はBabel6でJSのテストを記述するというところに着目して書きました。なので、MochaやChaiの使用方法については詳しくは記述していません。Babel6になってからプラグインにいろいろ分かれたので、適切にプラグインをインストールして利用しないといけなくなりました。

僕もReactを使って何か書くときにテストを書く経験はあまりないので、MochaもChaiもあまり知りません。なので、調べたらまた書きたいと思います。
間違ってる、こうするといいよなどあったら是非教えてください！