Implementation:Microsoft Playwright React17 CT Mount

Overview

React 17 CT Mount provides the browser-side component mounting logic for Playwright's React 17 component testing, using the legacy ReactDOM.render API instead of React 18's createRoot.

Description

This module is the React 17 variant of the component testing mount source. It uses ReactDOM.render and ReactDOM.unmountComponentAtNode instead of the React 18 createRoot API. The JSX transformation logic is similar to the React 18 version, converting Playwright's component descriptors into React.createElement calls.

Key differences from the React 18 version:

• Uses ReactDOM.render(element, container) for mounting
• Uses ReactDOM.unmountComponentAtNode(container) for unmounting
• Does not support React.Fragment via __pw_jsx_fragment
• Update is handled by re-rendering into the same container

Usage

Automatically injected when using @playwright/experimental-ct-react17 for component testing with React 17 projects.

Code Reference

Source Location

packages/playwright-ct-react17/registerSource.mjs (101 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
• rootElement -- DOM element to mount into
• hooksConfig -- lifecycle hook configuration

Outputs

• Rendered React 17 component in the DOM via ReactDOM.render

Related Pages

• Microsoft_Playwright_React_CT_Mount -- React 18+ variant
• Microsoft_Playwright_Vue_CT_Mount -- Vue component testing
• Microsoft_Playwright_Svelte_CT_Mount -- Svelte component testing