feat(ct): double unmounting component throws error (#29650)

packages/playwright-ct-solid/registerSource.mjs

@@ -72,6 +72,7 @@ window.playwrightUnmount = async rootElement => {
     throw new Error('Component was not mounted');
 
   unmount();
+  delete rootElement[__pwUnmountKey];
 };
 
 window.playwrightUpdate = async (rootElement, component) => {

packages/playwright-ct-svelte/registerSource.mjs

@@ -108,6 +108,7 @@ window.playwrightUnmount = async rootElement => {
   if (!svelteComponent)
     throw new Error('Component was not mounted');
   svelteComponent.$destroy();
+  delete rootElement[__pwSvelteComponentKey];
 };
 
 window.playwrightUpdate = async (rootElement, component) => {

packages/playwright-ct-vue/registerSource.mjs

@@ -256,6 +256,7 @@ window.playwrightUnmount = async rootElement => {
   if (!app)
     throw new Error('Component was not mounted');
   app.unmount();
+  delete rootElement[__pwAppKey];
 };
 
 window.playwrightUpdate = async (rootElement, component) => {

packages/playwright-ct-vue2/registerSource.mjs

@@ -182,6 +182,7 @@ window.playwrightUnmount = async rootElement => {
     throw new Error('Component was not mounted');
   component.$destroy();
   component.$el.remove();
+  delete rootElement[instanceKey];
 };
 
 window.playwrightUpdate = async (element, options) => {

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

@@ -17,3 +17,9 @@ 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('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});

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

@@ -17,3 +17,9 @@ test('unmount a multi root component', async ({ page, mount }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});

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

@@ -17,3 +17,9 @@ 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('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});

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

@@ -21,3 +21,13 @@ 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('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});

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

@@ -21,3 +21,13 @@ test('unmount a multi root component', async ({ page, mount }) => {
   await expect(page.locator('#root')).not.toContainText('root 1');
   await expect(page.locator('#root')).not.toContainText('root 2');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});

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

@@ -21,3 +21,14 @@ 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('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});
+

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

@@ -17,3 +17,9 @@ 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('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});

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

@@ -21,3 +21,13 @@ 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('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});

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

@@ -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,9 @@ 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('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});

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

@@ -11,3 +11,13 @@ test('unmount', async ({ page, mount }) => {
   await component.unmount();
   await expect(page.locator('#root')).not.toContainText('Submit');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});

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

@@ -7,3 +7,9 @@ test('unmount', async ({ page, mount }) => {
   await component.unmount();
   await expect(page.locator('#root')).not.toContainText('Submit');
 });
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});