Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ユニットテスト書いていますか？ 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

コンポー ネントのコー ド
Count: {{ $store.state.count }}. + - 2x
import Vue from "vue"; import { mapActions } from "vuex"; export default Vue.extend({ methods: { ...mapActions(["increment", "decrement", "multiply"]) } }); 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

スナップショットテストのコー ド Jest や@vue/test-utils で使うことができる test("should render", () => { const wrapper = shallowMount(Counter, { store, localVue }); expect(wrapper).toMatchSnapshot(); }); 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

もしコンポー ネントに変更があった場合
Count: {{ $store.state.count }}. - + - - + +1 + -1 2x
12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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