[Bug]: Can't unmount -> remount with @playwright/experimental-ct-react17

[cgatl]

Version

1.43.1

Steps to reproduce

Using @playwright/experimental-ct-react17:

1. Mount any component -- const result = await mount(<Component />)
2. Unmount the component -- await result.unmount()
3. Try to mount another component -- await mount(<Component />)
4. You should see an error "Attempting to mount a component into an container that already has a React root"

https://github.com/cgatl/react-ct-17-remount-bug

Expected behavior

The second call to mount should mount the component

Actual behavior

An error is thrown

Additional context

Compare window.playwrightUnmount for ct-react https://github.com/microsoft/playwright/blob/v1.43.1/packages/playwright-ct-react/registerSource.mjs#L84-L91, to the equivalent function for ct-react-17 https://github.com/microsoft/playwright/blob/v1.43.1/packages/playwright-ct-react17/registerSource.mjs. The latter is missing:

  entry.root.unmount();
  __pwRootRegistry.delete(rootElement);

This is why we see "Attempting to mount a component into an container that already has a React root" the next time mount is called https://github.com/microsoft/playwright/blob/v1.43.1/packages/playwright-ct-react/registerSource.mjs#L55.

Possibly the fix is as simple as updating window.playwrightUnmount to match ct-react. edit: not quite, see below

Environment

System:
    OS: macOS 13.6.6
    CPU: (10) x64 Apple M1 Pro
    Memory: 159.00 MB / 32.00 GB
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.10.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.14.0 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
  IDEs:
    VSCode: 1.88.1 - /usr/local/bin/code
  Languages:
    Bash: 3.2.57 - /bin/bash
  npmPackages:
    @playwright/experimental-ct-react17: ^1.43.1 => 1.43.1

[cgatl]

this change (here) appears to fix the issue:

[dgozman]

@cgatl Thank you for the issue, I can repro.