Modern Web App LT! freee x WACUL at 2016/6/10

1. Modern Web App LT! freee x WACUL
Reactテストに役立つ実装の工夫
2016/6/10
freee tosa

2. Who am I
- 銀行システム子会社を経て、
2015/10 に freee に入社
- 銀行時代は、flexでのUI開発や、
ビッグデータ（asakusa, spark）等々
- freeeでは、どっぷりReact.js
- flexがデファクトになる未来が来ると本気
で信じていた時代が俺にもあった
- JavaScriptに静的型チェック機構さえあれ
ばと１日に５回はボヤいている
@teppei_tosa

3. freeeでの初仕事

4. Reactのテストて面白い

5. DOMのテストができる
renderer.render(
<Component value=”hoge” />
);
const expected = (
<div>hoge</div>
);
expect(renderer.getRenderOutput())
.toEqualJSX(expected);

6. 子コンポーネントのことを
気にしないでいい
renderer.render(
<Parent value=”hoge” />
);
const expected = (
<div>
<Child value=”hoge” />
</div>
);
expect(renderer.getRenderOutput())
.toEqualJSX(expected);

7. サーバ通信する（flux連携する）
コンポーネントのテストは
どうする？

8. サーバ通信機能を切り離そう
サーバ通信だけを切り出した最上位層
フロントエンドロジックは原則持たない
フロントコンポーネントのメイン層
この層以下をテスト対象とする

9. 注意：無駄なrenderが走る可能性
このコンポーネントでだけ必要なサーバ通信
だったのに…
全てのコンポーネントにpropsが伝播され
て、不要なrenderが走り性能劣化の可能性
が出る

10. そんな時は shouldComponentUpdate
shouldComponentUpdateで
propsの変化が無いことを
チェックして不要なprops伝播を
断ち切る

11. これでpropsベースのDOMのテストはOK

12. イベントドリブンで変化するstateベースの
テストはどうする？

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. するとこんなテストが書ける
describe('otherFlg', () => {
it('test', () => {
expect(component.otherFlg({
somethingFlg: true
})
.toEqual(true);
});
});

15. 想定ツッコミ
「 jest 使えば flux の store の mock 用意できるよ？」
- めんどくさい
- 環境面の整備、モックデータの準備などの負荷を考えると、費用対効果悪い
- コンポーネント全体を副作用なくすることで、設計・実装もわかりやすくなりテスト
以上のメリットがある
「stateの変更を伴うテストは renderIntoDocument で生成したコンポーネントに対
して、 ReactTestUtils.Simulate すればテストを意識した実装をしなくていいよ
ね？」
- めんどくさい
- ユーザ操作を想像して色々なstate値の変更等を想定するテストを組むのは、本
当に大変で、費用対効果悪い
- そんなことするなら、副作用のない実装にする方が何倍も効果ある、と思う

16. まとめ
- ReactテストはDOM構成のテストができて楽し
い
- サーバ通信処理や、イベント受け取り処理は切
り離しし、メインの処理を副作用無い形にしよう
- フロントもテストしよう

17. どっぷり
React
やりたかったら

18. スモールビジネスに携わる方が
より創造的な活動にフォーカスできるように