classNameテスト：React Testing Library vs Enzyme vs react-test-renderer

2024-04-18

JestとReact Testing Library を使って className をテストする方法

React コンポーネントのテストにおいて、className は重要な役割を果たします。適切な className が付与されていることを確認することは、コンポーネントの見た目や動作が正しく機能していることを保証する上で重要です。

Jest と React Testing Library は、React コンポーネントを効率的にテストするための強力なツールです。このチュートリアルでは、これらのツールを使用して className をテストする方法を説明します。

前提知識

このチュートリアルを理解するために、以下の知識が必要です。

JavaScript
React
Jest
React Testing Library

手順

テスト対象のコンポーネントをインポートする

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

コンポーネントをレンダリングする

render 関数を使用して、テスト対象のコンポーネントをレンダリングします。

const { getByRole } = render(<MyComponent />);

className を取得する

getByRole 関数を使用して、テスト対象の要素を取得し、その className を取得します。

const element = getByRole('button');
const className = element.className;

expect 関数を使用して、取得した className が期待される値と一致していることを検証します。

expect(className).toBe('my-button');

例

以下の例は、ボタンコンポーネントの className をテストする方法を示しています。

import React from 'react';
import { render, getByRole } from '@testing-library/react';
import MyButton from './MyButton';

test('MyButton should have the correct className', () => {
  const { getByRole } = render(<MyButton />);
  const element = getByRole('button');
  const className = element.className;

  expect(className).toBe('my-button');
});

補足

テスト対象の要素が複数存在する場合は、getByRole 関数ではなく getAllByRole 関数を使用する必要があります。
テスト対象の要素が ID で識別されている場合は、getByTestId 関数を使用することができます。
複雑な className をテストする場合は、toHaveClass matcher を使用することができます。

Jest と React Testing Library を使用することで、React コンポーネントの className を効率的にテストすることができます。このチュートリアルで説明した手順を参考に、自身のコンポーネントのテストをぜひ実践してみてください。

// MyButton.js
import React from 'react';

const MyButton = () => {
  return <button className="my-button">My Button</button>;
};

export default MyButton;

// MyButton.test.js
import React from 'react';
import { render, getByRole } from '@testing-library/react';
import MyButton from './MyButton';

test('MyButton should have the correct className', () => {
  const { getByRole } = render(<MyButton />);
  const element = getByRole('button');
  const className = element.className;

  expect(className).toBe('my-button');
});

このコードの説明

MyButton.js ファイルは、MyButton コンポーネントを定義します。このコンポーネントは、className="my-button" を持つボタンをレンダリングします。
MyButton.test.js ファイルは、MyButton コンポーネントのテストを定義します。
test('MyButton should have the correct className') は、テストケースを定義します。
const { getByRole } = render(<MyButton />); は、MyButton コンポーネントをレンダリングし、getByRole 関数を取得します。
const element = getByRole('button'); は、ボタン要素を取得します。
const className = element.className; は、ボタン要素の className プロパティを取得します。
expect(className).toBe('my-button'); は、取得した className が "my-button" であることを検証します。

このサンプルコードをどのように拡張できますか？

さまざまな種類の要素 (例: リンク、画像) の className をテストする。
複数の className を持つ要素をテストする。
toHaveClass matcher を使って、複雑な className をテストする。
テスト対象の要素が DOM に存在しない場合のテストを記述する。

Jest と React Testing Library 以外の className テスト方法

Enzyme は、React コンポーネントをテストするためのもう一つの人気のあるライブラリです。Jest と同様に、Enzyme を使用して className をテストすることができます。

import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import MyComponent from './MyComponent';

Enzyme.configure({ adapter: new Adapter() });

test('MyComponent should have the correct className', () => {
  const component = Enzyme.shallow(<MyComponent />);
  const element = component.find('.my-button');

  expect(element.hasClass('my-button')).toBe(true);
});

react-test-renderer は、React コンポーネントをレンダリングしてテストするためのライブラリです。className をテストするために使用することもできます。

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

test('MyComponent should have the correct className', () => {
  const renderer = ReactTestRenderer.create(<MyComponent />);
  const tree = renderer.toJSON();

  expect(tree.className).toBe('my-button');
});

セレクター

CSS セレクターを使用して、テスト対象の要素を選択し、その className を検証することもできます。

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

test('MyComponent should have the correct className', () => {
  const { getByTestId } = render(<MyComponent />);
  const element = getByTestId('my-button');

  expect(element.classList.contains('my-button')).toBe(true);
});

使用する方法は、個人の好みとプロジェクトの要件によって異なります。Jest と React Testing Library は、シンプルなテストケースには軽量で使いやすいオプションです。Enzyme は、より複雑なテストケースやコンポーネントの内部構造をテストする必要がある場合に適しています。react-test-renderer は、コンポーネントをスナップショットとして保存する必要がある場合に役立ちます。CSS セレクターは、シンプルな className テストに適していますが、コンポーネントの内部構造にアクセスできないという制限があります。

Jest と React Testing Library は、React コンポーネントの className をテストするための強力なツールですが、他の選択肢も検討する価値があります。最適な方法は、個々のニーズと要件によって異なります。

javascript reactjs jestjs