Vitestで@testing-libraryのDOMマッチャーを使う

• Using Testing Library jest-dom with Vitest
• Vitest × testing-library雑めも

まずは testing/setup.ts を作る。ここではフロントエンドのディレクトリ構造ベストプラクティスに沿って testing に置いているが、場所はどこでもいい。

import "@testing-library/jest-dom/vitest";

これを vite.config.ts から読む。

export default defineConfig(({ isSsrBuild }) => ({
  test: {
    setupFiles: ["./testing/setup.ts"], // 追加
  },
}));

以上で toBeVisible や toBeInTheDocument などのマッチャーが利用できる。