問題提起
Reactのテストには、React.addons.TestUtilsを使ってテストケースを書いて、
jestで実行するのがFacebook標準らしい。
- http://facebook.github.io/react/docs/test-utils.html
- http://facebook.github.io/jest/docs/tutorial-react.html
とりあえずReactの導入段階ではこの仕組みに乗っかってみることになると思います。
ただ、上記のサンプルは実際に使うには以下の点が不十分だと感じました。
- CommandLine/
npm runで動かすこと前提なので、他のタスクと連携しにくい。 - package.jsonに設定を書くのはなんか嫌だ。
ということで、やっぱりgulpタスクに乗っけないと不便だよね、と思って調べてみました。
また、副産物でこんなことも分かりました。
- jestの各種設定のやり方
- 公式ドキュメント分かりにくい。。。
- フォルダ構成
- 単体テストをするときに、javaとかと違って該当ファイルにjumpできない。
- だったら、テストファイルを距離的に近い所に置きたいよね。
構成
$ tree .
.
├── gulpfile.js
├── package.json
├── src
│ ├── CheckboxWithLabel.js
│ └── __tests__
│ └── CheckboxWithLabel-test.js
└── test_preprocessor.js
package.json
{
"name": "jest-for-react",
"version": "0.0.1",
"description": "",
"main": "index.js",
"author": "",
"license": "",
"dependencies": {
"react": "*",
"react-tools": "*"
},
"devDependencies": {
"gulp": "^3.8.10",
"harmonize": "^1.33.7",
"jest-cli": "^0.2.1"
}
}
見てわかるとおり、scriptsもなければjestの設定らしきものもないです。
僕的にはpackage.jsonに設定を書くのは嫌なので。
gulpfile.js
var gulp = require('gulp');
var jest = require('jest-cli');
require("harmonize")();
gulp.task('jest', function (callback) {
var options = {
rootDir: __dirname,
scriptPreprocessor: "<rootDir>/test_preprocessor.js",
unmockedModulePathPatterns: [
"<rootDir>/node_modules/react"
],
testDirectoryName: "__tests__",
testFileExtensions: ["js"]
}
var onComplete = function (result) {
callback();
}
jest.runCLI({config: options}, __dirname, onComplete);
});
設定はoptionsオブジェトに書かれています。
どんな設定ができるかは、以下を参考にして下さい。
今回の設定を簡単に言うと、「__tests__以下にあるjsファイルをテスト対象にする。」的な感じです。
※ちなみに、harmonizeをつけないと、Error: Please run node with the --harmony flagってエラーに見舞われます。サンプルコードがES6の仕様を取り込んでるのか、gulpタスクのせいなのか、それ以外の何かなのかは不明です。。。
test_preprocessor.js
var ReactTools = require('react-tools');
module.exports = {
process: function(src) {
return ReactTools.transform(src);
}
};
ここはサンプルのpreprocessor.jsと同じです。jsxをjsに変換します。
とりあえずトップに置いてますが、どこでもいいと思います。
事前にgulpタスクの方でjsに変換しておくのも考えましたが、こちらのほうが楽そうです。
src
ソースコードとテストコードが入っています。
（これらはTutorial – Reactそのままです。）
先の設定のように、テストコードは__tests__以下に置きます。
__tests__は何個あっても大丈夫なようです。
ソースコードとテストコードを近い位置に置くことで、見やすくなるし、テストコードのrequireがしやすくなります。
まとめ
とりあえずgulpでreactのテストができるようになりました。
ただ、まだjestでのmockの扱いとか、jestの何が嬉しいのかを理解していないので、
それは別途調べます。