JestでReact.jsアプリケーションのテスト

Jestとは

facebookがgithub.comに出している
テスティングフレームワーク。

JestでReact.jsアプリケーションのテストを書く

...と書くとざっくりしているが、
Jestのサイトで、tutoria/reactに、React.jsアプリケーションでの
Jestを使ったサンプルが載っていた。

コードもgithub.com上に上がっている。

githubリポジトリに、コードをそのまま載せてみた。

Jestを使うためのセットアップ

前提条件

• node.jsのバージョンは2014年12月現在stableのv0.10.xxであること

という条件がある。

React.addons.TestUtils

Jest単体はReact.js向けのテストフレームワークとしては書かれておらず、
VirtualDOMを使ったり、clickイベントのシミュレートをしたい場合はReact.jsのTestUtilsを使っている。

サンプルを動かしてみる

Jestのドキュメントで、React.jsを使ったサンプルがあるので、環境を構築してみる。

jest-cliのインストール

jest-cliをインストールする。

> npm install jest-cli

サンプルのテスト

サンプルコードのルート・ディレクトリに移動し、
jestコマンドを実行する。__tests__ディレクトリを探索し、
テストを実行する。

> jest

テストが実行されている。

サンプルテストを動かしてみて

jstransformにてjsへの変換が必要なので、
preprocessor.jsを用意する必要があるが、
componentsの構築・changeイベント後のTextComponent状態の
変更についてテストできた。

これは良いと思う。

VirtualDOMのテストの先

facebookが敷いてるレールに乗っかることで、
新しいWebアプリケーション開発に対する刺激を受けることができている。
VirtualDOM(この場合はReactJS Componentだけど...)のテストを行えるようにして、
DOM構築の手前でのテストがサーバ側で行えるようになれば
多画面で構成されているWebアプリケーション開発はやりやすくなるのかなと思ったりもした。

Selenium Web Driverを使ったエンドユーザテストをしなければならないとしても...