【React】ボタンアクションのテストを実装するよ！！ライブラリを使う！

投稿者 投稿日:

JavaのjunitのようにReactでもテストを実装したい。。。！

Reactでもできます！！

今回はボタンアクションのテストを紹介します

Reactでボタンアクションのテストを行うには、@testing-library/reactを使用するのが一般的です

以下に、JestとTesting Libraryを使って、ボタンのクリックアクションをテストする例を示します

ライブラリをインストール

@testing-library/react と @testing-library/jest-dom をインストールします

npm install --save-dev @testing-library/react @testing-library/jest-dom

コンポーネント例

import React, { useState } from 'react';

export function ButtonComponent() {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(true);
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      {clicked && <p>Button was clicked!</p>}
    </div>
  );
}

テスト実装（ButtonComponent.test.js）

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

test('button click updates the text', () => {
  render(<ButtonComponent />);
  
  // ボタンがレンダリングされているか確認
  const buttonElement = screen.getByText('Click Me');
  expect(buttonElement).toBeInTheDocument();

  // ボタンをクリック
  fireEvent.click(buttonElement);

  // テキストが更新されたか確認
  const textElement = screen.getByText('Button was clicked!');
  expect(textElement).toBeInTheDocument();
});
  1. レンダリング: ButtonComponentを仮想DOMにレンダリングします
  2. 要素取得: ボタン要素をテキスト（Click Me）で取得し、テスト対象であることを確認します
  3. イベントシミュレーション: fireEvent.clickでボタンがクリックされた状態を再現します
  4. 状態変化の確認: クリックによって表示される新しいテキストが、正しくDOMに追加されたかを確認します

ボタンがクリックされた後に状態が変化するかどうかを検証してみてください

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon