2017年10月27日の発表資料です。

What's hot

Viewers also liked

Similar to JustTechTalk#10 React開発における自動テスト実践

More from JustSystems Corporation

JustTechTalk#10 React開発における自動テスト実践

• 1.
  2017/10/27JustTechTalk#10株式会社ジャストシステム 田中優太
• 2.
   自己紹介 薬学出身の新卒２年目エンジニアです。JUST DWHのフロントエンド担当 JUST DWH 医療用データウェアハウス 院内の各システムに散らばったデータを取り込んで一元化 システムをまたがったデータ抽出・分析、全文検索 フロントエンドにReact-Reduxを採用
• 3.
   E2Eテスト(今回は説明を省略)実際のユーザー操作で正しく動くことシナリオテスト数個 ユニットテスト各モジュールが正しく動くことNode.js上のテスト処理系が違うが実行が速いため開発中に使うブラウザ上でのテスト実行 ユニットテストをブラウザ環境でも動かす ブラウザ間のJSエンジンの違いを確認 テスト以外のバグ検知ソースコード静的解析（ESLint）
• 4.
  テストランナーMocha：Node上での実行Karma：ブラウザ環境での実行モック・スタブSinon.js：コールバック関数のテストなどEnzyme：React.ComponentのテストアサーションPower Assert：APIがシンプルなアサーション
• 5.
  メンテコストを考慮して書く/書かない特にViewは流動的 Viewはユニットテスト書かないという方針ではない共通部品はしっかり書くテストしやすい設計は常に意識テストを書かない判断をした場所も開発者が不安な点をテストに書く
• 6.
  設計と性能を両立できる（Virtual DOM, 永続データ構造、メモ化）宣言的プログラミングで可読性が高い（対義語は手続き的、命令型）ライブラリの設計レベルで"テストしやすさ"が考慮されているここを次から詳しく見ていきます。React採用事例増加中 Facebook、Instragram、Twitter、Qiita、Trello、Bitbucket、My VisualStudio・・・ React-Redux、フロント以外にも進出中 スマホアプリ（React-Native） デスクトップアプリ（React-Native On Windows、Electron + React-Redux）
• 7.
  ※これ以降の説明では、わかりやすさを優先した結果、不正確な記述があります。ComponentMiddlewareActionCreatorActionStateReducer
• 8.
  ComponentMiddlewareActionCreatorActionStateReducerModelViewController
• 9.
  ブラウザ上のHTMLComponentMiddlewareActionCreatorActionStateReducer
• 10.
  ComponentMiddlewareActionCreatorActionStateReducerIn：Stateの一部Out：仮想HTML要素 純粋関数とは・・ 引数が同じなら返り値が常に同じ副作用がない 純粋関数のテスト 関数のIN/OUTのセットが正しいかどうか をテストすればいいだけIn:現在のStateActionOut:新しいState In：生成に必要な情報Out：Action(JSON)JSONJSON副作用有※コンポーネントを純粋関数というのは少し乱暴かも
• 11.
  状態を"State"に、副作用を"Middleware"に隔離することで、他の部分の純粋性を実現ComponentMiddlewareActionCreatorActionStateReducer アプリ全体の"状態"を保持する一つのJSONオブジェクト 基本、読み取り専用。Reducerによってのみ更新される。 イベント処理全体の流れを記述する 副作用を伴う処理 Reducerでできない処理 API処理、非同期処理、Actionの連鎖など
• 12.
  ComponentMiddlewareActionCreatorActionStateReducer Stateを更新する関数 現在のStateとActionを受け取って新しいStateを返すアプリのロジックはStateに対する操作ととらえて実装 テスト 引数と結果の組が正しい → アプリのロジックが正しいIn:現在のStateActionOut:新しいStateIn：生成に必要な情報Out：Action(JSON)イベントを表現するJSON動作の種類(type)と動作に必要な情報を持つ
• 13.
  Actionとして、以下のようなオブジェクトが渡ってくる{type: 'ADD_TASK',name: '掃除',dueDate:'2017/10/27',}
• 15.
  ブラウザ上のHTML Stateの一部を受け取って、HTMLを描画する。 ステートレスProps（引数）が同じなら、出力もおなじViewクラスをメンバ関数を順番通りに呼ばないとうごかない・・みたいなことがない Propsを使って、出力するHTMLを定義するように記述 テスト 引数と結果の組が正しい → アプリのViewが正しく定義されているComponentMiddlewareActionCreatorActionStateReducerIn：Stateの一部Out：仮想HTML要素
• 18.
   ユニットテストを書く優先度Reducer アプリのロジックを記述しているため優先度高ComponentViewは変更頻度が高いため優先度中 但し、共通UIパーツは優先度高Middleware 重要だがコストが高いため優先度中ActionCreator JSONを生成するだけなので意味が薄いため優先度低
• 19.
  【効果】 アプリのロジックとViewをユニットテストできている。 開発プロセスの効率化に大きく貢献テストしやすい設計は、可読性にも貢献 静的解析（ESLint）により変数名のtypoによるバグなどは未然に防がれている。【課題】 型導入など、テスト以外でのバグ検知もより充実させる Middlewareにもテストしやすい記述を実現するライブラリを導入する（redux-sagaなど）
• 20.
  テスタビリティの面からReact-Reduxを紹介しました。自動テストの実行環境整備も大切ですがテストを考慮した設計も大切