Jestのテストを非同期に実行する
はじめに
Jestのドキュメントを読んでまとめていきます。
ところどころ気になった部分を調べて補足したり解釈を入れています。
https://jestjs.io/ja/docs/asynchronous
非同期コード
JavaScriptではコードを非同期に実行することがよくあります。
Jestでは非同期コードのテストを行うための方法が大きく分けて3つ提供されています。
プロミス
Jestは、テストで返されるプロミスを処理できます。
この場合、テストはプロミスが解決されるまで待機します。
test('the data is peanut butter', () => { return fetchData().then(data => { expect(data).toBe('peanut butter'); }); })
コールバック
JavaScriptの非同期動作を制御するための方法としてコールバックがあります。
Jestは、引数としてdoneを提供して、非同期コードのテストを可能にします。
テストが完了したことをJestに通知するためには、doneを呼び出す必要があります。
test('the data is peanut butter', (done) => { function callback(data) { expect(data).toBe('peanut butter'); done(); } fetchData(callback); });
このテストはfetchDataが終了するまで待つことを保証し、コールバックがデータに対してアサーションを行います。doneを呼び出し忘れた場合、テストはタイムアウトエラーになります。
コールバックの注意点
コールバックを使うと「コールバック地獄」と呼ばれる状態に陥る可能性があります。
コールバック関数はネストされて読みにくくなりやすく、エラーハンドリングも煩雑になりがちです。
このコードではasyncFunctionToTestという非同期関数をテストしています。
この関数は結果を返すのではなく、コールバック関数callbackを引数に取り、非同期処理が完了したときにその結果をコールバックに渡します。
ここで問題になるのは、このasyncFunctionToTestがさらにコールバックを必要とする非同期関数を呼び出すと、ネストが深くなってコードの可読性が低下します。
// コールバックを使った非同期テスト test('Async test with callbacks', (done) => { function callback(data) { try { // テストのアサーション expect(data).toBe('Expected data'); done(); // Jestにテストが完了したことを伝える } catch (error) { done(error); // エラーがあれば、エラーをJestに伝える } } asyncFunctionToTest(callback); });
この問題はPromiseまたはasync/awaitを使うことで解決可能です。これらの方法は非同期操作の結果を直接返すことができ、コードの可読性を向上させ、エラーハンドリングを簡素化する利点があります。そのため、可能な限りPromiseまたはasync/awaitを使用することをお勧めします。
Async/Await
async/awaitは非同期コードの操作を単純化するためのJavaScriptの機能です。
テスト関数をasyncとマークし、awaitを使うことで、非同期処理の結果を待つことができます。
test('the data is peanut butter', async () => {
const data = await fetchData();
expect(data).toBe('peanut butter');
});
おしまい
コメント
本記事の内容は以上になります！
プログラミングスクールのご紹介 (卒業生より)
お世話になったプログラミングスクールであるRUNTEQです♪
こちらのリンクを経由すると１万円引きになります。
RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。
もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。
