Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Masashi Hirano

February 28, 2019
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

Transcript

  1. Vuex
    のアプリケー
    ションを
    スナップショットテストする
    #v_kansai Vue.js/Nuxt Meetup #3
    Masashi Hirano / @shisama

    View full-size slide

  2. Agenda
    コンポー
    ネントのスナップショットテスト
    action/mutation
    のスナップショットテスト

    View full-size slide

  3. ユニットテスト書いていますか?
    4

    View full-size slide

  4. 例えば、+1、-1、x2
    するカウンター
    アプリ
    5

    View full-size slide

  5. コンポー
    ネントのコー



    Count: {{ $store.state.count }}.
    +
    -
    2x


    <br/>import Vue from "vue";<br/>import { mapActions } from "vuex";<br/>export default Vue.extend({<br/>methods: {<br/>...mapActions(["increment", "decrement", "multiply"])<br/>}<br/>});<br/> 6

    View full-size slide

  6. コンポー
    ネントのテスト
    レンダリングした結果をテストしたい
    DOM
    を一つ一つ検証するのは大変
    テストコー
    ドを見てもどこの部分のテストかわかりづらい
    7

    View full-size slide

  7. スナップショットテストを使う
    8

    View full-size slide

  8. スナップショットテストのコー

    Jest
    や@vue/test-utils
    で使うことができる
    test("should render", () => {
    const wrapper = shallowMount(Counter, { store, localVue });
    expect(wrapper).toMatchSnapshot();
    });
    9

    View full-size slide

  9. テスト実行後
    __snapshots__
    というディレクトリの中にスナップショットが生成され

    10

    View full-size slide

  10. スナップショットの中身
    テスト用にレンダリングした結果がスナップショットに書かれている
    // __snapshots__/Counter.spc.ts.snap
    exports[`Counter.vue should render 1`] = `

    Count: 0.
    + - 2x
    `;
    11

    View full-size slide

  11. もしコンポー
    ネントに変更があった場合


    Count: {{ $store.state.count }}.
    - +
    - -
    + +1
    + -1
    2x


    12

    View full-size slide

  12. テストコー
    ドは修正が不要
    テスト実行したレンダリング結果を前述のスナップショットと比較
    差分があった場合はエラー
    になる
    13

    View full-size slide

  13. スナップショットの更新
    スナップショットの比較の差分が意図したものだったとき
    -u
    オプションを付けて実行するとスナップショットを更新
    14

    View full-size slide

  14. レビュー
    も簡単
    変更内容がわかりやすい!
    15

    View full-size slide

  15. スナップショットテストの良いところ
    UI
    のテスト結果がわかりやすい
    テストコー
    ドを簡潔に書ける
    リグレッションテストが可能
    コー
    ドが変わってもテストコー
    ドの修正は不要
    変更内容がわかりやすい
    16

    View full-size slide

  16. action/mutation
    のスナップショットテスト
    17

    View full-size slide

  17. action/mutation
    のスナップショットテスト
    action
    やmutation
    の実行結果をテストしたい
    実行する前後のstate
    の中身がわかるようにしたい
    スナップショットを保存したい
    テストコー
    ドは簡潔にしたい
    18

    View full-size slide

  18. vuex-snapshot-test
    作りました
    action
    やmutation
    の実行結果をテスト
    state
    の更新前後のdiff
    をスナップショット
    TypeScript
    をサポー

    20

    View full-size slide

  19. コー
    ド &
    使いかた
    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

    View full-size slide

  20. テスト実行結果
    action
    実行後のstate
    の更新前後のdiff
    のスナップショットを生成
    exports[`store commit increment 1`] = `
    "Snapshot Diff:
    - Before
    + After
    Object {
    - \\"count\\": 0,
    + \\"count\\": 1,
    }"
    `;
    22

    View full-size slide

  21. もしバグがあった場合
    +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

    View full-size slide

  22. 保存しているスナップショットと比較してエラー
    24

    View full-size slide

  23. スナップショットの更新も可能
    -u
    を付けて実行
    25

    View full-size slide

  24. 複数の値を持つstate
    のテスト
    特定の値のみが変わっていることがわかりやすい
    他の値が変わっていないこともわかる
    - Before
    + After
    Object {
    \\"name\\": \\"Masashi Hirano\\"
    - \\"id\\": \\"shisama\\",
    + \\"id\\": \\"shisama_\\",
    \\"country\\": \\"Japan\\",
    \\"city\\": \\"Osaka\\",
    ...
    }"
    26

    View full-size slide

  25. mutation
    をcommit
    することも可能
    action
    をdispatch
    するだけではない
    mutation
    を直接commit
    するテストも書けます
    snapshot({
    store,
    commits: [
    commit => commit("increment"),
    commit => commit("decrement"),
    commit => commit("multiply", { num: 5 })
    ]
    });
    27

    View full-size slide

  26. initial state
    を指定することも可能
    テスト用にstate
    を指定できる
    snapshot({
    state: {
    counter: {
    value: 3
    }
    },
    mutations,
    tests: [
    {
    type: "increment"
    }
    ]
    });
    28

    View full-size slide

  27. お願い
    vuex-snapshot-test
    ぜひ使ってみてフィー
    ドバックください
    気に入ったらスター
    いただけると嬉しいです
    Issue、PullRequest
    はいつでも歓迎しています
    29

    View full-size slide

  28. まとめ
    スナップショットテストはメリットが多い
    コンポー
    ネント以外でもスナップショットテストは使えます
    テストを書いていない人もスナップショットテストから書き始めて
    みてはいかがでしょうか
    30

    View full-size slide

  29. 参考資料
    スナップショットテスト · Jest
    どのようにredux
    のreducer
    のテストを書くか? - Qiita
    Jest
    を使用した単一ファイルコンポー
    ネントのテスト | Vue Test
    Utils
    31

    View full-size slide

  30. ご静聴ありがとうございました
    32

    View full-size slide