vitestでテスト対象がimportしてるモジュールをモックする方法

はじめに

vitestでテスト対象がimportしてるモジュールをモックする方法について、サラッと知りたい人向けの記事です。

https://vitest.dev/guide/mocking.html

---

やりたいこと

以下のようなJSコードがあったとして、

「foo」をテストする際に、importしている「bar」をモックしたい。

---

サンプルコード

foo.js

import { bar } from 'bar';

export const foo = () => {
  return 'foo-->' + bar();
}

bar.js

export const bar = () => {
  return 'bar';
}

テストコード

barをモックしない場合

foo.unmocking.test.js

import { expect, test } from 'vitest'
import { foo } from './foo'

test('unmocking test', () => {
    // 結果を検証
    expect(foo()).toBe('foo-->bar')
})

barをモックする場合

foo.mocking.test.js

import { expect, test, vi } from 'vitest'
import { foo } from './foo'

// barをモック化する
import { bar } from './bar'
vi.mock('./bar')

test('mocking test', () => {
    // モックの戻り値を設定
    bar.mockReturnValue('mock')
    // 結果を検証
    expect(foo()).toBe('foo-->mock')
})

補足：モック関数

• モック対象が同期関数の場合は、mockReturnValueを利用する。
• モック対象が非同期関数の場合は、mockResolvedValueを利用する。
• モックに引数を渡したい場合は、mockImplementationを利用する。

// モック対象が同期関数の場合
bar.mockReturnValue('mock')
//=> 'mock'を返す

// モック対象が非同期関数の場合
bar.mockResolvedValue('mock')
//=> 'mock'を返す

// モックに引数を渡したい場合
bar.mockImplementation((i) => 'mock'.repeat(i))
// i=1の場合、'mock'を返す
// i=2の場合、'mockmock'を返す