【Testing Library】React Componentをモック化する

2024/09/29

Vitest × Testing LibraryでReactのFunction Componentをモック化したい時。

export default function ParentComponent() {
  return <ChildComponent />;
}

export default function ChildComponent() {
  return <>...</>;
}

例えば上記のような<ParentComponent/>をレンダリングした時に<ChildComponent/>がレンダリングされることを検証したい。ちなみに<ChildComponent/>は何らかの理由でモック化したいという前提。

解決法

import { render, screen } from '@testing-library/react';

it('ChildComponentがレンダリングされる', () => {
  vi.mock('./ChildComponent', () => ({
    default: () => <div data-testid="child-component" />,
  }));
  render(<ParentComponent />);

  expect(screen.getByTestId('child-component')).toBeInTheDocument();
});

vi.mock('./ChildComponent', () => ({
  default: () => <div data-testid="child-component" />,
  ChildComponent: () => <div data-testid="child-component" />,
}));

もしnamed exportしている場合はキー名を変えればよい。