Reactテストに役立つ実装の工夫

Reactテストに役立つ実装の工夫

1. 1. Modern Web App LT! freee x WACUL Reactテストに役立つ実装の工夫 2016/6/10 freee tosa
2. 2. Who am I - 銀行システム子会社を経て、 2015/10 に freee に入社 - 銀行時代は、flexでのUI開発や、 ビッグデータ（asakusa, spark）等々 - freeeでは、どっぷりReact.js - flexがデファクトになる未来が来ると本気 で信じていた時代が俺にもあった - JavaScriptに静的型チェック機構さえあれ ばと１日に５回はボヤいている @teppei_tosa
3. 3. freeeでの初仕事
4. 4. Reactのテストて面白い
5. 5. DOMのテストができる renderer.render( <Component value=”hoge” /> ); const expected = ( <div>hoge</div> ); expect(renderer.getRenderOutput()) .toEqualJSX(expected);
6. 6. 子コンポーネントのことを 気にしないでいい renderer.render( <Parent value=”hoge” /> ); const expected = ( <div> <Child value=”hoge” /> </div> ); expect(renderer.getRenderOutput()) .toEqualJSX(expected);
7. 7. サーバ通信する（flux連携する） コンポーネントのテストは どうする？
8. 8. サーバ通信機能を切り離そう サーバ通信だけを切り出した最上位層 フロントエンドロジックは原則持たない フロントコンポーネントのメイン層 この層以下をテスト対象とする
9. 9. 注意：無駄なrenderが走る可能性 このコンポーネントでだけ必要なサーバ通信 だったのに… 全てのコンポーネントにpropsが伝播され て、不要なrenderが走り性能劣化の可能性 が出る
10. 10. そんな時は shouldComponentUpdate shouldComponentUpdateで propsの変化が無いことを チェックして不要なprops伝播を 断ち切る
11. 11. これでpropsベースのDOMのテストはOK
12. 12. イベントドリブンで変化するstateベースの テストはどうする？
13. 13. 副作用の無い形に切り出そう btnClickHandler() { if (this.state.someFlg) { this.setState({ otherFlg: true }); } } btnClickHandler() { this.setState({ otherFlg: this.otherFlg(this.state) }); } otherFlg(state) { return this.state.someFlg ? true : false; }
14. 14. するとこんなテストが書ける describe('otherFlg', () => { it('test', () => { expect(component.otherFlg({ somethingFlg: true }) .toEqual(true); }); });
15. 15. 想定ツッコミ 「 jest 使えば flux の store の mock 用意できるよ？」 - めんどくさい - 環境面の整備、モックデータの準備などの負荷を考えると、費用対効果悪い - コンポーネント全体を副作用なくすることで、設計・実装もわかりやすくなりテスト 以上のメリットがある 「stateの変更を伴うテストは renderIntoDocument で生成したコンポーネントに対 して、 ReactTestUtils.Simulate すればテストを意識した実装をしなくていいよ ね？」 - めんどくさい - ユーザ操作を想像して色々なstate値の変更等を想定するテストを組むのは、本 当に大変で、費用対効果悪い - そんなことするなら、副作用のない実装にする方が何倍も効果ある、と思う
16. 16. まとめ - ReactテストはDOM構成のテストができて楽し い - サーバ通信処理や、イベント受け取り処理は切 り離しし、メインの処理を副作用無い形にしよう - フロントもテストしよう
17. 17. どっぷり React やりたかったら
18. 18. スモールビジネスに携わる方が より創造的な活動にフォーカスできるように