s2s: reduxにおけるreducerのテスト。あなたがテストを書く必要はないかも知れない #JavaScript

なぜreducerのテストが重要か？

flow環境で型によって返るStateが担保されていたとしても、依然としてreducerのテストは重要です。
簡単な例をあげると、INCREMENTでcountが+1されるロジックがあるとき、number型であると保証されていたとしても、+1されているのか-1されているのか、はたまた+100000されているのかについては保証されていないからです。
そのロジックを担保するのがテストの役割です。

reducerのテストの書き方

flow環境とそれ以外でテストの書き方が違います。
トラディショナルなテストだと{type: ACTION}の形式でテストを書くことが多いと思いますが、flow環境だとActionが型で担保されているためアクションクリエイターをそのまま実行して書きます。
トラディショナルな書き方でもいいですが、この方が補完も効くのでオススメします。

この書き方は、redux公式
のflowのサンプルにある書き方と同じなので、気になる人は確認するとよいと思います。

テストケースの自動生成

そろそろ冒頭の動画の説明をします。
はっきり言って、テストを書くのは面倒です。
そして、テストを書き忘れる可能性についても考える必要があります。
だからこそ、コードを書いた瞬間にテストがそこにあるのがベストです。
そして、これはs2sによって簡単に実現できます。
s2sについては以下の記事を読んでください。
Source to Sourceという概念とその使い方をまとめています。

さよならボイラープレート。s2sによる高速reduxアプリケーション構築

GitHubはこちらです。

akameco/s2s
Source to Source

上記の記事を読んだ前提を話を進めると、babel-plugin-s2s-reducer-test-caseをs2sに加えることによって動画のようにテストケースを生成できます。
s2s.config.jsに以下を加えてください。

    {
      test: /containers\/.+reducer.js/,
      input: 'reducer.test.js',
      output: 'reducer.test.js',
      plugin: ['s2s-reducer-test-case'],
    },

このプラグインは、switch/caseのアクションを取得し、test('handle ACTION_NAME')がすでにあれば生成をスキップし、なければ以下の形式のテストケースを生成します。INITIAL_STATEはreducerにinitialStateを書かれていればそれをINITIAL_STATEとして扱います。(v0.3から)

test('handle ACTION_NAME', () => {
  expect(actions.ACTION_CREATER()).toEqual(INITIAL_STATE);
});

これによって、人間が書くのは、toEqualに与えるオブジェクトと引数だけになります。
これを使ったサンプルは以下にあるので、s2s.config.jsの書き方含めて参考にしてください。とはいえ、オプションなんてほとんどないんですが。

また、全てのs2sのプラグインはlernaとyarn workspaceによるモノレポで運用しています。イシューやプルリクお待ちしています。

まとめ

flow環境におけるreducerのテスト、s2sによるreducerのテストケースの自動記述について書きました。
上記の通り、あなたがテストを書く必要はありません。そこにテストはあります。

なにかあれば、コメント欄、またはtwitterで議論しましょう。

s2sを使ったreducerのテストケースの生成。コードを書くとき、そこにテストはある https://t.co/FISlpWrpOe pic.twitter.com/8CNWHhOQwL
— 無職.js (@akameco) October 2, 2017

reduxのreducerのテスト完全に思考停止しながらできるようになってきたhttps://t.co/9f7P6LmW2a pic.twitter.com/tmuWXojY5C
— 無職.js (@akameco) October 3, 2017

変更履歴

v0.2

initialStateを使わずnullを挿入する。v0.3でもinitialStateがなければ、nullを挿入する。