mocha + enzyme + power-assertの環境構築メモ

node modules

npm install -D babel babel-register babel-preset-latest babel-preset-react babel-plugin-espower mocha power-assert enzyme react-addons-test-utils jsdom jsdom-global
npm install -S react

設定

.babelrc

.babelrc

{
  "presets": [
    "latest",
    "react"
  ],
  "plugins": [
    "babel-plugin-espower"
  ]
}

• test内でjsx syntaxを書くのでpresetsに"react"の指定が必要
• .babelrcを使いたくない場合は、babel-plugin-espower#via-babel-require-hookのようなスクリプトを用意して、以下のようにmochaの"-r"オプションでbabel-registerの代わりに渡すとよい
• presetなどはお好きに

実行

./node_modules/.bin/mocha -r babel-register -r jsdom-global/register path/to/test/**/*.js

• babel-registerをrequireすることで、ES.next + Reactなテストコードをトランスパイルして実行できる
• enzymeのrender, mountmethodを実行する為にwindow.documentなどのcontextが必要なので、jsdom-global/registerをrequireすることによって設定する
  • 公式からリンクしているサンプルだとenzyme-example-mocha/test/.setup.jsのようなファイルを実行しているがその必要がなくなる

参考

• power-assert-js/babel-plugin-espower: Babel plugin for power-assert
• rstacruz/jsdom-global: Enable DOM in Node.js
• airbnb/enzyme: JavaScript Testing utilities for React
• enzyme-example-mocha/.setup.js at aa1b9aa45fb0c6b3fd5f395e1b246a75c958ba2d · lelandrichardson/enzyme-example-mocha