ReactアプリケーションのコンポーネントテストをPlaywrightを使用して実装する方法

作者は、書き物寄付プログラムの一環として、Open Sourcing Mental Illnessを寄付の対象に選びました。

以下は日本語で自然な表現に言い換えたものです。１つのオプションを提供します。

紹介

ソフトウェア製品が期待どおりに動作することを確認するために、テストは非常に重要です。従来、QAチームはウェブアプリケーションのエンドツーエンドのテストを手動で実行することが多かったです。しかし、QAチームはテストのデータの準備、テストの実装、そしてテストの維持に多くの時間をかけています。また、これらのテストは複数のサービス、サードパーティの依存関係、およびデータベース間の統合を必要とするため、不安定です。これらの問題から、ウェブアプリケーションのコンポーネントテストが重要であり、ソフトウェア開発者とQAエンジニアの両方からますます注目されています。コンポーネントテストにより、彼らはグラフィカルユーザーインターフェース（GUI）を早期にテストすることができ、テストの実装、作成、実行、および維持に必要な時間と労力を削減することができます。

最近、一般的なウェブブラウザとのエンドツーエンドテストや対話的なテストに便利なツールであるPlaywrightが、コンポーネントテストをサポートし始めました。Playwrightは、バックエンドサービスの完了を待たずにGUIのテストを開発者が記述できるだけでなく、モックサーバに大量のモックAPIを作成する必要もありません。さらに、PlaywrightはReactという人気のあるウェブフレームワークをはじめとするいくつかのウェブフレームワークのコンポーネントテストをサポートしています。また、Chromium、Firefox、およびWebKitベースのブラウザなどの主要なブラウザもサポートしています。Playwrightでは、Java、Python、C＃、またはNode.jsなどの複数のクライアント言語を使用してテストを記述することもできます。

このチュートリアルでは、既存のReactアプリケーションにPlaywrightを使用してコンポーネントテストを実装します。Reactを使用して天気アプリをデプロイし、その後、Playwrightを使用してアプリのコンポーネントテストを書き、実行して、コンポーネントが正常に動作していることを確認します。

前提条件

このチュートリアルに従うためには、以下のものが必要です。

• An Ubuntu 20.04 server with a sudo-enabled, non-root user and at least 2GB of RAM. To get started, follow our Initial Server Setup Guide for Ubuntu 20.04.
• Node.js version 16 or greater set up on your server. To install Node.js, follow Option 2 of our tutorial How To Install Node.js on Ubuntu 20.04 to ensure you are installing the correct version.
• Git installed on the server. Read our tutorial How To Install Git on Ubuntu 20.04 to install Git if it is not already installed.
• Familiarity with front-end development using JavaScript with React.
• Knowledge of end-to-end testing, unit testing, and API testing.

ステップ1 — Reactを使用して天気アプリを展開する。

この手順では、このチュートリアルで必要なReactベースの天気アプリを展開します。このアプリは、OpenWeatherのAPIの無料バージョンを使用して、任意の都市の現在の天気データにアクセスします。

アプリをサーバーに配置するために、まず新しいディレクトリを作成してアプリケーションのコードを保存します。その後、新しく作成したディレクトリに移動してください。 “Projects” はご希望のディレクトリ名で置き換えてください。

mkdir Projects
cd Projects

次に、GitHubからアプリケーションのコードをクローンしてください。

git clone https://github.com/do-community/react-component-testing-demo.git

その後、react-component-testing-demoディレクトリに移動して、git checkoutコマンドを使用してアプリのブランチをチェックアウトしてください。

cd react-component-testing-demo
git checkout app

次に、天気アプリケーションの依存関係をインストールしてください。

npm install

インストールが完了したら、アプリケーションを開きましょう。

npm run start

コンソールには、次の出力が表示されます。

Compiled successfully! You can now view demo-playwright-component-testing in the browser. Local: http://localhost:3000/demo-playwright-component-testing On Your Network: http://192.168.1.7:3000/demo-playwright-component-testing Note that the development build is not optimized.

お使いのブラウザーによりアプリケーションのホームページが開かれ、ユーザーは天気を確認したい都市を入力するための都市検索ボックスが表示されます。

検索ボックスにハノイ（ベトナムにある都市）と入力してください。アプリはハノイの現在の天気を表示します。

結果によれば、検索が実行された時点で、ベトナムのハノイの天気は27°Cで、散在する雲がありました。日没は17:38に起こり、湿度は70%、風速は秒速2.8メートル（m/s）、そして気圧は1,016ヘクトパスカル（hPa）でした。

アプリケーションのデプロイが成功したので、テスト用の依存関係をインストールします。

ステップ2 — テストの依存関係をインストールする

このステップでは、テストの依存関係をインストールして、後でステップ3でPlaywrightを使用したコンポーネントテストを実装する準備をします。

始めるために、以下のコマンドを実行してください。

npm init playwright@latest -- --ct

このコマンドは、Playwrightを使用してテストを作成するためのコード生成プロセスを開始します。選択したオプションに基づいて、TypeScriptを使用するかJavaScriptを使用するか、または開発のためにReactフレームワークを使用するかVueフレームワークを使用するかによって、自動生成されるコードは異なります。

コンソールには次の出力が表示されます。

Need to install the following packages: create-playwright@1.17.123 Ok to proceed? (y)

Yを押してからエンターキーを押して進んでください。その後、プロジェクトでTypeScriptまたはJavaScriptを使用するか選択するオプションが表示されます。

Getting started with writing end-to-end tests with Playwright: Initializing project in ‘.’ ? Do you want to use TypeScript or JavaScript? … TypeScript ▸ JavaScript

ステップ3では、コンポーネントのテストにはJavaScriptを選択してください。その後、出力で使用するフレームワークを選択するようになります。

? Which framework do you use? (experimental) … ▸ react vue svelte

Reactを選択してください。天気アプリケーションはそれを使用しています。出力では、Playwrightブラウザをインストールするかどうかを尋ねます。

? Install Playwright browsers (can be done manually via ‘npx playwright install’)? (Y/n) ‣ true

手動で後でインストールする必要がないように、それらをインストールするためにYを選択してください。

次に、オペレーティングシステムの依存関係をインストールするかどうか尋ねられます。

Install Playwright operating system dependencies (requires sudo / root – can be done manually via ‘sudo npx playwright install-deps’)? (y/N) ‣ yes

手動で依存関係をインストールする必要がないように、Yを選んでください。ただし、システムの依存関係をインストールするために、現在実行中のマシンのユーザーパスワードを入力する必要があります。

必要な依存関係がインストールされ、Chromium、Firefox、およびWebKitの3つのブラウザもインストールされます。さらに、テスト中にコンポーネントをレンダリングするために必要なindex.htmlとindex.jsファイルからなるplaywrightという名前の新しいディレクトリが作成されます。また、コンポーネントテストを実行するためのplaywright-ct.config.jsという新しい設定ファイルも生成されます。この設定ファイルをカスタマイズすることで、コンポーネントテストの動作を変更することができます。たとえば、Chromiumブラウザでのみ実行するかどうかなどの設定が可能です。

今、コンポーネントテストの依存関係の設定が完了しました。次のステップでは、2つの天気アプリのコンポーネントのテストを書きます。

ステップ3- CityComponentの部品テストを作成する。

天気アプリは、CityComponentとWeatherInfoComponentの2つのコンポーネントで構成されています。このステップでは、CityComponentのコンポーネントテストのスクリプトを書きます。このコードでは、CityComponentのための2つのテストを書きます。最初のテストでは、都市の入力ボックスがテキスト入力を受け付けるかどうかを確認します。2番目のテストでは、検索ボタンがクリックされた後にfetchWeatherメソッドが実行されるかどうかを確認します。

最初に、srcディレクトリに移動してください。

cd src

では、テストを保存するためにテストディレクトリを作成しましょう。

mkdir tests

次に、新しく作成されたディレクトリに移動してください。

cd tests

今、testsディレクトリに移動し、nanoまたはお好みのコードエディタを使用してCityComponent.spec.jsxという新しいテストファイルを作成し、開きます。

nano CityComponent.spec.jsx

各テストフレームワークは、テストファイルを収集して実行する際、テストランナーがファイルを探す場所を知るために定義された構文を持っています。Playwrightの場合、フレームワークは*.spec.*ファイルを探し、それらをテストファイルとして扱います。

.jsx拡張子はJavaScript XMLの略で、JavaScriptファイル内にHTMLタグを追加することができます。 .jsxファイルを使用することで、CityComponentをテストにマウントすることができ、それはCityComponentのタグを追加することで実現できます。

今、作成したCityComponent.spec.jsxファイルの構築を始めます。以下のコードをファイルに追加してください。

import { test, expect } from '@playwright/experimental-ct-react';
import { CityComponent } from '../modules/CityComponent';

このコードでは、テストを実行するために@playwright/experimental-ct-reactライブラリからテストとexpectメソッドをインポートしています。また、後でテストにマウントするためにCityComponentをインポートしています。

2番目のインポートコマンドを使用することで、CityComponentファイルをsrc/modulesディレクトリ内に配置します。このファイルは、検索ページのコードを実装しており、ユーザーが都市名を入力してその都市の天気を検索することができます。

次に、CityComponent.spec.jsxファイルに以下のコードを追加してください。

...

const cityLocator = '[placeholder="City"]'
const searchButtonLocator = '[type="submit"]'

const cityName = 'Hanoi'

Playwrightでは、操作したいUI要素と連動するために、その要素のUIロケーターを持っている必要があります。ここでは、cityLocatorとsearchButtonLocatorという2つのconst変数を定義しています。constキーワードは、定数変数を示し、初期値を割り当てた後に値を変更できないことを意味しています。[placeholder=”City”]および[type=”submit”]は、CityComponent内のテキスト入力と検索ボタンのCSSロケーターです。

コードの3行目では、お探しの都市名であるハノイを保存するために、新しい変数cityNameを作成しています。

次に、CityComponent.spec.jsxファイルに最初のテストコードブロックを追加します。このブロックでは、cityFieldがテキスト値を受け付けるかどうかをチェックします。以下のコードをファイルに追加してください。

...

test('cityField accepts text input', async ({ mount }) => {
    const cityComponent = await mount(<CityComponent /> );
    const cityField = cityComponent.locator(cityLocator)
    
    await cityField.fill(cityName)

    await expect(cityField).toHaveValue(cityName)
});

テストコードブロック内では、マウントメソッドを非同期関数のパラメータとして追加しています。このマウントメソッドは、Step 2でnpm init playwright@latest — –ctを使用してインストールしたexperimental-ct-reactから提供されます。マウントメソッドを使用することで、Reactコンポーネントをアプリ内にマウントし、マウントされたコンポーネントのテストを実装することができます。

テストブロック「test(‘cityField accepts text input’, async ({ mount }) => { ..})」にasyncキーワードを追加することで、Playwrightに対してこのテストを非同期で実行するように指示しています。非同期アプローチでは、コードの各行が順番に実行されるのを待つ必要はありません。代わりに、コードが並行して実行されます。これにより、テストがより速く実行されます。

次に、CityComponentタグをmountメソッドに追加することで、cityComponentを定義します。Reactフレームワークは非同期でコードを実行するため、Reactコンポーネントを使用する際には、mount前にawaitキーワードを追加する必要があります。awaitキーワードを使用することで、PlaywrightはマウントされたCityComponentのコードが完了するのを待ってから、マウントされた値をcityComponent変数に代入します。

それから、作成したcityLocator変数を使用して、cityFieldを見つけます。

最後に、cityNameの値でcityFieldを埋め、cityFieldとcityNameが同じ値かどうかを確認します。ここで`await`キーワードを使用することで、cityFieldにcityNameが入力される前にcityFieldがcityNameの値を持つかどうかをチェックします。

あなたは今、CityComponent.spec.jsxファイルに2番目のテストコードブロックを追加します。このコードブロックは、検索ボタンがfetchWeatherメソッドを呼び出すかどうかをチェックします。以下のコードをファイルに追加してください。

...

test('Click on `Search` button executes fetchWeather prop', async ({ mount }) => {
    let isCalled = false
    const cityComponent = await mount(
        <CityComponent
        fetchWeather={() => isCalled = true}
        />
    );

    await cityComponent.locator(cityLocator).fill(cityName)
    await cityComponent.locator(searchButtonLocator).click()

    expect(isCalled).toBeTruthy()
});

第二のテストブロックでも、最初のテストブロックと同様に、マウントメソッドを非同期関数のパラメータとして追加します。test(‘Click on Search button executes fetchWeather prop’, async ({ mount })というテストブロックにasyncキーワードを追加することで、Playwrightにこのテストを非同期で実行するように指示しています。

テスト関数では、まずisCalledという新しい変数を作成します。これにより、後でfetchWeatherメソッドが呼ばれたかどうかを確認できます。let変数は新しい変数を定義し、変数の値を変更することができますが、const変数では変数の値を変更することはできません。

それから、cityComponentを定義し、実際のCityComponentをインジェクトするためにmountメソッドに割り当てます。CityComponentタグの中にfetchWeather={() => isCalled = true}の行を追加します。これは、fetchWeatherメソッドが呼び出される場合、isCalledの値がtrueに更新されることを意味します。

次に、cityNameで都市のテキスト入力を埋め、その後、クリックメソッドを使用してUIページの検索ボタンをクリックするユーザーのアクションをシミュレートします。

最後に、toBeTruthyメソッドを使用して、isCalled変数が真かどうかを確認します。

この時点では、あなたのファイルには以下のコードが含まれています。

import { test, expect } from '@playwright/experimental-ct-react';
import { CityComponent } from '../modules/CityComponent';

const cityLocator = '[placeholder="City"]'
const searchButtonLocator = '[type="submit"]'

const cityName = 'Hanoi'

test('cityField accepts text input', async ({ mount }) => {
    const cityComponent = await mount(<CityComponent /> );
    const cityField = cityComponent.locator(cityLocator)
    
    await cityField.fill(cityName)

    await expect(cityField).toHaveValue(cityName)
});

test('Click on `Search` button executes fetchWeather prop', async ({ mount }) => {
    let isCalled = false
    const cityComponent = await mount(
        <CityComponent
        fetchWeather={() => isCalled = true}
        />
    );

    await cityComponent.locator(cityLocator).fill(cityName)
    await cityComponent.locator(searchButtonLocator).click()

    expect(isCalled).toBeTruthy()
});

ファイルを保存して閉じてください。もしnanoを使用している場合は、Ctrl+Xを押して保存して終了してください。

現在、CityComponentのコンポーネントテストのスクリプトを作成しました。このテストには2つのテストブロックがあります。1つは、都市の入力ボックスが「Hanoi」という入力を受け付けるかを確認するものであり、もう1つは、検索ボタンがクリックされた後にfetchWeatherメソッドが実行されるかをテストするものです。次のステップでは、2番目の天気アプリコンポーネントであるWeatherInfoComponentのコンポーネントテストを作成します。

ステップ4—WeatherInfoComponentのコンポーネントテストを書く

このステップでは、あなたがテストしている天気アプリの2番目のコンポーネント、WeatherInfoComponentのテストを書きます。このテストでは、weatherInfoの入力としてHanoiを受け取った後、weatherComponentがテキスト「Hanoi」を含んでいるかどうかを確認します。

最初に、testsディレクトリに移動して、WeatherInfoComponent.spec.jsxという新しいテストファイルを作成して開いてください。

nano WeatherInfoComponent.spec.jsx

WeatherInfoComponent.spec.jsx ファイルに以下のコンテンツを追加してください。

import { test, expect } from '@playwright/experimental-ct-react';
import { WeatherComponent } from '../modules/WeatherInfoComponent';

ここでは、@playwright/experimental-ct-reactライブラリからテストと期待するメソッドをインポートしています。これにより、Playwrightでコンポーネントテストを実行することができます。

次に、WeatherInfoComponentをインポートしてテストにWeatherComponentをマウントしてください。WeatherInfoComponentファイルは、ユーザーが提供した都市の天気を表示する結果ページを作成し、src/modulesディレクトリ内に配置されています。

次に、テストファイルのWeatherInfoComponent.spec.jsxに以下のコードブロックを追加してください。

...

test('WeatherInfo accepts name and value', async ({ mount }) => {
    const weatherInfo = {"coord":{"lon":105.8412,"lat":21.0245},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":302.15,"feels_like":301.35,"temp_min":302.15,"temp_max":302.15,"pressure":1003,"humidity":35,"sea_level":1003,"grnd_level":1002},"visibility":10000,"wind":{"speed":2.71,"deg":73,"gust":3.29},"clouds":{"all":0},"dt":1673694125,"sys":{"type":1,"id":9308,"country":"VN","sunrise":1673652961,"sunset":1673692464},"timezone":25200,"id":1581130,"name":"Hanoi","cod":200}
    const weatherComponent = await mount(<WeatherComponent
    weather={(weatherInfo)}
    /> );
    await expect(weatherComponent).toContainText('Hanoi')
});

ここでは、weatherInfoという定数の変数を定義します。constは定数変数なので、初期値を割り当てた後は値を変更することはできません。この場合、weatherInfoの値はJSON形式でのハノイの天気情報になります。

その後、WeatherComponentから値を取得するweatherComponentという別の定数を定義します。

Reactフレームワークはコードを非同期で実行するため、WeatherComponentをマウントする際にはawaitを使用する必要があります。これにより、ReactがWeatherComponentの作成を完全に終了するまでコードの実行を待つように指示します。

最終的に、await expect(weatherComponent).toContainText(‘Hanoi’)の中で、weatherComponent変数がテキスト「Hanoi」を含んでいるかどうかを確認しています。ここではawaitを使用する必要があります。Playwrightも非同期でコードを実行するため、awaitを使うことで、weatherComponent変数がWeatherComponentからの値を受け取った後に、weatherComponentがテキスト「Hanoi」を含んでいるかどうかを確認します。

あなたの完全なWeatherInfoComponent.spec.jsxファイルには、以下のコード行が含まれるでしょう。

import { test, expect } from '@playwright/experimental-ct-react';
import { WeatherComponent } from '../modules/WeatherInfoComponent';


test('WeatherInfo accepts name and value', async ({ mount }) => {
    const weatherInfo = {"coord":{"lon":105.8412,"lat":21.0245},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":302.15,"feels_like":301.35,"temp_min":302.15,"temp_max":302.15,"pressure":1003,"humidity":35,"sea_level":1003,"grnd_level":1002},"visibility":10000,"wind":{"speed":2.71,"deg":73,"gust":3.29},"clouds":{"all":0},"dt":1673694125,"sys":{"type":1,"id":9308,"country":"VN","sunrise":1673652961,"sunset":1673692464},"timezone":25200,"id":1581130,"name":"Hanoi","cod":200}
    const weatherComponent = await mount(<WeatherComponent
    weather={(weatherInfo)}
    /> );
    await expect(weatherComponent).toContainText('Hanoi')
});

CTRL+Xを押して、ファイルを保存して終了してください。

あなたは今、WeatherInfoComponentのテストの作成を終えました。次に、インストールされている3つのブラウザに対して、CityComponentとWeatherInfoComponentのテストを実行します。
(Anata wa ima, WeatherInfoComponent no tesuto no sakusei o oeta. Tsugi ni, insutoru sarete iru mitsu no burauza ni taishite, CityComponent to WeatherInfoComponent no tesuto o jikkō shimasu.)

ステップ5 — コンポーネントテストを実行する

この手順では、Chromium、Firefox、およびWebKitの3つのインストールされたブラウザでCityComponentおよびWeatherInfoComponentのテストを実行し、これらの2つのコンポーネントがそれらのブラウザ上で適切に動作することを確認します。

最初に、ルートプロジェクトディレクトリに移動します。

cd ../..

上記のコマンドを実行すると、react-component-testing-demoフォルダーに移動します。その後、以下のコマンドを実行してテストを実行してください。

npm run test-ct

脚本家は、2つのテストファイルをChromium、Firefox、およびWebKitの3つのブラウザで実行します。次の出力に似た結果が得られます。

Running 9 tests using 2 workers

vite v3.2.5 building for production...
✓ 89 modules transformed.
playwright/.cache/playwright/index.html      0.32 KiB
playwright/.cache/assets/index.2b5442e2.js   313.68 KiB / gzip: 81.07 KiB

  9 passed (12s)

To open last HTML report run:

  npx playwright show-report

レポートをGUI形式で表示するには、次のコマンドを実行してください。

npx playwright show-report

テストレポートの概要は、ブラウザーに表示されます。

テストレポートは、以下の3つの異なるテストに分かれています： cityFieldはテキスト入力を受け入れ、SearchボタンをクリックするとfetchWeatherのプロップが実行されます。そしてWeatherInfoは名前と値を受け入れます。各テストは、テストの実行にかかった全体の時間と、各ブラウザのテストにかかった時間を表示します。

各テストをクリックすると、たとえばcityFieldがテキスト入力を受け付けるテストの詳細な時間とコードの行数が表示されます。

結果から、Cityコンポーネントのテストは、Chromium上でテキストを入力として受け入れるCity入力ボックスのテストが成功したことが示されました。詳細セクションでは、デフォルトでテストの実行手順にはBefore HooksとAfter Hooksのステップが表示されます。Before Hooksセクションは、通常、コンソールへのログインやテストデータの読み取りなどの初期セットアップに使用されます。テストの実行後、After Hooksセクションでは、テスト環境でのテストデータのクリーンアップが行われることがよくあります。

locator.fill()行は、要素がテストの実装でどのように見つかるかを示しています。この場合、要素はCSSセレクタを使用して[placeholder=”City”]の値で見つけられます。

このexpect.toHaveValueの行は、テストのアサーション（検証）を示しています。このテストでは、cityFieldの値がcityNameであることを期待しています。

あなたは現在、天気アプリケーションのCityComponentとWeatherInfoComponentのテストを完全に実装し、Chromium、Firefox、およびWebKitでの動作を確認するためにテストレポートを確認しました。GitHubリポジトリのメインブランチには、アプリケーションとテストの完全なソースコードをチェックできます。

結論

あなたはPlaywrightを使用して、Reactベースの天気アプリのコンポーネントテストを実装しました。まず、CityComponentとWeatherInfoComponentという天気アプリのコンポーネントに必要なテストの依存関係をインストールしました。次に、2つのコンポーネントのテストを作成して実行しました。最後に、コンポーネントが期待どおりに動作するかを確認するために、GUI形式のテストレポートを確認しました。

Playwrightのドキュメンテーションをご覧いただくと、Playwrightがサポートしているコンポーネントテストの機能やその他の機能について詳しく学ぶことができます。