表題の通り、新しくnpmにVuexをスナップショットテストするパッケージを公開しました。
何するもの?
Vuexのstoreに対してactionsやmutationsの発火前後のstateの状態のdiffをとったsnapshotファイルが生成され、スナップショットテストを行うことができます。
READMEに書いているサンプルコードを載せておきます。
テストに馴染みのある方はなんとなく雰囲気を掴んでもらえると思います。
import snapshot from "vuex-snapshot-test"; import store from "@/store"; snapshot({ store, // state: 1 dispatches: [dispatch => dispatch("increment")] });
上記のテストコードを実行すると以下のsnapshotファイルが生成されます。
exports[`increment 1`] = ` "Snapshot Diff: - Before + After Object { \\"counter\\": Object { - \\"value\\": 1, + \\"value\\": 2, }, }" `;
まだまだ拙い箇所が散見されると思いますが、とりあえず想定通りの動作をするようになったので公開しました。 TypeScriptはサポートしています。
Thanks!
少しVuex用に工夫をしたけども、アイデアはReduxのreducerをテストするreducer-testerから頂いています。 @akamecoさんありがとうございます。
Reduxを使った開発をしているときにreducer-testerを使っていて体験として良かったので、Vuex用を作ってみました。
予告
これをネタに今月末のv-kansaiにLT登壇します。 元気があればQiitaにも技術詳細など書きたいと思います。