react-railsを使ったアプリでコンポーネントのテストを走らせてみた。

いままでNode.jsをまともに触ったことがなく、JavaScriptはほぼjQueryを使うための言語だった程度のへっぽこもいいところからのスタートです。

まずは一人React.js Advent Calendar 2014と入門 Reactをひと通り読みました。
つぎにreact-railsを使ってReactのチュートリアルをやってみたらなんとなく動いた（ほぼコピペ）んですが、react-railsで使われているReactはこんな感じでgemに含まれていてnpmでは管理されておらず、その他のnodeモジュールを使ったりコンポーネントのテストをどう書いたらいいのか分からず進めなくなってしまいました。

そこで、分からないなりに試行錯誤してなんとかテストを走らせることが出来るまでのもろもろです。
結論から言うと、Rails.rootの下に「js」というディレクトリを掘ってjs部屋とし、そこにコンポーネントのソースをコピーしてテストを走らせています。
このディレクトリ構成はmizchiさんの記事にあったサンプルソースを参考にさせていただきました。
その他もググりまくって書いたり消したり方々から拝借してきたのですが、方々過ぎて分からなくなってしまいました。（ごめんなさい…）

ソースはここにあります。

だいぶ右往左往したのですが、ほぼ2週間に渡る試行錯誤の経緯はこんな感じです。
１．gulpってのを使って処理をまとめるのがいまの普通みたいなので、gulpタスク内でテストを走らせることを目指す。
２．gulp自体やプラグインの使い方を調べながらひたすらタスクを書く。
３．なんとか出来たところで、ReactのTestUtilsがDOMを必要としていることに気が付く。（※1）
４．前覚えたKarmaを使えばいいのでは？と思いつく。（※2）
５．Karmaを使ってPhantomJSに走らせてもらう。
６．動いた！（とりあえず！）

※1

Test Utilities | React

Render a component into a detached DOM node in the document. This function requires a DOM.

※2

WebStormでpower-assertが動くまで。 » サイキョウライン

ランナーにKarmaを、フレームワークにMochaを、ブラウザにPhantomJSを使いました。

テストが走るまでの概要
・assetsの下からコンポーネントのソース（*.coffee）をコピー
・coffee→jsの変換
・jsx→jsの変換
・テストのjsをespowerして（日本語合ってる？）mochaで実行
・ここで「ReferenceError: document is not defined」と怒られる
・espowerした（日本語合ってる？）テストKarmaで実行

コードについて考えたこと
・コンポーネントのソースはcoffeeで書くが、使うのはES5までに留める。
ES6の機能を持ち込む（とくにarrow関数）とコンパイル結果が予測できず混乱してしまった。
ブラウザが読む（外に出る）部分なので、ブラウザ依存のような躓きは防ぎたい。
・テストのソースはjsで書いてES6の機能を出来るだけ使っていく。
正式公開されているので、実際に使って慣れていきたい
外に出ない部分なので、なにかあっても対策がしやすい。

テスト対象で対策をしたこと
コンポーネントのソースはブラウザでもNode.jsでも走るので、両方に向けて依存解決のためのコードを埋めた。

Foo = {}

if module?.exports
  `var $ = require('jquery')` unless $?
  `var React = require('react')` unless React?
  module.exports = Foo
else
  `var $ = this.$` unless $?
  `var React = this.React` unless React?
  @Foo = Foo

Foo.MessageBox = React.createClass

ビューではreact-railsのメソッドを通してこんな感じで使ってます。

= react_component('Foo.MessageBox', url: 'http://example.com/messages')

残っている問題
・アプリ内で使っているReactとテストで使っているReactのソースが異なる。
・動いてはいるがいろいろ普通ではない、気がとてもしている。

その他思ったこと
こういう時、昼メシついでになんとなく聞けるような同僚がいない、ぼっち系個人事業主つらい。

タイトルとURLをコピーしました