雑文発散

▼ [JavaScript][Jest] React のテストを書くのに Jest を使ってみたら、チュートリアルも動かずにハマってしまった

React の勉強をしていて、コンポーネントの書き方は、まぁ、だいたい把握できてきたので、ここらでテストについて学ぼうと思い、Jest を使い始めてみた。

Jest は Jasmine の拡張バージョン（？）らしいので、学んだ知識は Jasmine を使うプロジェクトにも再利用できそうだし、何より「全てのモジュールは自動的にモック化する」という思想に面白みを感じた。テスト対象のモジュールだけモック化を取りやめるというのが、とてもいさぎよい。

その他にも「__tests__ というディレクトリ以下のファイルは、テストコードだと認識して実行する」という動作も面白い。__tests__ ディレクトリは、プロジェクト内のどこにあっても勝手に走査してくれるようだ。PHPUnit とかだと、テスト実行対象のディレクトリを指定していたんだけど、あれはいったいなんだったんだ？と思ってしまった。

まぁ、こんな感じで、wktk しながら、自分で書いた React コンポーネントのテストコードを書こうとして、Jest の「Tutorial – React」を見ながら試し始めた。

いま React で試しているコードは JSX を使っている。Jest で JSX を利用したコードをテストするには、ちょっと仕込みが必要らしい。

それが先ほどのチュートリアルのページの一番下のほうに書いてある。

まずは package.json に jest の項目を追加。

"jest": {
    "scriptPreprocessor": "<rootDir>/preprocessor.js",
    "unmockedModulePathPatterns": ["<rootDir>/node_modules/react"]
}

<rootDir> の部分は、自分のディレクトリに差し替えするもの、、、ではなく、そのままで良いようだ。これは npm の流儀なのかな（よく分かってない）。

次に scriptPreprocessor で指定した preprocessor.js をプロジェクトの root ディレクトリに置く。

// preprocessor.js
var ReactTools = require('react-tools');
module.exports = {
  process: function(src) {
    return ReactTools.transform(src);
  }
};

これらが何をしているのかと言うと、「jest の実行時に、まず JSX が含まれるテストコードを preprocessor.js の ReactTools.transform(src) で普通の JavaScript にコンバート（transform）する」ということのようだ。

さて、これで準備が整ったので、簡単なテストを実行してみたら、、、

% ./node_modules/.bin/jest
Using Jest CLI v0.4.0
Waiting on 1 test...zsh: segmentation fault  ./node_modules/.bin/jest __tests__/components

segmentation fault で落ちる。

初めての React で初めての Jest で初めてのテストコードだったので、何が悪いのか分からず四苦八苦していたのだけど、試行錯誤の結果、preprocessor.js の ReactTools.transform(src); の部分で落ちていたところまで突き止めた。

こうなるとオレの問題では無いので、Jest 側の問題を調べ始めたところ FAC4 という本（gitbook）のテストの Setupの章にこのように書かれていた。

Jest doesn't play well with version 0.12 of Node. If you experience errors (e.g. Segmentation Fault), you may need to install npm packages n or nvm to roll back your version of node to 0.10.x. Version 0.10.33 seems to work well.

つまり、Jest は今のところ Node v0.12 だとうまく動かないってこと。手元の Node はそういえば v0.12 なのであった。

% node --version
v0.12.2

nvm を使って Node v0.10.38 を入れて、npm install をやり直してから実行したら、今度はちゃんとテストが実行できるようになった。

% ./node_modules/.bin/jest __tests__/components
Using Jest CLI v0.4.0
 PASS  __tests__/components/StartButton-test.js (1.051s)
1 test passed (1 total)
Run time: 1.296s

Jest が実行できるようになって分かったのだけど、引数なしで jest を叩くと、node_modules の中まで・テスト実行してしまうようなので、上記では __tests__/components ディレクトリを指定している。あれ、なんか結局ディレクトリ指定した方がいいのか、、、とか思ったりするアレはあったけど、ようやく成功。

はー、結局何が言いたかったかというと、「Jest は Node v0.12 だとまだ動かない」ということだ。

なお、「Update to work with node v 0.12.0」という Issue は上がっているので、順次対応を進めているという状況みたい。

はー、知らないモノを追っていくと、変なところでハマるわー。