jestで非同期関数をテストする

jestで非同期関数をテストする - Qiita
jest で React component をテストする - Qiita
jest で Redux をテストする - Qiita

---

jestで非同期関数をテストする方法を、以下のドキュメントに沿って、確認します。
Testing Asynchronous Code

PromiseとAsync/Awaitを扱います。コールバックはあまり脳内に残したくないので省略します。

１．テスト環境構築

以下のコマンドでテストディレクトリを作成します。

mkdir async_test
cd async_test
yarn init -y
yarn add jest axios

package.jsonに"scripts"を追加します。

package.json

{
  "name": "async_test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.19.0",
    "jest": "^24.8.0"
  },
  "scripts": {
    "test": "jest"
  }

これでテストは以下のコマンドで実行されるようになります。jestは自動的にxxxx.test.jsという名前のファイルを見つけてテストします。

yarn test

２．Promise

promiseを利用するコードでは、非同期処理のテストを簡単に扱える方法があります。 **テストからpromiseを返すとJestはpromiseが解決されるまで待機します。**逆に読めばpromiseをreturnしなければJestはpromiseが解決されるまで待機しないということでしょう。実験します。

Rest APIのテストにはJSONPlaceholderを利用します。以下のようなJsonが取得できます。
http://jsonplaceholder.typicode.com/posts

fetch.test.js

const axios = require('axios')

function fetchData(n) {
  return axios.get('https://jsonplaceholder.typicode.com/posts/'+n)
}

test('the res.data.id id is 3', () => {
  expect.assertions(1)               // (1)
  return fetchData(3).then(res => {  // (2)
    expect(res.data.id).toBe(3)
  })
})

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

returnを削って実行すると以下のようなエラーを吐きます。(2)のthen内のコールバックが呼ばれなかったので、アサーションテスト回数が0となり、(1)のテストに失敗したからです。(1)のテストはアサーションテスト回数が１であることを要求しています。

$ yarn test
yarn run v1.16.0
$ jest
 FAIL  ./fetch.test.js
  ? the res.data.id id is 3 (46ms)

  ● the res.data.id id is 3

    expect.assertions(1)

    Expected one assertion to be called but received zero assertion calls.

       6 |
       7 | test('the res.data.id id is 3', () => {
    >  8 |   expect.assertions(1)
         |          ^
       9 |   // return fetchData(3).then(res => {
      10 |   fetchData(3).then(res => {
      11 |     expect(res.data.id).toBe(3)

      at Object.assertions (fetch.test.js:8:10)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.547s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

３．Async/Await

上のコードをAsync/Awaitで書き直すと以下のようになります。これが一番わかりやすいですね。

fetch2.test.js

const axios = require('axios')

function fetchData(n) {
  return axios.get('https://jsonplaceholder.typicode.com/posts/'+n)
}

test('the res.data.id id is 3', async () => {
  expect.assertions(1)
  const res = await fetchData(3)
  expect(res.data.id).toBe(3)
})

今回は以上です。

参考記事

Testing in React with Jest and Enzyme: An Introduction