LoginSignup
3

More than 5 years have passed since last update.

avaのsnapshotが便利だった

Posted at

avaはjavascriptのテストフレームワークです。私は最近mochaから乗り換えて色々と試しています。

JavaScriptのテストフレームワークはAVAが流行り気味らしいので調べてみた - Qiita

avaはドキュメントの日本語訳があります。

ava-docs/ja_JP at master · avajs/ava-docs

しかし情報が古く、本家のREADMEには追いついていません。

本家のREADMEにはsnapshot-testingという項目があったので試してみました。

環境

  • node: v8.9.1
  • ava : 0.25.0

試してみた

1. 登録

snapshotTest.js
test.only('snapshotのtest', (t) => {
  var fn;
  fn = () => {
    return {
      a: 1,
      b: 2
    };
  };
  t.log(fn());
  t.snapshot(fn());
});

簡単なテストコードを書いてみました。決まったObjectを返す関数をsnapshot関数に渡しています。

✔ snapshotTest › snapshotのtest

    ℹ {
        a: 1,
        b: 2,
      }

1 test passed [20:38:08]

動作させた時にsnapshotが存在しなければ登録されます。
testディレクトリに以下のファイルが作成されます。

  • ~/project/test/snapshots/snapshotTest.js.snap
  • ~/project/test/snapshots/snapshotTest.js.md

.snapの方はバイナリ、.mdファイルの方は以下の様な感じ。

snapshotTest.js.md
## snapshotのtest

> Snapshot 1

    {
      a: 1,
      b: 2,
    }

snapshotのtestの1つめのSnapshotが登録されていることが確認できます。

2. テストを失敗させてみる

fn関数の{a: 1}の部分を書き換えて{a: 2}を返すようにしてみます。logはもう必要ないので消しておきます。

snapshotTest.js
test.only('snapshotのtest', (t) => {
  var fn;
  fn = () => {
    return {
      a: 2,
      b: 2
    };
  };
  t.snapshot(fn());
});

結果はこちら。失敗してます。

  Did not match snapshot

  Difference:

    {
  -   a: 2,
  +   a: 1,
      b: 2,
    }

3. snapshotを更新する

コンソールからavaを再起動します。その際に--update-snapshotsオプションを付けます。

> ava --update-snapshots

✔ snapshotTest › snapshotのtest

1 test passed [21:10:55]

通りました。mdファイルを確認してみます。

snapshotTest.js.md
## snapshotのtest

> Snapshot 1

    {
      a: 2,
      b: 2,
    }

ちゃんと更新されています。

まとめ

テスト駆動開発は最初にテストを書いてから関数を実装します。しかし大きなオブジェクトを返す関数などは先に実装させてからテストを書くことが多々あります。(あるよね?)

その場合は返り値をコピペしてequalしてるかをテストコードに書くのですが結構手間だしコードも助長になりがちです。

テストに大事なのは関数の返り値が変わらない事を保証することなので、snapshotで実現するのは便利だなーと思いました。活用しようと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3