Implementation:Microsoft Playwright React CT Mount

Overview

React CT Mount provides the browser-side component mounting logic for Playwright's React component testing, handling JSX rendering, React root management, and component lifecycle via React 18+ createRoot API.

Description

This module is injected into the browser during component testing and implements:

• window.playwrightMount -- mounts a React component into a DOM element using createRoot
• window.playwrightUnmount -- unmounts a previously mounted component
• window.playwrightUpdate -- updates props on a mounted component

The __pwRender function recursively transforms Playwright's JSX representation (with __pw_type: 'jsx' markers) into React.createElement calls. It handles Fragment components, nested children, and key props. A root registry tracks mounted components for update and unmount operations.

Lifecycle hooks (beforeMount, afterMount) are called if registered.

Usage

Automatically injected when using @playwright/experimental-ct-react for component testing.

Code Reference

Source Location

packages/playwright-ct-react/registerSource.mjs (116 lines)

Key Functions

window.playwrightMount = async (component, rootElement, hooksConfig) => { ... }
window.playwrightUnmount = async (rootElement) => { ... }
window.playwrightUpdate = async (rootElement, component) => { ... }

Import

Injected as text into the browser; no direct import.

I/O Contract

Inputs

• component -- Playwright JSX component descriptor with type, props, children, key
• rootElement -- DOM element to mount into
• hooksConfig -- configuration passed to lifecycle hooks

Outputs

• Rendered React component in the DOM
• Registered root for later updates/unmounts

Related Pages

• Microsoft_Playwright_React17_CT_Mount -- React 17 variant using ReactDOM.render
• Microsoft_Playwright_Vue_CT_Mount -- Vue component testing mount
• Microsoft_Playwright_Svelte_CT_Mount -- Svelte component testing mount