読者です 読者をやめる 読者になる 読者になる

suzan2号の戯れ

SIerでインフラSE⇛WEB系でエンジニアのおっさん

React + Redux + Railsのサンプルを色々アップデートした

アップデートしたのはこれ。 react-railsredux を同時に使うためのサンプルです。 github.com

公開する時期が早かった(2015年の8月)せいか、謎にスターが100個以上ついてる。有難い。 (当時はReduxがまだ流行り始めたころで、Railsと組み合わせて使ってるようなサンプルが無かったから…と思う)

使っているgemは以下。

こんなサンプル作ったけど、仕事ではこの構成で運用してなくて、JS/CSSのビルドとして Sprockets は使わずに、 webpack を使う構成だったりします*1

browserify 自体の開発がもうあまり活発には行われていないっぽい(さらにrails 5.1 では webpack のサポートが入る*2… )のと、 個人的には react-rails よりも react_on_rails *3 の方が色々都合が良い( HMRがやりやすいとか、コンポーネントをグローバルに置かなくてよいとか、AuthenticityTokenをポストする方法がサポートされているとか )と思っているので、このサンプルの構成自体ちょっと微妙ではあります。

が、react_on_rails の方にはかなりしっかりした Redux を使ったサンプルコードがあるので*4react-rails でうまくやる方法はまだ一定需要があるかなと思い、色々アップデートしてみました。

Railsを4.2から5.0.0.1に上げた

ほぼ中身のアプリケーションがないということもあるけど、何も困らずに上げられました。特筆することも特に無いw

テストを追加した

こんなIssueを貰っていたので、テストを追加してみた。 github.com

E2Eのテスト

対象のコミット

普通にcapybaraとseleniumで。仕事でもハマったのですが、 firefoxの47以下でないとselenium-webdriverが動きません。。以下、 capybara の公式より引用です(2016年12月18日現在)。

Note: Firefox 48+ If you're using Firefox with selenium-webdriver and want full functionality stay on either Firefox 45.0esr or 47.0.1. If using selenium-webdriver 3.0+ this will require configuring your driver with the marionette: false option as shown below

本当は Poltergeist のようなヘッドレスブラウザの方が良さげですが、それそれでハマりそうだったので一旦仕事でも実績のある構成にしました。

JS単体のテスト

対象のコミット

正直、テストのライブラリだけでも色々あって何が良いとか全然わからないのですが、過去ちょっと触ったことがあって今も流行ってるっぽい enzyme で書きました。 github.com JSDOMを使ったテストのセットアップはほぼ以下を参考にしています。 github.com

正直、ESEのテストがあればJS単体のテストってそこまでいらない気もするのですが、どうなんですかね。オートコンプリートとか割と複雑なコンポーネントを自分で書いた場合には確かに欲しい気もしますけど…フルSPAとか書いたりするとコンポーネント毎のテストが欲しくなったりするのだろうか。


サンプルとしてはかなりシンプルなので(Redux公式のカウンターアプリそのまま)、もうちょっと色々肉付けしたい感ある。 仕事で使った時便利だったRedux Formとかそういったライブラリも混ぜて、もうちょいリアルなアプリケーションにしていこうかな。