VitestとTesting LibraryでReact 19のコンポーネントをテストする方法

npm i -D vitest@5.0.5 jsdom@30.1.3 @testing-library/react@16.3.3 @testing-library/dom@10.4.2 @testing-library/user-event@14.6.8 @testing-library/jest-dom@7.0.1 typescript@7.0.2 @types/react @types/react-dom @types/node@22 react@19.3.1 react-dom@19.3.1

// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'jsdom',
    setupFiles: ['./vitest.setup.ts'],
  },
});

// vitest.setup.ts
import '@testing-library/jest-dom/vitest';
import { cleanup } from '@testing-library/react';
import { afterEach } from 'vitest';

// globals: false（既定）のときは、自分で後片づけを登録する
afterEach(() => {
  cleanup();
});

 FAIL  src/Counter.test.tsx > 押すと1回になる
TestingLibraryElementError: Found multiple elements with the role "button"

{
  "compilerOptions": {
    "target": "ES2024",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "strict": true,
    "noEmit": true,
    "skipLibCheck": true,
    "types": ["node"]
  },
  "include": ["src", "vitest.setup.ts", "vitest.config.ts"]
}

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>押した回数 {count}</button>;
}

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { expect, test } from 'vitest';
import { Counter } from './Counter';

test('最初は0回', () => {
  render(<Counter />);
  expect(screen.getByRole('button')).toHaveTextContent('押した回数 0');
});

test('押すと1回になる', async () => {
  const user = userEvent.setup();
  render(<Counter />);
  await user.click(screen.getByRole('button'));
  expect(screen.getByRole('button')).toHaveTextContent('押した回数 1');
});

import { useActionState } from 'react';
import { subscribe } from './api';

type State = { message: string };

async function subscribeAction(_prev: State, formData: FormData): Promise<State> {
  const email = String(formData.get('email'));
  const { ok } = await subscribe(email);
  return { message: ok ? `${email} を登録しました` : '登録できませんでした' };
}

export function SubscribeForm() {
  const [state, formAction, isPending] = useActionState(subscribeAction, { message: '' });
  return (
    <form action={formAction}>
      <label>
        メールアドレス
        <input name="email" type="email" />
      </label>
      <button type="submit" disabled={isPending}>
        {isPending ? '送信中…' : '登録する'}
      </button>
      <p role="status">{state.message}</p>
    </form>
  );
}

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { expect, test, vi } from 'vitest';
import { subscribe } from './api';
import { SubscribeForm } from './SubscribeForm';

vi.mock('./api');

test('登録すると、結果のメッセージが出る', async () => {
  vi.mocked(subscribe).mockResolvedValue({ ok: true });
  const user = userEvent.setup();
  render(<SubscribeForm />);

  await user.type(screen.getByLabelText('メールアドレス'), 'neko@example.com');
  await user.click(screen.getByRole('button', { name: '登録する' }));

  expect(await screen.findByText('neko@example.com を登録しました')).toBeInTheDocument();
  expect(subscribe).toHaveBeenCalledWith('neko@example.com');
});

test('サーバーが応答するまでは「送信中…」になる', async () => {
  // テストから応答の時期を決められる Promise
  const { promise, resolve } = Promise.withResolvers<{ ok: boolean }>();
  vi.mocked(subscribe).mockReturnValue(promise);
  const user = userEvent.setup();
  render(<SubscribeForm />);

  await user.type(screen.getByLabelText('メールアドレス'), 'neko@example.com');
  await user.click(screen.getByRole('button', { name: '登録する' }));
  expect(screen.getByRole('button', { name: '送信中…' })).toBeDisabled();

  resolve({ ok: false });
  expect(await screen.findByText('登録できませんでした')).toBeInTheDocument();
  expect(screen.getByRole('button', { name: '登録する' })).toBeEnabled();
});

import { Suspense, use } from 'react';

export type Album = { id: number; title: string };

function AlbumList({ albumsPromise }: { albumsPromise: Promise<Album[]> }) {
  const albums = use(albumsPromise);
  return (
    <ul>
      {albums.map((album) => (
        <li key={album.id}>{album.title}</li>
      ))}
    </ul>
  );
}

export function Albums({ albumsPromise }: { albumsPromise: Promise<Album[]> }) {
  return (
    <Suspense fallback={<p>読み込み中…</p>}>
      <AlbumList albumsPromise={albumsPromise} />
    </Suspense>
  );
}

A component suspended inside an `act` scope, but the `act` call was not awaited. When testing React components that depend on asynchronous data, you must await the result:

await act(() => ...)

import { act, render, screen } from '@testing-library/react';
import { expect, test } from 'vitest';
import { Albums, type Album } from './Albums';

test('読み込み中の表示のあとに、一覧が出る', async () => {
  // Promise はテストの側で作って渡す
  const { promise, resolve } = Promise.withResolvers<Album[]>();
  // 中断するコンポーネントは、await act の中で描画する
  await act(async () => {
    render(<Albums albumsPromise={promise} />);
  });
  expect(screen.getByText('読み込み中…')).toBeInTheDocument();

  resolve([
    { id: 1, title: 'Abbey Road' },
    { id: 2, title: 'Let It Be' },
  ]);
  expect(await screen.findAllByRole('listitem')).toHaveLength(2);
  expect(screen.queryByText('読み込み中…')).not.toBeInTheDocument();
});