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

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

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

コンポー
ネントのコー
ド

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

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

Count: 0.
+ - 2x
`;
11

View Slide

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

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

12

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

action/mutation
17

View Slide

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

View Slide

19

View Slide

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

View Slide

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

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

View Slide

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

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

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

Masashi Hirano

More Decks by Masashi Hirano

Other Decks in Programming

Featured

Transcript