動作環境

• node: v18.16.0
• vitest: v0.34.3
• @testing-library/react: v14.0.0

Vitest のインストール

公式ドキュメントに従いながら Vitest のパッケージを追加します。

https://vitest.dev/guide

yarn add vitest --dev

React Testing Library のインストール

これも公式ドキュメントに従いながらパッケージを追加。

https://testing-library.com/docs/react-testing-library/intro

yarn add --dev @testing-library/react @testing-library/jest-dom @types/jest

toBeVisibleなどのメソッドを使いたいので@testing-library/jest-domパッケージも一緒に追加。

型の情報も欲しいので@types/jestパッケージも一緒に追加します。

@testing-library/jest-dom のセッティング

公式ドキュメントに従いながらセットアップファイルを作り、モジュールをimportしていきます。

https://github.com/testing-library/jest-dom#with-vitest

import '@testing-library/jest-dom';

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    setupFiles: ['./test/setup.ts'],
  },
});

テストファイルの作成

import { render, screen } from '@testing-library/react';
import { Button } from './Button';
import { faker } from '@faker-js/faker';
import { expect, describe, it } from 'vitest';

describe('<Button/>', () => {
  it('Buttton should be rendered', () => {
    const text = faker.string.sample(); // ランダムなテキストを生成
    render(<Button text={text} onClick={() => {}} />); // コンポーネントをレンダリング

    const button = screen.getByRole('button', { name: text }); // ボタンを取得

    expect(button).toBeVisible();
  });
});

tsconfig のエイリアスを設定

Buttonコンポーネントのファイル内に、tsconfig.jsonで設定したエイリアスを使用してモジュールをimportしている箇所があり、vitest が理解できていなかったので vitest にエイリアスを教えてあげます。

https://github.com/aleclarson/vite-tsconfig-paths

このパッケージを vitest のプラグインとして使用します。ドキュメント通りに設定。

import tsconfigPaths from 'vite-tsconfig-paths';

import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [tsconfigPaths()],
  test: {
    globals: true,
    setupFiles: ['./test/setup.ts'],
  },
});

react 用の設定

FAIL  src/components/atoms/Button/Button.spec.tsx > <Button/> > Buttton should be rendered
ReferenceError: React is not defined

怒られたので、vitest の react 用のプラグインも導入していきます。

https://www.npmjs.com/package/@vitejs/plugin-react

ドキュメント通りに設定

import tsconfigPaths from 'vite-tsconfig-paths';
import react from '@vitejs/plugin-react';

import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true,
    setupFiles: ['./test/setup.ts'],
  },
});

jsdom を設定

FAIL  src/components/atoms/Button/Button.spec.tsx > <Button/> > Buttton should be rendered
ReferenceError: document is not defined
 ❯ Proxy.render node_modules/@testing-library/react/dist/pure.js:215:5
 ❯ src/components/atoms/Button/Button.spec.tsx:9:5
      7|   it('Buttton should be rendered', () => {
      8|     const text = faker.string.sample();
      9|     render(<Button text={text} onClick={() => {}} />);
       |     ^
     10|     screen.debug();
     11|     const button = screen.getByRole('button', { name: text });

React Testing Library を使うにはさらに設定が必要らしいので、そいつの設定

jsdom の追加

yarn add jsdom --dev

config の設定

environmentをjsdomに変更

import tsconfigPaths from 'vite-tsconfig-paths';
import react from '@vitejs/plugin-react';

import { defineConfig } from 'vitest/config';

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true,
    environment: 'jsdom', // <= ここ
    setupFiles: ['./test/setup.ts'],
  },
});

テスト実行

Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  16:09:46
   Duration  614ms (transform 54ms, setup 0ms, collect 216ms, tests 32ms, environment 200ms, prepare 50ms)

通ったぁぁぁぁぁあ

最後に

あまり難しくないはずだけど凄まじく時間を溶かした。

では

Bye