From 9ce41fa1b09b16de311e93a0cf29eaacaaf8aa56 Mon Sep 17 00:00:00 2001
From: Sander <info@mesander.com>
Date: Tue, 14 May 2024 20:03:46 +0200
Subject: [PATCH] fix(ct): mount then unmount then mount (#30657)

closes https://github.com/microsoft/playwright/issues/30628
---
 .../playwright-ct-react17/registerSource.mjs    |  2 ++
 .../ct-react-vite/tests/unmount.spec.tsx        |  7 +++++++
 .../ct-react17/tests/unmount.spec.tsx           |  7 +++++++
 .../components/ct-solid/tests/unmount.spec.tsx  |  7 +++++++
 .../ct-svelte-vite/tests/unmount.spec.ts        | 15 +++++++++++++++
 .../ct-vue-vite/tests/unmount/unmount.spec.js   | 17 +++++++++++++++++
 .../ct-vue-vite/tests/unmount/unmount.spec.ts   | 15 +++++++++++++++
 .../ct-vue-vite/tests/unmount/unmount.spec.tsx  |  7 +++++++
 .../ct-vue2-cli/tests/unmount/unmount.spec.ts   | 15 +++++++++++++++
 .../ct-vue2-cli/tests/unmount/unmount.spec.tsx  |  7 +++++++
 10 files changed, 99 insertions(+)

diff --git a/packages/playwright-ct-react17/registerSource.mjs b/packages/playwright-ct-react17/registerSource.mjs
index 1c484b2b12..50a888b92a 100644
--- a/packages/playwright-ct-react17/registerSource.mjs
+++ b/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) => {
diff --git a/tests/components/ct-react-vite/tests/unmount.spec.tsx b/tests/components/ct-react-vite/tests/unmount.spec.tsx
index 20374d8b8e..4ce2d45889 100644
--- a/tests/components/ct-react-vite/tests/unmount.spec.tsx
+++ b/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');
+});
diff --git a/tests/components/ct-react17/tests/unmount.spec.tsx b/tests/components/ct-react17/tests/unmount.spec.tsx
index 8f55829da5..1f5c0953c9 100644
--- a/tests/components/ct-react17/tests/unmount.spec.tsx
+++ b/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');
+});
diff --git a/tests/components/ct-solid/tests/unmount.spec.tsx b/tests/components/ct-solid/tests/unmount.spec.tsx
index 5bb38c641b..b62dd0bc55 100644
--- a/tests/components/ct-solid/tests/unmount.spec.tsx
+++ b/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');
+});
diff --git a/tests/components/ct-svelte-vite/tests/unmount.spec.ts b/tests/components/ct-svelte-vite/tests/unmount.spec.ts
index 23e53b8529..946fc659e5 100644
--- a/tests/components/ct-svelte-vite/tests/unmount.spec.ts
+++ b/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');
+});
diff --git a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.js b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.js
index f4a877a72c..d527b9d7ce 100644
--- a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.js
+++ b/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');
+});
+
diff --git a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts
index 2eb99ccd82..322460f7aa 100644
--- a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.ts
+++ b/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');
+});
diff --git a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx b/tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx
index f4a51893f1..cf0704e674 100644
--- a/tests/components/ct-vue-vite/tests/unmount/unmount.spec.tsx
+++ b/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');
+});
diff --git a/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.ts b/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.ts
index 4ed68f6c3f..d110f44358 100644
--- a/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.ts
+++ b/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');
+});
diff --git a/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.tsx b/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.tsx
index 224a601183..683aa31bda 100644
--- a/tests/components/ct-vue2-cli/tests/unmount/unmount.spec.tsx
+++ b/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');
+});