JavaScript
flow
S2S
babel
redux

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

More than 1 year has passed since last update.

reducer-test-2.gif


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

flow環境で型によって返るStateが担保されていたとしても、依然としてreducerのテストは重要です。

簡単な例をあげると、INCREMENTでcountが+1されるロジックがあるとき、number型であると保証されていたとしても、+1されているのか-1されているのか、はたまた+100000されているのかについては保証されていないからです。

そのロジックを担保するのがテストの役割です。


reducerのテストの書き方

flow環境とそれ以外でテストの書き方が違います。

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

トラディショナルな書き方でもいいですが、この方が補完も効くのでオススメします。

スクリーンショット 2017-10-02 21.06.59.png

この書き方は、redux公式

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

https://github.com/reactjs/redux/blob/c9ad6a40fe501919d359b910ea7c7f34532e11d9/examples/todos-flow/src/__tests__/reducers/todos.test.js


テストケースの自動生成

そろそろ冒頭の動画の説明をします。

はっきり言って、テストを書くのは面倒です。

そして、テストを書き忘れる可能性についても考える必要があります。

だからこそ、コードを書いた瞬間にテストがそこにあるのがベストです。

そして、これは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の書き方含めて参考にしてください。とはいえ、オプションなんてほとんどないんですが。

https://github.com/akameco/s2s-examples/tree/master/shopping-cart

reducer-test-2.gif

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

https://github.com/akameco/s2s-plugins


まとめ

flow環境におけるreducerのテスト、s2sによるreducerのテストケースの自動記述について書きました。

上記の通り、あなたテストを書く必要はありません。そこにテストはあります

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


変更履歴


v0.2

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

reducer-test.gif