Skip to main content

Миграция с Testing Library

Принципы миграции​

Этот гид описывает миграцию к Экспериментальному тестированию компонентов Playwright с DOM Testing Library, React Testing Library, Vue Testing Library и Svelte Testing Library.

note

Если вы используете DOM Testing Library в браузере (например, вы собираете end-to-end тесты с помощью webpack), вы можете сразу перейти на Playwright Test. Примеры ниже сосредоточены на тестах компонентов, но для end-to-end теста вам просто нужно заменить await mount на await page.goto('http://localhost:3000/'), чтобы открыть страницу, которую вы тестируете.

Шпаргалка​

Testing LibraryPlaywright
screenpage и component
querieslocators
async helpersassertions
user eventsactions
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('вход в систему', async () => {
  // Настройка страницы.
  const user = userEvent.setup();
  render(<SignInPage />);

  // Выполнение действий.
  await user.type(screen.getByLabelText('Username'), 'John');
  await user.type(screen.getByLabelText('Password'), 'secret');
  await user.click(screen.getByRole('button', { name: 'Sign in' }));

  // Проверка состояния входа, ожидая появления сообщения "Добро пожаловать".
  expect(await screen.findByText('Welcome, John')).toBeInTheDocument();
});

Пошаговая миграция на Playwright Test:

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

test('вход в систему', async ({ mount }) => { // 2
  // Настройка страницы.
  const component = await mount(<SignInPage />); // 3

  // Выполнение действий.
  await component.getByLabel('Username').fill('John'); // 4
  await component.getByLabel('Password').fill('secret');
  await component.getByRole('button', { name: 'Sign in' }).click();

  // Проверка состояния входа, ожидая появления сообщения "Добро пожаловать".
  await expect(component.getByText('Welcome, John')).toBeVisible(); // 5
});

Основные моменты миграции (см. встроенные комментарии в коде Playwright Test):

  1. Импортируйте все из @playwright/experimental-ct-react (или -vue, -svelte) для тестов компонентов или из @playwright/test для end-to-end тестов.
  2. Функция теста получает page, которая изолирована от других тестов, и mount, который рендерит компонент на этой странице. Это два из полезных фикстур в Playwright Test.
  3. Замените render на mount, который возвращает локатор компонента.
  4. Используйте локаторы, созданные с помощью locator.locator() или page.locator(), чтобы выполнять большинство действий.
  5. Используйте assertions для проверки состояния.

Миграция запросов​

Все запросы, такие как getBy..., findBy..., queryBy... и их многокомпонентные аналоги, заменяются на локаторы component.getBy.... Локаторы всегда автоматически ждут и повторяют попытки, когда это необходимо, поэтому вам не нужно беспокоиться о выборе правильного метода. Когда вы хотите выполнить операцию со списком, например, проверить список текстов, Playwright автоматически выполняет многокомпонентные операции.

Замена waitFor​

Playwright включает в себя assertions, которые автоматически ждут выполнения условия, поэтому вам обычно не нужно явно вызывать 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)frames, вкладок и контекстов
  • Запуск тестов в изоляции параллельно на нескольких браузерах
  • Встроенный сбор артефактов тестирования

Вы также получаете все эти ✨ потрясающие инструменты ✨, которые идут в комплекте с Playwright Test:

Дальнейшее чтение​

Узнайте больше о тестовом раннере Playwright: