Testing Asynchronous Code

JavaScriptではコードを非同期に実行することがよくあります。非同期的に動作するコードがある場合、Jestはテスト対象のコードがいつ完了したかを別のテストに進む前に知る必要があります。 Jestはこのことを処理する方法をいくつか持っています。

コールバック

最も一般的な非同期処理のパターンはコールバックです。

例えばデータを取得してcallback(data)を呼び出すfetchData(callback)関数があるとしましょう。返ってくるデータが単に'peanut butter'という文字列であることをテストしたいとします。

By default, Jest tests complete once they reach the end of their execution. That means this test will not work as intended:

// Don't do this!
test('the data is peanut butter', () => {
  function callback(data) {
    expect(data).toBe('peanut butter');
  }

  fetchData(callback);
});

問題はfetchDataが完了した時点でテストも完了してしまい、コールバックが呼ばれないことです。

これを修正する別の形のtest があります。テストを空の引数の関数の中に記述するのではなく、 doneという１つの引数を利用します。 Jestはテストを終了する前に、done コールバックが呼ばれるまで待ちます。

test('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    done();
  }

  fetchData(callback);
});

done() が呼ばれない場合、お望み通りにテストが失敗します。

Promises

promiseを利用するコードでは、非同期処理のテストを簡単に扱える方法があります。テストからpromiseを返すとJestはpromiseが解決されるまで待機します。 promiseがrejectされた場合は、テストは自動的に失敗します。

For example, let's say that fetchData, instead of using a callback, returns a promise that is supposed to resolve to the string 'peanut butter'. We could test it with:

test('the data is peanut butter', () => {
  return fetchData().then(data => {
    expect(data).toBe('peanut butter');
  });
});

promiseを返していることを確認してください。- もしこの return 文を省略した場合、あなたのテストは、fetchDataがresolveされpromiseが返ってくる前に実行され、then() 内のコールバックが実行される前に完了してしまいます。

promiseがrejectされることを期待するケースでは .catch メソッドを使用してください。想定した数のアサーションが呼ばれたことを確認するため、expect.assertionsを必ず追加して下さい。さもなければpromiseがrejectされなかった場合にテストが失敗したと判定されません。

test('the fetch fails with an error', () => {
  expect.assertions(1);
  return fetchData().catch(e => expect(e).toMatch('error'));
});

`.resolves` / `.rejects`

You can also use the .resolves matcher in your expect statement, and Jest will wait for that promise to resolve. promiseがrejectされた場合は、テストは自動的に失敗します。

test('the data is peanut butter', () => {
  return expect(fetchData()).resolves.toBe('peanut butter');
});

アサーションを返していることを確認してください。- もしこの return 文を省略した場合、あなたのテストは、fetchDataがresolveされpromiseが返ってくる前に実行され、then() 内のコールバックが実行される前に完了してしまいます。

promiseがrejectされることを期待するケースでは.rejects マッチャを使用してください。 .resolvesマッチャと似た動作をします。 promiseが成功した場合は、テストは自動的に失敗します。

test('the fetch fails with an error', () => {
  return expect(fetchData()).rejects.toMatch('error');
});

Async/Await

また、async と awaitをテストで使用できます。非同期テストを書くには、 testに渡す関数の前にasync キーワードを記述するだけです。例えば、同じfetchData シナリオは次のようにテストできます:

test('the data is peanut butter', async () => {
  expect.assertions(1);
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  try {
    await fetchData();
  } catch (e) {
    expect(e).toMatch('error');
  }
});

Of course, you can combine async and await with .resolves or .rejects.

test('the data is peanut butter', async () => {
  await expect(fetchData()).resolves.toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  await expect(fetchData()).rejects.toThrow('error');
});

これらのケースでは async や await は事実上、promiseを使用した例と同じロジックの単なる糖衣構文です。

None of these forms is particularly superior to the others, and you can mix and match them across a codebase or even in a single file. It just depends on which style makes your tests simpler.

コールバック

Promises

.resolves / .rejects

Async/Await

`.resolves` / `.rejects`