はじめに
本記事は、Vite を用いて構築された React プロジェクトで Testing Library を活用し、コンポーネントのテスト環境を構築するための備忘録です。
Testing Library とは
Testing Library は、ユーザーの視点に基づいたテストを容易にするためのJavaScriptテスティングツールです。このライブラリは、ReactやVueなどの人気フレームワークやライブラリに対応し、DOM要素のテストをより直感的で実用的な方法で行うことを可能にします。主にUIコンポーネントの振る舞いをテストする際に使用され、よりクリーンでメンテナンスしやすいテストコードの作成を促進します。Testing Library 公式サイト
環境
使用したNode.jsのバージョン:
node -v
v18.12.1
環境設定
Viteのプロジェクトの作成
まず、Vite を使って React プロジェクトを作成します。Vite は、高速なフロントエンドのビルドツールであり、React と TypeScript をサポートしています。詳細は Vite 公式ドキュメント を参照してください。
npm create vite@latest
Need to install the following packages:
create-vite@5.1.0
Ok to proceed? (y) y
✔ Project name: … ui-test-lesson
✔ Select a framework: › React
✔ Select a variant: › TypeScript
Done. Now run:
cd ui-test-lesson
npm install
npm run dev
プロジェクト作成後、必要なライブラリをインストールします。
cd ui-test-lesson
npm install
testing-libraryの設定
Testing Library とその関連ライブラリを導入します。
-
jest-environment-jsdom: Jest で DOM 要素のテストに必要 -
@testing-library/react: React で Testing Library を使用するために必要 -
@testing-library/jest-dom: Jest のカスタム DOM 要素マッチャーを提供 -
@testing-library/user-event: イベントのテストに使用
npm install --save-dev jest @types/jest ts-jest
npm install --save-dev jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event
Jest の設定ファイルを作成します。
npx ts-jest config:init
作成された jest.config.js は、CommonJSモジュールとESモジュール間の仕様差異に起因するエラーを防ぐために、export default {} の形式で書き換えます。また、テスト環境を設定するために testEnvironment オプションを、先ほどインストールした jest-environment-jsdom に変更します。
export default {
preset: "ts-jest",
testEnvironment: "jest-environment-jsdom",
};
tsconfig.json に esModuleInterop を追加し、types を設定します。
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true /* 追加する */,
"types": ["@testing-library/jest-dom"] /* 追加する */
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
jest.setup.ts をプロジェクト直下に作成し、Testing Library のセットアップを行います。
import "@testing-library/jest-dom";
jest.config.js を更新し、jest.setup.ts を読み込むように設定します。
/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
preset: "ts-jest",
testEnvironment: "jest-environment-jsdom",
setupFilesAfterEnv: ["./jest.setup.ts"],
};
package.json にテストコマンドを追加します。
{
"scripts": {
"test": "jest",
// その他のスクリプト
}
}
テストの確認
Button コンポーネントのテストを実施してみましょう。
buttonタグがレンダリングされるかと、Buttonコンポーネントに渡しているラベルが表示されているかのテストをします。
interface ButtonProps {
label: string;
onClick: () => void;
}
const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
return (
<button onClick={onClick}>
{label}
</button>
);
};
export default Button;
テストコードは下記のようになります。
import { render, screen } from "@testing-library/react";
import Button from "./Button";
describe("Button", () => {
it("buttonタグがレンダリングされる", () => {
render(<Button label="ボタン" onClick={() => alert("クリック")} />);
const element = screen.getByRole("button");
expect(element).toBeInTheDocument(); // buttonタグがレンダリングされる
expect(element).toHaveTextContent("ボタン"); //ラベルが表示されているか
});
});
テストを実行し、結果を確認します。
npm test src/components/Button.test.tsx
> ui-test-lesson@0.0.0 test
> jest src/components/Button.test.tsx
PASS src/components/Button.test.tsx
Button
✓ buttonタグがレンダリングされる (67 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 3.057 s
テスト成功したのが確認できました！
おわりに
この記事では、Vite と React を用いたプロジェクトで Testing Library を使ったコンポーネントテスト環境の設定方法についてまとめました。