フロントエンドテストフレームワークJestシリーズチュートリアル--Asynchronous(非同期コードのテスト)

前に書く:

JavaScriptコードでは非同期運転が一般的です.非同期で実行されるコードがある場合、Jestはテストのコードがいつ完了するかを知ってから、別のテストを続行する必要があります.Jestはこの問題を処理するためのいくつかの方法を提供した.

非同期コードの3つの実装方法をテストします。

方法一:コールバック関数
これは非常に一般的な一般的な処理方法です.例えば、fetchData(callback) functionを使用してデータを取得し、取得が完了したときにcallback関数を呼び出します.戻ってきたデータをテストしたいのは「peanut butter」です.デフォルトではfetchDataの実行が完了したときにJestのテストが完了します.これはあなたが望んでいるように実行されません.

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

  fetchData(callback);
});

上記のコードの問題は、fetchDataが完了すると、テストも完了し、コールバックが呼び出されることです.
Jestは、次のコードdone()が実行されるとcallback関数が呼び出されることを意味するテストのための実装を提供する. 

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

  fetchData(callback);
});

doneがいつまでも呼び出されない場合、テストは失敗します.これも私たちが望んでいることです(callbackが呼び出され、返されるdataが私たちが望んでいる値であることを望んでいます).
方法2:承諾検証
コードに承諾された方法を使用すると、非同期テストの処理がより簡単になります.Jestはあなたのテストから約束を返して、約束が実現されるのを待っています.もし実現しなかったら、テストが失敗したと判断します.
また、上記の例では、承諾で検証すると、実装は次のようになります.

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

assertions(1)は、現在のテストで少なくとも1つの断言が呼び出されたことを表し、そうでなければ失敗と判定される.
return文を削除すると、fetchDataが完了する前にテストが終了します.
断言の約束が実現されていない場合は、追加することができます.catchメソッド.必ずexpectを追加し、一定数の断言が呼び出されることを検証します.そうでなければ、実現の約束は失敗しません.

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

Jest 20.0.0+のバージョンで使用できます.resolvesマッチング器expect文では、Jestは承諾が実現されるまで待機し、承諾が実現されなければ、テストは自動的に失敗します.

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

もしあなたの約束が実現されないことを望んでいるなら、あなたは使用することができます.rejects、その原理と.resolves類似

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

3つ目:Async/Awaitの使用
私は皆さんが最もAsync/Awaitがよく知っていると信じています.あなたはテストで非同期と待機を使用することができます.asyncテストを作成するには、テストに渡される関数の前に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');
  }
});

もちろんAsync Awaitとresolves  .rejects結合(Jest 20.0.0+のバージョン)

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

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

最後に書きます。

これらの場合、非同期および待機は、実際には、承諾例と同じ論理の構文糖にすぎない.
このいくつかの方法では、他の方法よりも特に優れているものはありません.コードライブラリに組み合わせることもできます.単一のファイルでマッチングすることもできます.どのスタイルがあなたのテストを簡単にするかによって異なります.
 

チュートリアル:

　  1.フロントエンドテストフレームワークJestシリーズチュートリアル--Matchers(マッチング)
　  2.フロントエンドテストフレームワークJestシリーズチュートリアル--Asynchronous(非同期コードのテスト)
　  3.フロントエンドテストフレームワークJestシリーズチュートリアル--Mock Functions(シミュレータ)
　  4.フロントエンドテストフレームワークJestシリーズチュートリアル--Global Functions(グローバル関数)