メインコンテンツまでスキップ

10. Test

Reactアプリケーションの品質を保証するためには、さまざまなテストを行うことが重要です。ユニットテスト、エンドツーエンド（E2E）テストなどを実施することで、バグを早期に発見し、リファクタリングや新機能追加時のリグレッションを防ぐことができます。

ユニットテスト​

ユニットテストは、個々のコンポーネントや関数が正しく動作することを確認するためのテストです。JestやReact Testing Libraryを使用して、ユニットテストを実装します。

Jest​

Jestは、Facebookが開発したJavaScriptのテストフレームワークで、ユニットテストやスナップショットテストに適しています。

使用例​

以下は、Jestを使った基本的なユニットテストの例です：

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import MyComponent from './MyComponent';

test('renders the correct content', () => {
  render(<MyComponent />);
  expect(screen.getByText('Hello, world!')).toBeInTheDocument();
});

React Testing Library​

React Testing Libraryは、Reactコンポーネントのテストを支援するライブラリで、DOMに対する操作をシンプルに行えます。

使用例​

以下は、React Testing Libraryを使った基本的なユニットテストの例です：

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Counter from './Counter';

test('increments counter', () => {
  render(<Counter />);
  const button = screen.getByText('Increment');
  fireEvent.click(button);
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

E2Eテスト​

エンドツーエンド（E2E）テストは、アプリケーション全体の機能をシミュレートし、実際のユーザーインターフェースを通じてテストを行います。CypressやPlaywrightを使用してE2Eテストを実装します。

Cypress​

Cypressは、モダンなE2Eテストフレームワークで、簡単に設定でき、強力なテスト機能を提供します。

使用例​

以下は、Cypressを使った基本的なE2Eテストの例です：

describe('My First Test', () => {
  it('Does not do much!', () => {
    cy.visit('http://localhost:3000');
    cy.contains('Hello, world!');
  });
});

Playwright​

Playwrightは、Microsoftが開発したE2Eテストフレームワークで、複数のブラウザに対応しており、クロスブラウザテストに適しています。

使用例​

以下は、Playwrightを使った基本的なE2Eテストの例です：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000');
  const text = await page.textContent('h1');
  console.log(text); // "Hello, world!"
  await browser.close();
})();

テストの実行​

プロジェクトに含まれるテストを実行するには、一般的に以下のコマンドを使用します。これにより、すべてのユニットテストやE2Eテストが実行され、テスト結果が表示されます。

ユニットテストの実行​

JestやReact Testing Libraryを使用したテストを実行するには、次のコマンドを使用します：

npm test

E2Eテストの実行​

CypressやPlaywrightを使用したE2Eテストを実行するには、次のコマンドを使用します：

Cypress​

npx cypress open

Playwright​

npx playwright test

このように進めていきます。他に追加や修正の希望があればお知らせください。