こんにちは、ヒューマンクレストのマイです。
現在自社サービス開発でReactというJavaScript(JS)ライブラリを使っております。
開発ではテストが欠かせないので、テストを意識しながら、開発を進めています。今回はReactのテストについての話をしたいと思います。
Reactとは
SPA(Single Page Application)
Reactを紹介する前に、 SPAについて軽く説明したいと思います。近年、GmailやFacebookなど、ネイティブアプリケーション並みの機能を持っているサイトが増えてきました。その背景には、SPA(Single Page Application)と呼ばれるアーキテクチャがあり、またReactやAngularなどのライブラリ/フレームワークのサポートにより、Web開発者にとってSPA開発がより手軽で身近になってきています。
SPAとは単一のページでコンテンツの切り替えを行うWeb アプリケーションのことです。従来のWeb ページでは遷移時にページ全体が書き換わりますが、SPAでは 変更された部分だけ反映される仕組みになっています。実際には、JavaScript を用いてページ内の HTML の一部を差し替えてコンテンツを切り替えています。
それにより下記の２つのメリットが挙げられます。
まずは通常のWeb ページでは実現できないユーザー体験(UX)を実現できることです。ブラウザの挙動に縛られないことから、より幅広い UI を実現することができるため、UXを向上させることができます。Facebookを使っている人はチャットウィンドウを表示しながら、NewsFeedを眺めたり、Statusを更新したりすると思いますが、これもSPAで実装された機能です。
チャットウィンドウを開いても画面遷移自体はしないため、他のところでブラウジングできます。
次に高速なページ遷移を実現できることです。上記にも記載していますが、SPAでは遷移先のページを構成するために必要最小限のデータのみを取得し、ブラウザでHTMLを構築するため、従来のWebページと比較してページ遷移が高速になります。
SPAの代表的なものはReact.js, AngularJS, Vue.jsがあります。
React
ReactはUIの構成部品を作るためのJavaScriptライブラリでFacebookが開発したものです。Reactはメモリー上の変更前後のDOMを持ち、変更があった部分を検出し、本当に変更が必要な部分のみを画面に反映します。
それを実現するために、Virtual DOMというものを採用しています。
従来、状態などの情報が変化した場合は、ふたたび情報を受け取りHTMLを再作成してブラウザに再描画をおこないます。Reactでは情報が受け渡されてもいきなり描画は行わずVirtual DOMとよばれる構造体を作成してからVirtual DOMの内容を元にHTMLを作成してブラウザに描画します。
そして情報が変化した場合は、まずVirtual DOMに反映を行なってから、Virtual DOMと現在のHTMLの内容の比較を行い、差分のみをHTMLに反映させてブラウザの再描画をおこないます。
SPAのメリットの他に、Reactのもう一つの魅力はコンポーネント指向、JSの中にHTMLを書くJSXを採用するため、メンテナンス性が高いコードが書けることです。
Reactのテスト
なぜテストするか
それはソフトウェア開発ですから、テストは要りますよね。おそらくここで反論する方はいないでしょう。
特にReactの場合はバージョンアップにより仕様が変わることがありますので、その時、自信を持ってリファクタリングできるように、テストを書いておきましょう。
何をテストするのか
renderメソッドのテスト
renderメソッドはReactコンポーネントを作成するにあたって唯一実装が業務付けられているメソッドです。renderメソッドをテストする時、下記の観点に基づいてテストを行うと良いでしょう。
・必ずレンダリングされること
最低限、コンポーネントがエラーを出さずに、確実にレンダリングされるようにします。JSXの構文エラーがなく、全ての変数が定義されていることなどを確認します。
これは一見意味があまりないように見えますが、非常に必要なところです。ReactはAPIを呼び出し、結果を表示するパターンがよくあります。何らかの原因でAPIから返してきたレスポンスが期待通りではない時、エラーがよく起きます。たとえレスポンスが正常でない場合でも、エラーにならず、何らかのメッセージをレンダリングするのを意識しなければなりません。
・アウトプットをテストする
上記の”レンダリングする”というステップは、”正しいものをレンダリングする”ということです。ReactはUIを注視したものなので、設定したものがきちんとレンダリングされるか、確認するのは必須ですね。
・条件を網羅する
条件付きのところは条件を網羅する必要があります。例えば、ユーザーモードとゲストモードがあるならば、しっかりテストしなければなりません。条件付きでレンダリングするところは特に注意が必要です。
イベントのシミュレーション
多くのReactコンポーネントはブラウザで発生するイベントに反応します。onClick、onChangeなど、イベントのトリガーがあるElementの場合、そのイベントが期待通りに働くか確認しなければなりません。Enzymeというライブラリを使えば、指定されたオブジェクトで任意のイベントを発火できます。
境界値のテスト
APIから戻っているレスポンスのデータが空、上限を超えるなどの場合を想定して、実装しなければなりません。また、表示の都合で1ページにて25項目で切り捨てなければならない場合などもありえます。テストはいかなる場合でも想定した動きを振舞うことを確認しなければなりません。