非同期に実行するコードをJestでテスト

Jestは、Facebookが開発したテストフレームワークです。Jestは、複雑な設定なしにJavaScript、さらにReactとVueのコンポーネントをテストするためのフレームワークです。

JavaScriptでは、コードを非同期に実行することが多いです。それを認めて、Jestで非同期的に実行するコードをテストするためにいくつかの機能が含まれます。

二つの例をあげます。AxiosというHTTPクライエントを使います。

yarn init -y
yarn add axios jest
// package.json
"scripts": {
  "test": "jest"
}

api.test.jsというファイルを作ります。Jestは、.testが入るファイルを自動に探して実行します。

// api.test.js
const axios = require('axios')
function getApiData() => {
  return axios.get('https://jsonplaceholder.typicode.com/posts/1')
}

JsonPlaceholderは、誰でも使えるテストのためのAPIです。以下のようなレスポオンスがきます。

{
  "userId": 1,
  "id": 1,
  "title": ".....",
  "body": "...."
}

getApiData()をJestでテストします。

test('the post id is 1', () => {
  expect.assertions(1)
  return getApiData(1).then(res => {
    expect(res.data.id).toBe(1)
  })
})

expect.assertions で、想定した数のアサーションが呼ばれたことを確認できます。yarn test で実行します。

async/awaitも使えます。async/awaitの方が読みやすいと思います。async/awaitを使うと、前の関数が変わります。testを定義する際はasync を書かないと動けますん。

function getPostId() => {
  return axios.get('https://jsonplaceholder.typicode.com/posts/')
    .then(res => res.data.id)
}
test('the post id is 1', async () => {
  expect.assertions(1)
  const id = await getPostId(1)
  expect(id).toBe(1)
})

テストを実行すると、本当のテータベースのような外部のリソースにアクセスするのが遅く、その代わりにモックデータを使えます。Jestでモジュールを追加せずにできます。以上のテストを、スタブしてモックデータを返します。

getPostId = jest.fn()
getPostId.mockReturnValue(1)
test('the post id is 1', async () => {
  expect.assertions(1)
  const id = await getPostId(1)
  expect(id).toBe(1)
})

次の投稿では、VueのコンポーネントをJestでテストしてみたいと思います。