Reactにテストを導入したい

最近、React+Redux環境下での開発がメインとなっているが、
まともにテスト出来ていない(特にReactコンポーネント側)と感じている。

テストコードを書くこと自体が地味に面倒というのもあったが、
テストフレームワークも割と氾濫しており、結局どれ使えばいいの？状態にあることも確か。

ゴール

さくっとテストの書き方を把握する。

簡単に導入できそうなツールを選定しよう

割と簡単に導入出来そうかな。と思ったので以下で進める。
真面目に選定したというか、Reactのテストという点でまずenzymeが挙がり、割と相乗りが楽そうなavaが挙がってきた感じ。

• ava
  テストランナー兼アサーションライブラリ。
  あれこれインストールしなくても良い点が気に入っている。
• enzyme
  Reactコンポーネントを仮想的にレンダリングしているだけ？
  アサーション自体は他のライブラリに委譲する感じか。

有名どころとは割と簡単に連携できると思う。
Enzyme # Running Enzyme Tests

導入

yarn install ava enzyme enzyme-adapter-react-16 eact-test-renderer sinon -D

コンポーネントを書こう

テスト対象とするのは、
ボタンクリックでカウントアップ・ダウンを行う簡単なコンポーネントとした。

テストを書こう

shallow()によるレンダリングでは子コンポーネントはレンダリングされないため、自身のコンポーネントのみに集中することができる。
(今回の実装に子コンポーネントも何もないが)

超雑にまとめる

avaとenzymeで割と簡単にReactコンポーネントのテストが書けるようだ。

今回は特にmockやspyは使わず、クリックをシミュレートしてstateの値を検証したが、
spyオブジェクトを仕込むことで、function実行のカウントをとることができるので、気がついたらイベントの嵐でイベント発火しまくりという事象も未然に防げるのかなと魅力を感じた。

とは言えだ。
テストが一切ない環境に一人でテストを書いていくのは苦痛なので、みんなちゃんとテスト書いて！！