Vitestで非同期関数の検証方法一覧

はじめに

Vitestで非同期を検証する場合、書き方がいくつかあるためご紹介します。VitestはJest互換なため、Jestでも同様の書き方ができます。

非同期関数の検証方法

以下の検証はすべて成功します。

import { test, expect, describe } from 'vitest'

// 成功する非同期関数
export const fetchDataResolve = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('tarosuke')
    }, 10)
  })
}

// 失敗する非同期関数
export const fetchDataReject = () => {
  return new Promise((_, reject) => {
    setTimeout(() => {
      reject('error')
    }, 10)
  })
}

describe('非同期の成功を検証', () => {
  test('検証１', () => {
    return fetchDataResolve().then((data) => {
      expect(data).toBe('tarosuke')
    })
  })

  test('検証２', () => {
    return expect(fetchDataResolve()).resolves.toBe('tarosuke')
  })

  test('検証３', async () => {
    await expect(fetchDataResolve()).resolves.toBe('tarosuke')
  })

  test('検証４', async () => {
    expect(await fetchDataResolve()).toBe('tarosuke')
  })
})

describe('非同期の失敗を検証', () => {
  test('検証１', () => {
    return fetchDataReject().catch((data) => {
      expect(data).toBe('error')
    })
  })

  test('検証２', () => {
    return expect(fetchDataReject()).rejects.toBe('error')
  })

  test('検証３', async () => {
    await expect(fetchDataReject()).rejects.toBe('error')
  })

  test('検証４', async () => {
    /*
    アサーションが１回呼ばれることを確認
    （非同期関数が成功した場合、catch処理が実行されずに検証が成功の扱いになるため、記述することをおすすめする）
    */
    expect.assertions(1)

    try {
      await fetchDataReject()
    } catch (error) {
      expect(error).toBe('error')
    }
  })
})

まとめ

Vitestで非同期を検証する場合の書き方をご紹介しました。どの書き方でも良いですが、async/awaitを書き忘れたり、try...catchでexpect.assertions()を書き忘れた場合、想定している検証が正しく行われないことがあるため、注意が必要です。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。