chore: always grow component bundle (#20799)

Fixes https://github.com/microsoft/playwright/issues/20581

packages/playwright-test/src/plugins/vitePlugin.ts

@@ -97,6 +97,8 @@ export function createPlugin(
       const hasNewComponents = await checkNewComponents(buildInfo, componentRegistry);
       // 3. Check component sources.
       const sourcesDirty = !buildExists || hasNewComponents || await checkSources(buildInfo);
+      // 4. Update component info.
+      buildInfo.components = [...componentRegistry.values()];
 
       viteConfig.root = rootDir;
       viteConfig.preview = { port, ...viteConfig.preview };
@@ -218,12 +220,6 @@ async function checkNewTests(suite: Suite, buildInfo: BuildInfo, componentRegist
         componentRegistry.set(component.fullName, component);
       buildInfo.tests[testFile] = { timestamp, components: components.map(c => c.fullName) };
       hasNewTests = true;
-    } else {
-      // The test has not changed, populate component registry from the buildInfo.
-      for (const componentName of buildInfo.tests[testFile].components) {
-        const component = buildInfo.components.find(c => c.fullName === componentName)!;
-        componentRegistry.set(component.fullName, component);
-      }
     }
   }
 
@@ -232,7 +228,7 @@ async function checkNewTests(suite: Suite, buildInfo: BuildInfo, componentRegist
 
 async function checkNewComponents(buildInfo: BuildInfo, componentRegistry: ComponentRegistry): Promise<boolean> {
   const newComponents = [...componentRegistry.keys()];
-  const oldComponents = new Set(buildInfo.components.map(c => c.fullName));
+  const oldComponents = new Map(buildInfo.components.map(c => [c.fullName, c]));
 
   let hasNewComponents = false;
   for (const c of newComponents) {
@@ -241,10 +237,10 @@ async function checkNewComponents(buildInfo: BuildInfo, componentRegistry: Compo
       break;
     }
   }
-  if (!hasNewComponents)
+  for (const c of oldComponents.values())
-    return false;
+    componentRegistry.set(c.fullName, c);
-  buildInfo.components = newComponents.map(n => componentRegistry.get(n)!);
+
-  return true;
+  return hasNewComponents;
 }
 
 async function parseTestFile(testFile: string): Promise<ComponentInfo[]> {

tests/playwright-test/playwright.ct-build.spec.ts

@@ -283,6 +283,67 @@ test('should cache build', async ({ runInlineTest }, testInfo) => {
   });
 });
 
+test('should grow cache', async ({ runInlineTest }, testInfo) => {
+  test.slow();
+
+  await test.step('original test', async () => {
+    const result = await runInlineTest({
+      'playwright.config.ts': playwrightConfig,
+      'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+      'playwright/index.ts': ``,
+      'src/button1.tsx': `
+        export const Button1 = () => <button>Button 1</button>;
+      `,
+      'src/button2.tsx': `
+        export const Button2 = () => <button>Button 2</button>;
+      `,
+      'src/button1.test.tsx': `
+        //@no-header
+        import { test, expect } from '@playwright/experimental-ct-react';
+        import { Button1 } from './button1.tsx';
+        test('pass', async ({ mount }) => {
+          const component = await mount(<Button1></Button1>);
+          await expect(component).toHaveText('Button 1');
+        });
+      `,
+      'src/button2.test.tsx': `
+        //@no-header
+        import { test, expect } from '@playwright/experimental-ct-react';
+        import { Button2 } from './button2.tsx';
+        test('pass', async ({ mount }) => {
+          const component = await mount(<Button2></Button2>);
+          await expect(component).toHaveText('Button 2');
+        });
+      `,
+    }, { workers: 1 }, undefined, { additionalArgs: ['button1'] });
+
+    expect(result.exitCode).toBe(0);
+    expect(result.passed).toBe(1);
+    const output = result.output;
+    expect(output).toContain('modules transformed');
+  });
+
+  await test.step('run second test', async () => {
+    const result = await runInlineTest({
+      'playwright.config.ts': playwrightConfig,
+    }, { workers: 1 }, undefined, { additionalArgs: ['button2'] });
+    expect(result.exitCode).toBe(0);
+    expect(result.passed).toBe(1);
+    const output = result.output;
+    expect(output).toContain('modules transformed');
+  });
+
+  await test.step('run first test again', async () => {
+    const result = await runInlineTest({
+      'playwright.config.ts': playwrightConfig,
+    }, { workers: 1 }, undefined, { additionalArgs: ['button2'] });
+    expect(result.exitCode).toBe(0);
+    expect(result.passed).toBe(1);
+    const output = result.output;
+    expect(output).not.toContain('modules transformed');
+  });
+});
+
 test('should not use global config for preview', async ({ runInlineTest }) => {
   const result1 = await runInlineTest({
     'playwright.config.ts': playwrightConfig,