fix(ct): mount then unmount then mount (#30657)

closes https://github.com/microsoft/playwright/issues/30628

packages/playwright-ct-react17/registerSource.mjs

@@ -86,6 +86,8 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {
 window.playwrightUnmount = async rootElement => {
   if (!__pwReactDOM.unmountComponentAtNode(rootElement))
     throw new Error('Component was not mounted');
+
+  __pwRootRegistry.delete(rootElement);
 };
 
 window.playwrightUpdate = async (rootElement, component) => {

tests/components/ct-react-vite/tests/unmount.spec.tsx

@@ -23,3 +23,10 @@ test('unmount twice throws an error', async ({ mount }) => {
   await component.unmount();
   await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
 });
+
+test('mount then unmount then mount', async ({ mount }) => {
+  let component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  component = await mount(<Button title="Save" />);
+  await expect(component).toContainText('Save');
+});

tests/components/ct-react17/tests/unmount.spec.tsx

@@ -23,3 +23,10 @@ test('unmount twice throws an error', async ({ mount }) => {
   await component.unmount();
   await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
 });
+
+test('mount then unmount then mount', async ({ mount }) => {
+  let component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  component = await mount(<Button title="Save" />);
+  await expect(component).toContainText('Save');
+});

tests/components/ct-solid/tests/unmount.spec.tsx

@@ -23,3 +23,10 @@ test('unmount twice throws an error', async ({ mount }) => {
   await component.unmount();
   await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
 });
+
+test('mount then unmount then mount', async ({ mount }) => {
+  let component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  component = await mount(<Button title="Save" />);
+  await expect(component).toContainText('Save');
+});

tests/components/ct-svelte-vite/tests/unmount.spec.ts

@@ -31,3 +31,18 @@ test('unmount twice throws an error', async ({ mount }) => {
   await component.unmount();
   await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
 });
+
+test('mount then unmount then mount', async ({ mount }) => {
+  let component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  component = await mount(Button, {
+    props: {
+      title: 'Save',
+    },
+  });
+  await expect(component).toContainText('Save');
+});

tests/components/ct-vue-vite/tests/unmount/unmount.spec.js

@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import MultiRoot from '@/components/MultiRoot.vue';
+import Button from '@/components/Button.vue';
 
 test('unmount a multi root component', async ({ mount, page }) => {
   const component = await mount(MultiRoot);
@@ -9,3 +10,19 @@ test('unmount a multi root component', async ({ mount, page }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('mount then unmount then mount', async ({ mount }) => {
+  let component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  component = await mount(Button, {
+    props: {
+      title: 'Save',
+    },
+  });
+  await expect(component).toContainText('Save');
+});
+

tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts

@@ -31,3 +31,18 @@ test('unmount twice throws an error', async ({ mount }) => {
   await component.unmount();
   await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
 });
+
+test('mount then unmount then mount', async ({ mount }) => {
+  let component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  component = await mount(Button, {
+    props: {
+      title: 'Save',
+    },
+  });
+  await expect(component).toContainText('Save');
+});

tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx

@@ -16,3 +16,10 @@ test('unmount twice throws an error', async ({ mount }) => {
   await component.unmount();
   await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
 });
+
+test('mount then unmount then mount', async ({ mount }) => {
+  let component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  component = await mount(<Button title="Save" />);
+  await expect(component).toContainText('Save');
+});

tests/components/ct-vue2-cli/tests/unmount/unmount.spec.ts

@@ -21,3 +21,18 @@ test('unmount twice throws an error', async ({ mount }) => {
   await component.unmount();
   await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
 });
+
+test('mount then unmount then mount', async ({ mount }) => {
+  let component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  component = await mount(Button, {
+    props: {
+      title: 'Save',
+    },
+  });
+  await expect(component).toContainText('Save');
+});

tests/components/ct-vue2-cli/tests/unmount/unmount.spec.tsx

@@ -13,3 +13,10 @@ test('unmount twice throws an error', async ({ mount }) => {
   await component.unmount();
   await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
 });
+
+test('mount then unmount then mount', async ({ mount }) => {
+  let component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  component = await mount(<Button title="Save" />);
+  await expect(component).toContainText('Save');
+});