React入れたらCasperJSのE2Eテスト壊れたのでPhantomJS2入れたらPhantomJSのユニットテスト壊れたのでwebdriverioでE2Eテスト書き直した話

これまで VanillaJS / jQuery で頑張ってたプロジェクトに React 入れて、Reactは最高！などと言っていたのだけど、E2Eテストが落ちている事に気づいた。
落ちたテストで画面キャプチャしたりして調べた結果、Reactコンポーネントを描画するところで落ちていた。
どうやらPhantomJS1系で見られる現象のようだった。

e2e - CasperJS で Reactjs のサイトをテスト - Qiita

E2EテストにはCasperJSを使っていた。
Casper の dependencies は "phantomjs": ">=1.8.2" となっている。

PhantomJS の謎な挙動にはユニットテストでも散々苦しめられていた。
既に polyfill 幾つか入れて対処していたのだけど、良い機会なので別の道を模索してみよう、という話になった。

頑張ってPhantomJS2を入れた話

npm に公開されている phantomjs は Medium がメンテしており、本家 phantomjs をダウンロードしてきてインストールするだけのスクリプトとなっている。
releases をみると https://github.com/Medium/phantomjs/releases/tag/v2.0.0-alpha が出ているが、issueを見ると結構たいへんそうな雰囲気だ。

"phantomjs2"で npm を検索すると幾つかのパッケージが見つかる。
これらは Medium/phantomjs と同じ要領でビルド済み phantomjs2 をインストールしてくれる。
（野良ビルドも多そうだけど、とりあえず動かしてみる）

CasperJS では環境変数 PHANTOMJS_BIN で phantomjs のバイナリを指定できる。
早速 npm install -D phantomjs2 して、 PHANTOMJS_BIN=/xxx/xxx/phantomjs casperjs test foo.coffee を実行！

……

無事テストは通ったのだった！！！

PhantomJS2入れたらユニットテストが壊れた話

上手く行ったかのように見えた PhantomJS2 化計画だが、Jenkinsのテスト環境セットアップ時にエラ―が出ていた。
package.jsonには phantomjs, phantomjs2 双方が記録された状態なので、

phantomjs2がインストールされ、node_modules/.bin/phantomjs に phantomjs2 への symlink を張る。
phantomjsがインストールされる時、 node_modules/.bin/phantomjs が存在するのでエラーになる

という流れで npm i に失敗していたようだ。

手元で試した時は、phantomjs が既にインストールされた状態で phantomjs2 をインストールしたからエラーが出なかったのか？
詳しくは調べなかったが、ともかく npm i が落ちる状態になってしまった。

次に、ユニットテストで使っている PhantomJS を PhantomJS2 に移行してみることにした。
ユニットテストは Karma + PhantomJS で動いており、 karma-phantomjs-launcher を利用している。

ググってみると karma-phantomjs2-launcher が存在したので、不安になりつつも早速インストール。
手元の mac で npm t を実行！！

……

無事テストは通ったのだった！！！

が！！！！！！

Jenkinsコケた！！！！！！！！！

……

PhantomJS2 の公式バイナリは mac/win でしか配布されていない。
karma-phantomjs2-launcher は一応 Linux でも動くということになっているけど、ソース見たら downloadUrl += 'u1404-x86_64.zip' となっており非常に迷いが無い。マジか……
https://github.com/gskachkov/phantomjs2/blob/master/install.js#L117

ってか良く見たら mac/win でも野良ビルド使ってるのか……

という訳で、我々の Jenkins の動作している CentOS サーバでは動くはずが無かったのだった。
どうしても PhantomJS2 使いたかったら自分でビルドする必要がある。

webdriverioでE2Eテスト書き直した話

ビルド面倒……そこまでして PhantomJS にこだわる必要は無いのだ。
幸いにして21世紀を生きる我々には他の選択肢が沢山用意されている！やった！！未来最高！！！！

最近の選択肢だとこんな感じ？

Selenium系 (Protractor, testium, webdriverio等)
Nightmare

Nightmare はシンプルにつかえて良いんだけど、

Selenium系が良い（APIが充実している）
- Nightmareにはドメインを指定してCookieを設定するAPIがない
メソッドチェーンで全部書くのダルい
- webdriverio 等は ES6 generator でテスト書ける
- testium は webdriver の API をラップしてるので同期的に書ける