Jest と Vitest で「関数内で呼び出される関数の戻り値をモックする」方法を比べてみた

若槻龍太

2023.09.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 Delivery部の若槻です。

今まで JavaScript テスティングフレームワークとしてずっと Jest を使っていましたが、最近は社内でおすすめされて Vitest を使い始めています。多くのマッチャーや API が Jest と互換性があり、また実行速度が速いのが特徴です。

さて今まで Jest で関数のユニットテストを実装する際に「関数内で呼び出される関数の戻り値をモック」ということをやってきたのですが、これが Vitest ではどうなるのか、方法を比べてみました。

やってみた

関数を実装したモジュールです。

以下は呼び出す側の関数callerを実装したモジュールmoduleAです。

import { called } from './moduleB';

export const caller = () => called(2);

以下は呼び出される側の関数calledを実装したモジュールmoduleBです。

export const called = (max: number) => Math.floor(Math.random() * max);

呼び出す側の関数のユニットテストを Jest と Vitest で実装してみます。

Jest の場合

環境

module.exports = {
  testEnvironment: 'node',
  roots: ['<rootDir>/src'],
  testMatch: ['**/*.test.ts'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
};

$ npm ls jest
[email protected] /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app
├── [email protected]
└─┬ [email protected]
  └── [email protected] deduped

テストコード

Jest の場合は次のようになります。jest.fn()でモックしたい関数をモック関数とします。

import { caller } from './moduleA';
import { called } from './moduleB';

test('moduleA', (): void => {
  (called as jest.Mock) = jest.fn().mockReturnValue(5);

  const result = caller();

  expect(called).toHaveBeenCalledTimes(1);
  expect(called).toBeCalledWith(2);

  expect(result).toBe(7);
});

テストコードを Jest で実行した様子です。

$ npx jest moduleA-jest.test.ts
 PASS  src/moduleA-jest.test.ts
  ✓ moduleA (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.988 s, estimated 2 s
Ran all test suites matching /moduleA-jest.test.ts/i.

ちなみにトータルの実行時間は 1.988 s です。

Vitest の場合

環境

$ npm ls vitest
[email protected] /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app
└── [email protected]

テストコード

Vitest の場合は次のようになります。まずvi.mock()でモジュールごとモックし、vi.fn()でモックしたい関数をモック関数とします。fn()には下記のmockReturnValueの他にmockResolvedValueやmockReturnValueOnceなど Jest と同じものは一通り使えます。

import { caller } from './moduleA';
import { called } from './moduleB';

import { expect, test, vi } from 'vitest';

vi.mock('./moduleB', () => {
  return {
    called: vi.fn().mockReturnValue(5),
  };
});

test('moduleA', (): void => {
  const result = caller();

  expect(called).toHaveBeenCalledTimes(1);
  expect(called).toBeCalledWith(2);

  expect(result).toBe(7);
});

テストコードを Vitest で実行した様子です。

$ npx vitest run moduleA-vitest.test.ts

 RUN  v0.34.3 /Users/wakatsuki.ryuta/projects/cm-rwakatsuki/cdk_sample_app

 ✓ src/moduleA-vitest.test.ts (1)
   ✓ moduleA

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  01:35:07
   Duration  252ms (transform 54ms, setup 0ms, collect 48ms, tests 2ms, environment 0ms, prepare 49ms)

トータルの実行時間は 252ms です。Jest と比べて 1/8 くらいの時間です。さすがトップページで「Blazing Fast Unit Test Framework」と謳っているだけあって速いですね。