Testing Libraryからの移行

移行の原則

このガイドでは、Playwrightの実験的コンポーネントテストへの移行について、DOM Testing Library、React Testing Library、Vue Testing Library、およびSvelte Testing Libraryを対象に説明します。

注記

ブラウザでDOM Testing Libraryを使用している場合（例えば、webpackでエンドツーエンドテストをバンドルしている場合）、Playwright Testに直接切り替えることができます。以下の例はコンポーネントテストに焦点を当てていますが、エンドツーエンドテストの場合は、テスト対象ページを開くためにawait mountをawait page.goto('https://:3000/')に置き換えるだけです。

チートシート

Testing Library	Playwright
screen	page および component
queries	locators
async helpers	assertions
user events	actions
await user.click(screen.getByText('Click me'))	await component.getByText('Click me').click()
await user.click(await screen.findByText('Click me'))	await component.getByText('Click me').click()
await user.type(screen.getByLabelText('Password'), 'secret')	await component.getByLabel('Password').fill('secret')
expect(screen.getByLabelText('Password')).toHaveValue('secret')	await expect(component.getByLabel('Password')).toHaveValue('secret')
screen.getByRole('button', { pressed: true })	component.getByRole('button', { pressed: true })
screen.getByLabelText('...')	component.getByLabel('...')
screen.queryByPlaceholderText('...')	component.getByPlaceholder('...')
screen.findByText('...')	component.getByText('...')
screen.getByTestId('...')	component.getByTestId('...')
render(<Component />);	mount(<Component />);
const { unmount } = render(<Component />);	const { unmount } = await mount(<Component />);
const { rerender } = render(<Component />);	const { update } = await mount(<Component />);

例

Testing Library

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

test('sign in', async () => {
  // Setup the page.
  const user = userEvent.setup();
  render(<SignInPage />);

  // Perform actions.
  await user.type(screen.getByLabelText('Username'), 'John');
  await user.type(screen.getByLabelText('Password'), 'secret');
  await user.click(screen.getByRole('button', { name: 'Sign in' }));

  // Verify signed in state by waiting until "Welcome" message appears.
  expect(await screen.findByText('Welcome, John')).toBeInTheDocument();
});

Playwright Testへの行ごとの移行

const { test, expect } = require('@playwright/experimental-ct-react'); // 1

test('sign in', async ({ mount }) => { // 2
  // Setup the page.
  const component = await mount(<SignInPage />); // 3

  // Perform actions.
  await component.getByLabel('Username').fill('John'); // 4
  await component.getByLabel('Password').fill('secret');
  await component.getByRole('button', { name: 'Sign in' }).click();

  // Verify signed in state by waiting until "Welcome" message appears.
  await expect(component.getByText('Welcome, John')).toBeVisible(); // 5
});

移行のハイライト（Playwright Testのコードスニペットのインラインコメントを参照）

1. コンポーネントテストの場合は@playwright/experimental-ct-react（または-vue、-svelte）から、エンドツーエンドテストの場合は@playwright/testからすべてをインポートします。
2. テスト関数には、他のテストから隔離されたpageと、このページでコンポーネントをレンダリングするmountが与えられます。これらはPlaywright Testの便利なフィクスチャの2つです。
3. renderをコンポーネントロケーターを返すmountに置き換えます。
4. locator.locator()またはpage.locator()で作成されたロケーターを使用して、ほとんどのアクションを実行します。
5. アサーションを使用して状態を検証します。

クエリの移行

getBy...、findBy...、queryBy...のようなすべてのクエリとその複数要素の対応物は、component.getBy...ロケーターに置き換えられます。ロケーターは常に自動で待機し、必要に応じてリトライするため、適切なメソッドを選択することを心配する必要はありません。リスト操作（例：テキストのリストをアサートする）を行いたい場合、Playwrightは自動的に複数要素操作を実行します。

waitForの置き換え

Playwrightには、条件を自動的に待機するアサーションが含まれているため、通常は明示的なwaitFor/waitForElementToBeRemoved呼び出しは必要ありません。

// Testing Library
await waitFor(() => {
  expect(getByText('the lion king')).toBeInTheDocument();
});
await waitForElementToBeRemoved(() => queryByText('the mummy'));

// Playwright
await expect(page.getByText('the lion king')).toBeVisible();
await expect(page.getByText('the mummy')).toBeHidden();

適切なアサーションが見つからない場合は、代わりにexpect.pollを使用してください。

await expect.poll(async () => {
  const response = await page.request.get('https://api.example.com');
  return response.status();
}).toBe(200);

withinの置き換え

locator.locator()メソッドを使用して、別のロケーター内にロケーターを作成できます。

// Testing Library
const messages = document.getElementById('messages');
const helloMessage = within(messages).getByText('hello');

// Playwright
const messages = component.getByTestId('messages');
const helloMessage = messages.getByText('hello');

Playwright Testのスーパーパワー

Playwright Testに移行すれば、多くのメリットが得られます！

• ゼロ設定のTypeScriptサポート
• すべてのウェブエンジン（Chrome、Firefox、Safari）とあらゆる人気オペレーティングシステム（Windows、macOS、Ubuntu）でテストを実行
• 複数のオリジン、(i)フレーム、タブとコンテキストの完全サポート
• 複数のブラウザでテストを並列かつ分離して実行
• テストアーティファクト収集を内蔵

さらに、Playwright Testにバンドルされているこれらすべての✨素晴らしいツール✨も利用できます

• Visual Studio Codeとの連携
• タイムトラベル体験とウォッチモードを備えたテストデバッグ用のUIモード。
• Playwright Inspector
• Playwright Testコード生成
• 事後デバッグ用のPlaywright Tracing

さらに読む

Playwright Testランナーについてさらに詳しく

• はじめに
• 実験的コンポーネントテスト
• ロケーター
• アサーション
• オートウェイティング