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
クエリ	ロケーター
非同期ヘルパー	アサーション
ユーザーイベント	アクション
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 インスペクター
• Playwright Test のコード生成
• 事後デバッグのためのPlaywright Tracing

さらに読む

Playwright Test ランナーについて詳しく学ぶ

• はじめに
• 実験的コンポーネントテスト
• ロケーター
• アサーション
• 自動待機