Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

docs(ct): update testing library migration guide (#31222)

Browse source
This commit is contained in:
Sander 2024-06-11 02:20:51 +02:00 committed by GitHub
parent b60f99db36
commit d9ac51bf87
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
docs/src/testing-library-js.md
View file

@ -13,20 +13,25 @@ If you use DOM Testing Library in the browser (for example, you bundle end-to-en
## Cheat Sheet ## Cheat Sheet
| Testing Library | Playwright | | Testing Library | Playwright |
|---------------------------------------------------------|-----------------------------------------------| | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| [screen](https://testing-library.com/docs/queries/about#screen) | [page](./api/class-page) and [component](./api/class-locator) | | [screen](https://testing-library.com/docs/queries/about#screen) | [page](./api/class-page) and [component](./api/class-locator) |
| [queries](https://testing-library.com/docs/queries/about) | [locators](./locators) | | [queries](https://testing-library.com/docs/queries/about) | [locators](./locators) |
| [async helpers](https://testing-library.com/docs/dom-testing-library/api-async) | [assertions](./test-assertions) | | [async helpers](https://testing-library.com/docs/dom-testing-library/api-async) | [assertions](./test-assertions) |
| [user events](https://testing-library.com/docs/user-event/intro) | [actions](./api/class-locator) | | [user events](https://testing-library.com/docs/user-event/intro) | [actions](./api/class-locator) |
| `await user.click(screen.getByText('Click me'))` | `await component.getByText('Click me').click()` | | `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.click(await screen.findByText('Click me'))` | `await component.getByText('Click me').click()` |
| `await user.type(screen.getByLabel('Password'), 'secret')` | `await component.getByLabel('Password').fill('secret')` | | `await user.type(screen.getByLabelText('Password'), 'secret')` | `await component.getByLabel('Password').fill('secret')` |
| `expect(screen.getByLabel('Password')).toHaveValue('secret')` | `await expect(component.getByLabel('Password')).toHaveValue('secret')` | | `expect(screen.getByLabelText('Password')).toHaveValue('secret')` | `await expect(component.getByLabel('Password')).toHaveValue('secret')` |
| `screen.findByText('...')` | `component.getByText('...')` | | `screen.getByRole('button', { pressed: true })` | `component.getByRole('button', { pressed: true })` |
| `screen.getByTestId('...')` | `component.getByTestId('...')` | | `screen.getByLabelText('...')` | `component.getByLabel('...')` |
| `screen.queryByPlaceholderText('...')` | `component.getByPlaceholder('...')` | | `screen.queryByPlaceholderText('...')` | `component.getByPlaceholder('...')` |
| `screen.getByRole('button', { pressed: true })` | `component.getByRole('button', { pressed: true })`| | `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 />);` |
## Example ## Example
@ -37,18 +42,18 @@ import React from 'react';
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event'; import userEvent from '@testing-library/user-event';
test('should sign in', async () => { test('sign in', async () => {
// Setup the page. // Setup the page.
const user = userEvent.setup(); const user = userEvent.setup();
render(<SignInPage />); render(<SignInPage />);
// Perform actions. // Perform actions.
await user.type(screen.getByLabel('Username'), 'John'); await user.type(screen.getByLabelText('Username'), 'John');
await user.type(screen.getByLabel('Password'), 'secret'); await user.type(screen.getByLabelText('Password'), 'secret');
await user.click(screen.getByText('Sign in')); await user.click(screen.getByRole('button', { name: 'Sign in' }));
// Verify signed in state by waiting until "Welcome" message appears. // Verify signed in state by waiting until "Welcome" message appears.
await screen.findByText('Welcome, John'); expect(await screen.findByText('Welcome, John')).toBeInTheDocument();
}); });
``` ```
@ -57,14 +62,14 @@ Line-by-line migration to Playwright Test:
```js ```js
const { test, expect } = require('@playwright/experimental-ct-react'); // 1 const { test, expect } = require('@playwright/experimental-ct-react'); // 1
test('should sign in', async ({ page, mount }) => { // 2 test('sign in', async ({ mount }) => { // 2
// Setup the page. // Setup the page.
const component = await mount(<SignInPage />); // 3 const component = await mount(<SignInPage />); // 3
// Perform actions. // Perform actions.
await component.getByText('Username').fill('John'); // 4 await component.getByLabel('Username').fill('John'); // 4
await component.getByText('Password').fill('secret'); await component.getByLabel('Password').fill('secret');
await component.getByText('Sign in').click(); await component.getByRole('button', { name: 'Sign in' }).click();
// Verify signed in state by waiting until "Welcome" message appears. // Verify signed in state by waiting until "Welcome" message appears.
await expect(component.getByText('Welcome, John')).toBeVisible(); // 5 await expect(component.getByText('Welcome, John')).toBeVisible(); // 5
@ -118,7 +123,7 @@ const messages = document.getElementById('messages');
const helloMessage = within(messages).getByText('hello'); const helloMessage = within(messages).getByText('hello');
// Playwright // Playwright
const messages = component.locator('id=messages'); const messages = component.getByTestId('messages');
const helloMessage = messages.getByText('hello'); const helloMessage = messages.getByText('hello');
``` ```
@ -133,7 +138,9 @@ Once you're on Playwright Test, you get a lot!
- Built-in test [artifact collection](./test-use-options.md#recording-options) - Built-in test [artifact collection](./test-use-options.md#recording-options)
You also get all these ✨ awesome tools ✨ that come bundled with Playwright Test: You also get all these ✨ awesome tools ✨ that come bundled with Playwright Test:
- [Playwright Inspector](./debug.md) - [Visual Studio Code integration](./getting-started-vscode.md)
- [UI mode](./test-ui-mode.md) for debugging tests with a time travel experience complete with watch mode.
- [Playwright Inspector](./debug.md#playwright-inspector)
- [Playwright Test Code generation](./codegen-intro.md) - [Playwright Test Code generation](./codegen-intro.md)
- [Playwright Tracing](./trace-viewer.md) for post-mortem debugging - [Playwright Tracing](./trace-viewer.md) for post-mortem debugging