diff --git a/docs/src/testing-library-js.md b/docs/src/testing-library-js.md
index a5b4350d98..d7f7c05d82 100644
--- a/docs/src/testing-library-js.md
+++ b/docs/src/testing-library-js.md
@@ -13,20 +13,25 @@ If you use DOM Testing Library in the browser (for example, you bundle end-to-en
 
 ## Cheat Sheet
 
-| Testing Library                                         | Playwright                                    |
-|---------------------------------------------------------|-----------------------------------------------|
-| [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) |
-| [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) |
-| `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.getByLabel('Password'), 'secret')` | `await component.getByLabel('Password').fill('secret')` |
-| `expect(screen.getByLabel('Password')).toHaveValue('secret')` | `await expect(component.getByLabel('Password')).toHaveValue('secret')` |
-| `screen.findByText('...')`                              | `component.getByText('...')`                      |
-| `screen.getByTestId('...')`                             | `component.getByTestId('...')`                    |
-| `screen.queryByPlaceholderText('...')`                  | `component.getByPlaceholder('...')`            |
-| `screen.getByRole('button', { pressed: true })`         | `component.getByRole('button', { pressed: true })`|
+| Testing Library                                                                 | Playwright                                                             |
+| ------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| [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)                                                 |
+| [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)                                         |
+| `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 />);`                       |
+
 
 ## Example
 
@@ -37,18 +42,18 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-test('should sign in', async () => {
+test('sign in', async () => {
   // Setup the page.
   const user = userEvent.setup();
   render(<SignInPage />);
 
   // Perform actions.
-  await user.type(screen.getByLabel('Username'), 'John');
-  await user.type(screen.getByLabel('Password'), 'secret');
-  await user.click(screen.getByText('Sign in'));
+  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.
-  await screen.findByText('Welcome, John');
+  expect(await screen.findByText('Welcome, John')).toBeInTheDocument();
 });
 ```
 
@@ -57,14 +62,14 @@ Line-by-line migration to Playwright Test:
 ```js
 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.
   const component = await mount(<SignInPage />); // 3
 
   // Perform actions.
-  await component.getByText('Username').fill('John'); // 4
-  await component.getByText('Password').fill('secret');
-  await component.getByText('Sign in').click();
+  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
@@ -118,7 +123,7 @@ const messages = document.getElementById('messages');
 const helloMessage = within(messages).getByText('hello');
 
 // Playwright
-const messages = component.locator('id=messages');
+const messages = component.getByTestId('messages');
 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)
 
 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 Tracing](./trace-viewer.md) for post-mortem debugging