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

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

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

February 28, 2019
Tweet

Transcript

  1. 2.
  2. 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
  3. 9.

    スナップショットテストのコー ド Jest や@vue/test-utils で使うことができる test("should render", () => {

    const wrapper = shallowMount(Counter, { store, localVue }); expect(wrapper).toMatchSnapshot(); }); 9
  4. 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
  5. 19.

    19

  6. 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
  7. 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
  8. 26.

    複数の値を持つstate のテスト 特定の値のみが変わっていることがわかりやすい 他の値が変わっていないこともわかる - Before + After Object {

    \\"name\\": \\"Masashi Hirano\\" - \\"id\\": \\"shisama\\", + \\"id\\": \\"shisama_\\", \\"country\\": \\"Japan\\", \\"city\\": \\"Osaka\\", ... }" 26
  9. 27.

    mutation をcommit することも可能 action をdispatch するだけではない mutation を直接commit するテストも書けます snapshot({

    store, commits: [ commit => commit("increment"), commit => commit("decrement"), commit => commit("multiply", { num: 5 }) ] }); 27
  10. 31.

    参考資料 スナップショットテスト · Jest どのようにredux のreducer のテストを書くか? - Qiita Jest

    を使用した単一ファイルコンポー ネントのテスト | Vue Test Utils 31