🐥

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

2023/03/11に公開

React

Vitest×RTLでReactのテストを書いていて、「react-router-domのuseParamsをモックして決まった返り値を返したい」というニーズがあった。調べてよく出てくるjestならjest.requireActual(moduleName)が使えるのだが、Vitestには同名のメソッドがない。さて、どうしたものか・・

結論：await vi.importActualを使う

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

利用例

import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import { vi } from 'vitest';


describe('SampleComponent', () => {
  ...

  const renderComponent = (): void => {
    // useParamsのみモックする
    vi.mock('react-router-dom', async () => {
      // awaitし忘れるとテスト通らなくなったりするので注意
      const actual: any = await vi.importActual('react-router-dom');
      return {
        ...actual,
        useParams: vi.fn(() => ({ pageId: '1' })),
      };
    });
    render(<SampleComponent />);
  };
  ...

結論：await vi.importActualを使う

Discussion