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

closes #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');
+});