React Testing Library でアンカーの href 属性をテストする方法：初心者から上級者向けガイド

React Testing Library は、React コンポーネントをテストするためのライブラリです。このライブラリを使用して、アンカー要素 (<a>) の href 属性値をテストできます。

方法

以下の手順で、React Testing Library を使用してアンカーの href 属性をテストできます。

1. アンカー要素を取得する

   screen.getByRole() ヘルパーを使用して、アンカー要素を取得します。このヘルパーは、aria-role 属性を使用して要素を取得します。

   const anchor = screen.getByRole('link', { name: 'Click Me' });
   

2. href 属性を確認する

   expect(anchor).toHaveAttribute('href', '/about');
   

例

以下の例は、About ページへのリンクを含むコンポーネントをテストする方法を示しています。

import React from 'react';
import { render, screen } from '@testing-library/react';

const AboutLink = () => {
  return (
    <a href="/about">About</a>
  );
};

test('AboutLink component renders correctly', () => {
  render(<AboutLink />);

  const anchor = screen.getByRole('link', { name: 'Click Me' });
  expect(anchor).toHaveAttribute('href', '/about');
});

補足

• テスト対象のアンカー要素に aria-role="link" 属性が設定されていることを確認してください。
• href 属性値を直接比較する代わりに、toMatchInlineSnapshot() マッチャーを使用して、スナップショットを作成することもできます。

• 上記以外にも、fireEvent() ヘルパーを使用してアンカーをクリックし、遷移先のページをテストすることもできます。
• テスト対象のコンポーネントが複雑な場合は、data-testid 属性を使用して要素を特定することをお勧めします。

import React from 'react';
import { render, screen } from '@testing-library/react';

const AboutLink = () => {
  return (
    <a href="/about">About</a>
  );
};

test('AboutLink component renders correctly', () => {
  render(<AboutLink />);

  const anchor = screen.getByRole('link', { name: 'Click Me' });
  expect(anchor).toHaveAttribute('href', '/about');
});

解説

このコードは、以下のことを行っています。

1. AboutLink コンポーネントを render 関数を使用してレンダリングします。
2. screen.getByRole() ヘルパーを使用して、aria-role 属性が link である要素を取得します。
3. name プロパティが Click Me である要素が取得されていることを確認します。
4. toHaveAttribute() マッチャーを使用して、取得した要素の href 属性値が /about であることを確認します。

• このコードは、Jest と React Testing Library を使用してテストされています。
• テスト対象のコンポーネントは、AboutLink という名前のコンポーネントです。
• テスト対象のコンポーネントは、href="/about" のアンカー要素を含むコンポーネントです。
• テストは、アンカー要素の href 属性値が /about であることを確認します。

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

このサンプルコードを、独自のテストケースで使用できます。サンプルコードをコピーして、テスト対象のコンポーネントと一致するように変更する必要があります。

import React from 'react';
import { render, screen } from '@testing-library/react';

const HomeLink = () => {
  return (
    <a href="/">Home</a>
  );
};

test('HomeLink component renders correctly', () => {
  render(<HomeLink />);

  const anchor = screen.getByRole('link', { name: 'Home' });
  expect(anchor).toHaveAttribute('href', '/');
});

React Testing Library でアンカーの href 属性をテストするその他の方法

getByText() ヘルパーを使用して、アンカー要素内のテキストコンテンツに基づいて要素を取得できます。その後、getAttribute() メソッドを使用して、href 属性値を取得できます。

const anchor = screen.getByText('About');
expect(anchor).toHaveAttribute('href', '/about');

queryByText() ヘルパーは、getByText() ヘルパーと似ていますが、要素が存在しない場合でも null を返します。これは、要素が存在するかどうかをテストする場合に役立ちます。

const anchor = screen.queryByText('About');
if (anchor) {
  expect(anchor).toHaveAttribute('href', '/about');
}

findByRole() ヘルパーは、非同期的に要素を検索します。これは、要素がレンダリングされるまでに時間がかかる場合に役立ちます。

const anchor = await screen.findByRole('link', { name: 'Click Me' });
expect(anchor).toHaveAttribute('href', '/about');

カスタム matcher を使用する

独自の matcher を作成して、href 属性値をテストすることもできます。これにより、より複雑なテストを作成することができます。

expect(anchor).toHaveCustomMatcher((element) => {
  return element.getAttribute('href') === '/about';
});

使用する方法は、テストのニーズによって異なります。

• シンプルでわかりやすいテストの場合は、getByRole() ヘルパーを使用するのがおすすめです。
• 要素がレンダリングされるまでに時間がかかる場合は、findByRole() ヘルパーを使用するのがおすすめです。
• より複雑なテストを作成する場合は、カスタム matcher を使用するのがおすすめです。

• テストは簡潔でわかりやすく記述するように心がけましょう。
• テストを頻繁に実行して、コードの変更による影響を確認しましょう。