【Vitest】利用しているライブラリの一部をモックする

やりたいこと

Vitest×RTLでReactのテストを書いていて、「react-router-domのuseParamsをモックして決まった返り値を返したい」というニーズが出てきました。

ネットで調べてよく出てくるjestならjest.requireActual(moduleName)が使えそうなのですが、Vitestには同名のメソッドがありません。

さて、どうしたものか・・

vi.importActualを使う

Vitest（Vi）のドキュメントを見てみると、同じ目的で使えるvi.importActualがありました。

sample.text.tsx
1import React from 'react';
2import { render, screen, waitFor } from '@testing-library/react';
3import '@testing-library/jest-dom';
4import { vi } from 'vitest';
5
6
7describe('SampleComponent', () => {
8  ...
9
10  const renderComponent = (): void => {
11    // useParamsのみモックする
12    vi.mock('react-router-dom', async () => {
13      // awaitし忘れるとテスト通らなくなったりするので注意
14      const actual: any = await vi.importActual('react-router-dom');
15      return {
16        ...actual,
17        useParams: vi.fn(() => ({ pageId: '1' })),
18      };
19    });
20    render(<SampleComponent />);
21  };
22  ...
23

参考

• Vi | Vitest