以下の記事を翻訳するにあたって jest.mock() がわからなかったので調べた。その結果をまとめる。 https://uncle-javascript.com/vuex-actions-test

Jest のドキュメントとしては、いかに対応する。 https://jestjs.io/docs/en/mock-functions#mocking-modules

なお、jest.mock() は 2018/11/30 日現在、CodeSandbox では動かない。

リクエストをする関数

ポイントは axios を使っていること。

これを後ほど jest.mock() でモックにする。

/src/api/request.js
import axios from 'axios'
const request = async url => {
  const res = await axios.get(url)
  console.log(res)
  return res
}

export default request

リクエストをする関数をあえて読み込んで実行するだけの関数

jest のテストの中で import したものだけではなく、それがさらに import している axios もモックできることを示すために、あえて一枚壁を挟む。

/src/api/test.js
import request from '@/api/request'

const test = async url => {
  return await request(url)
}

export default test

test.js のテスト

以下のテストは通るようには書いていないが、エラーの値が見えて確認しやすいのであえてこのコードとした。

jest.mock('axios', () => {}) で axios をモック関数にすり替えてしまう。すり替える関数の中身は () => {} 以降で定義している。この関数は get メソッドを持ち、これは Promise オブジェクトを返す。axios のレスポンスがそうであるからこう定義した。

これによって、axios という名前のモジュールが実行されるときには、このモックの関数が実行されることになる。つまりこの例で言えば、本当の axios が実行されて外部にリクエストすることはない。

jestのテスト
/**
 * @jest-environment node
 */

import testFunc from '@/api/test'

let mockError = false

jest.mock('axios', () => ({
  get: (url, body) => {
    return new Promise(resolve => {
      if (mockError) throw Error('Mock error')

      resolve({ url, body })
    })
  }
}))

test('async', async () => {
  const res = await testFunc('https://jsonplaceholder.typicode.com/posts/1')
  const expected = 1
  expect(res).toEqual(expected)
})