別にしんどくないブログ

技術のことや読書メモを書いています

Vuexをスナップショットテストするパッケージを公開しました

www.npmjs.com

表題の通り、新しく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さんありがとうございます。

www.npmjs.com

Reduxを使った開発をしているときにreducer-testerを使っていて体験として良かったので、Vuex用を作ってみました。

予告

これをネタに今月末のv-kansaiにLT登壇します。 元気があればQiitaにも技術詳細など書きたいと思います。

vuekansai.connpass.com

フィードバックはどんどん募集しています!
ご意見、要望はIssueTwitterまでお願いいたします。