ざっくりフロントエンドのテスト手法（TypeScript）

はじめに

フロントエンドのテストは、Webアプリケーションのユーザーインターフェース（UI）やユーザーエクスペリエンス（UX）を保証するために重要です。適切なテスト手法を使用することで、バグの早期発見や品質の向上を図ることができます。この記事では、TypeScriptを使用したフロントエンドのテスト手法について説明します。

1. ユニットテスト

ユニットテストは、アプリケーションの最小単位（関数やコンポーネント）をテストする手法です。ユニットテストは、個々の機能が正しく動作することを確認するために使用されます。

ツール

• Jest: Facebookが開発したJavaScriptのテスティングフレームワーク。TypeScriptもサポートしています。
• Mocha: 柔軟で拡張性の高いJavaScriptのテスティングフレームワーク。TypeScriptもサポートしています。

例: Jestを使用したユニットテスト

例

// sum.ts
export function sum(a: number, b: number): number {
    return a + b;
}

// sum.test.ts
import { sum } from './sum';

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

2. コンポーネントテスト

コンポーネントテストは、UIコンポーネントが正しく動作することを確認するためのテスト手法です。ReactやVue.jsなどのフレームワークを使用する場合に特に重要です。

ツール

• React Testing Library: Reactコンポーネントのテストを支援するライブラリ。TypeScriptもサポートしています。
• Vue Test Utils: Vue.jsコンポーネントのテストを支援する公式ライブラリ。TypeScriptもサポートしています。

例: React Testing Libraryを使用したコンポーネントテスト

例

// MyComponent.tsx
import React from 'react';

interface MyComponentProps {
    text: string;
}
const MyComponent: React.FC<MyComponentProps> = ({ text }) => {
    return <div>{text}</div>;
};
export default MyComponent;


// MyComponent.test.tsx
import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders the correct text', () => {
    const { getByText } = render(<MyComponent text="Hello, World!" />);
    expect(getByText('Hello, World!')).toBeInTheDocument();
});

3. エンドツーエンド（E2E）テスト

エンドツーエンドテストは、アプリケーション全体のフローをテストする手法です。ユーザーが実際に行う操作をシミュレートし、アプリケーションが期待通りに動作することを確認します。

ツール

• Cypress: モダンなエンドツーエンドテストフレームワーク。TypeScriptもサポートしています。
• Playwright: Microsoftが開発したエンドツーエンドテストフレームワーク。TypeScriptもサポートしています。

例: Cypressを使用したエンドツーエンドテスト

例

// cypress/integration/sample_spec.ts
describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io');
    cy.contains('type').click();
    cy.url().should('include', '/commands/actions');
    cy.get('.action-email').type('[e-mail]').should('have.value', '[e-mail]');
  });
});

4. スナップショットテスト

スナップショットテストは、UIの変更を検出するためのテスト手法です。コンポーネントのレンダリング結果をスナップショットとして保存し、後のテストで比較します。

ツール

• Jest: スナップショットテストをサポートするテスティングフレームワーク。TypeScriptもサポートしています。

例: Jestを使用したスナップショットテスト

テスト対象コード

// MyComponent.tsx
import React from 'react';

interface MyComponentProps {
  text: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ text }) => {
  return <div>{text}</div>;
};

export default MyComponent;

テストコード

// MyComponent.test.tsx
import React from 'react';
import renderer from 'react-test-renderer';
import MyComponent from './MyComponent';

test('renders correctly', () => {
  const tree = renderer.create(<MyComponent text="Hello, World!" />).toJSON();
  expect(tree).toMatchSnapshot();
});

まとめ

フロントエンドのテスト手法には、ユニットテスト、コンポーネントテスト、エンドツーエンドテスト、スナップショットテストなどがあります。まだ使ったことが無いので使ってみようと思います。