開発者ドキュメント

Introduction to Snapshot Testing With Jest

Jestのの主要な機能の1つは、スナップショットテストです。 迅速で正確なテストを作成するための非常に便利なツール。

スナップショットの作成

変更を加える関数があるとしましょう。

// changeMaker.js
export default function changeMaker(value) {
  let pennies = value * 100;
  const quarters = Math.floor(pennies / 25);
  pennies -= quarters * 25;
  const dimes = Math.floor(pennies / 10);
  pennies -= dimes * 10;
  const nickels = Math.floor(pennies / 5);
  pennies -= nickels * 5;
  return {
    quarters,
    dimes,
    nickels,
    pennies,
  };
}

そして、あなたはそれをテストしたいと思っています。なぜなら、あなたは優れたプログラマーであり、テストされていないコードをプッシュしたくないからです。 あなたはそれを次のように書くことができます:

import changeMaker from './changeMaker';

it('gives proper change.', () => {
  expect(changeMaker(1.99)).toEqual({
    quarters: 7,
    dimes: 2,
    nickels: 0,
    pennies: 4,
  });
  expect(changeMaker(2.75)).toEqual({
    quarters: 11,
    dimes: 0,
    nickels: 0,
    pennies: 0,
  });
  expect(changeMaker(0.24)).toEqual({
    quarters: 0,
    dimes: 2,
    nickels: 0,
    pennies: 4,
  });
  // And so on
});

しかし、それは退屈で、「ニッケル」のつづりを間違え続けます。 代わりに、JestのtoMatchSnapshotマッチャーを使用できます。

import changeMaker from './changeMaker';

it('gives proper change.', () => {
  expect(changeMaker(1.99)).toMatchSnapshot();
  expect(changeMaker(2.75)).toMatchSnapshot();
  expect(changeMaker(0.24)).toMatchSnapshot();
  // And so on
});

テストを初めて実行すると、スナップショットが作成されます。これは、expectに渡されたオブジェクトのシリアル化されたバージョンです。 以降のすべての実行で、expectに指定された値をそのスナップショットと比較します。 等しい場合、期待値は合格し、そうでない場合、テストは失敗します。

Gitを使用している場合は、必ずスナップショットをチェックインしてください。 これらは、テストファイルと同じディレクトリの__snapshots__フォルダにあります。

スナップショットの更新

スナップショットテストは予期しない変更をキャッチしますが、それらの変更の一部が必要な場合はどうでしょうか。 コインを追加したい場合のように:

export default function changeMaker(value) {
  let pennies = value * 100;
  const halfDollars = Math.floor(pennies / 50);
  pennies -= halfDollars * 50;
  const quarters = Math.floor(pennies / 25);
  pennies -= quarters * 25;
  const dimes = Math.floor(pennies / 10);
  pennies -= dimes * 10;
  const nickels = Math.floor(pennies / 5);
  pennies -= nickels * 5;
  return {
    halfDollars,
    quarters,
    dimes,
    nickels,
    pennies,
  };
}

これで、スナップショットテストは失敗します。 幸い、Jestを使用するとこれらのスナップショットを簡単に更新できます。 -uフラグを渡すだけです。

$ yarn run test -- -u

古い、失敗したスナップショットは破棄され、新しいスナップショットがそれらを置き換えます。

モバイルバージョンを終了