Vuexのアプリケーションをスナップショットテストする #v_kansai / Snapshot testing for Vuex application

v-kansai Vue.js/Nuxt.js meetup #3でスナップショットテストに関する発表をしました。
https://vuekansai.connpass.com/event/114795/

発表中に出てくるvuex-snapshot-test: https://www.npmjs.com/package/vuex-snapshot-test
参考にしたreducer-tester: https://www.npmjs.com/package/reducer-tester

Transcript

1. Vuex のアプリケー ションを スナップショットテストする #v_kansai Vue.js/Nuxt Meetup #3 Masashi Hirano / @shisama
3. Agenda コンポー ネントのスナップショットテスト action/mutation のスナップショットテスト
4. ユニットテスト書いていますか？ 4
5. 例えば、+1、-1、x2 するカウンター アプリ 5
6. コンポー ネントのコー ド <template> <div id="app"> Count: {{ $store.state.count }}. <button @click="increment">+</button> <button @click="decrement">-</button> <button @click="multiply(2)">2x</button> </div> </template> <script lang="ts"> import Vue from "vue"; import { mapActions } from "vuex"; export default Vue.extend({ methods: { ...mapActions(["increment", "decrement", "multiply"]) } }); </script> 6
7. コンポー ネントのテスト レンダリングした結果をテストしたい DOM を一つ一つ検証するのは大変 テストコー ドを見てもどこの部分のテストかわかりづらい 7
8. スナップショットテストを使う 8
9. スナップショットテストのコー ド Jest や@vue/test-utils で使うことができる test("should render", () => { const wrapper = shallowMount(Counter, { store, localVue }); expect(wrapper).toMatchSnapshot(); }); 9
10. テスト実行後 __snapshots__ というディレクトリの中にスナップショットが生成され る 10
11. スナップショットの中身 テスト用にレンダリングした結果がスナップショットに書かれている // __snapshots__/Counter.spc.ts.snap exports[`Counter.vue should render 1`] = ` <div id="app"> Count: 0. <button>+</button> <button>-</button> <button>2x</button></div> `; 11
12. もしコンポー ネントに変更があった場合 <template> <div id="app"> Count: {{ $store.state.count }}. - <button @click="increment">+</button> - <button @click="decrement">-</button> + <button @click="increment">+1</button> + <button @click="decrement">-1</button> <button @click="multiply(2)">2x</button> </div> </template> 12
13. テストコー ドは修正が不要 テスト実行したレンダリング結果を前述のスナップショットと比較 差分があった場合はエラー になる 13
14. スナップショットの更新 スナップショットの比較の差分が意図したものだったとき -u オプションを付けて実行するとスナップショットを更新 14
15. レビュー も簡単 変更内容がわかりやすい！ 15
16. スナップショットテストの良いところ UI のテスト結果がわかりやすい テストコー ドを簡潔に書ける リグレッションテストが可能 コー ドが変わってもテストコー ドの修正は不要 変更内容がわかりやすい 16
17. action/mutation のスナップショットテスト 17
18. action/mutation のスナップショットテスト action やmutation の実行結果をテストしたい 実行する前後のstate の中身がわかるようにしたい スナップショットを保存したい テストコー ドは簡潔にしたい 18
20. vuex-snapshot-test 作りました action やmutation の実行結果をテスト state の更新前後のdiff をスナップショット TypeScript をサポー ト 20
21. コー ド & 使いかた import snapshot from "vuex-snapshot-test"; import store from "@/store"; snapshot({ store, // state: 0 dispatches: [dispatch => dispatch("increment")] }); vuex-snapshot-test をimport store を渡す action をdispath する関数を配列で渡す 関数は複数指定可能 21
22. テスト実行結果 action 実行後のstate の更新前後のdiff のスナップショットを生成 exports[`store commit increment 1`] = ` "Snapshot Diff: - Before + After Object { - \\"count\\": 0, + \\"count\\": 1, }" `; 22
23. もしバグがあった場合 +1 しなければいけないけど、 間違って-1 してしまった場合 mutations: { - increment: state => state.count++, + increment: state => state.count--, decrement: state => state.count--, multiply: (state, payload) => state.count = state.count * payload.num }, 23
24. 保存しているスナップショットと比較してエラー 24
25. スナップショットの更新も可能 -u を付けて実行 25
26. 複数の値を持つstate のテスト 特定の値のみが変わっていることがわかりやすい 他の値が変わっていないこともわかる - Before + After Object { \\"name\\": \\"Masashi Hirano\\" - \\"id\\": \\"shisama\\", + \\"id\\": \\"shisama_\\", \\"country\\": \\"Japan\\", \\"city\\": \\"Osaka\\", ... }" 26
27. mutation をcommit することも可能 action をdispatch するだけではない mutation を直接commit するテストも書けます snapshot({ store, commits: [ commit => commit("increment"), commit => commit("decrement"), commit => commit("multiply", { num: 5 }) ] }); 27
28. initial state を指定することも可能 テスト用にstate を指定できる snapshot({ state: { counter: { value: 3 } }, mutations, tests: [ { type: "increment" } ] }); 28
29. お願い vuex-snapshot-test ぜひ使ってみてフィー ドバックください 気に入ったらスター いただけると嬉しいです Issue、PullRequest はいつでも歓迎しています 29
30. まとめ スナップショットテストはメリットが多い コンポー ネント以外でもスナップショットテストは使えます テストを書いていない人もスナップショットテストから書き始めて みてはいかがでしょうか 30
31. 参考資料 スナップショットテスト · Jest どのようにredux のreducer のテストを書くか？ - Qiita Jest を使用した単一ファイルコンポー ネントのテスト | Vue Test Utils 31
32. ご静聴ありがとうございました 32