fix: do not crash component tests on stale cached files

Author: shairez

packages/playwright-ct-core/src/vitePlugin.ts

@@ -17,26 +17,25 @@
 import fs from 'fs';
 import path from 'path';
 
+import { assert, calculateSha1, getPlaywrightVersion, isURLAvailable } from 'playwright-core/lib/utils';
+import { colors, debug } from 'playwright-core/lib/utilsBundle';
 import { setExternalDependencies } from 'playwright/lib/transform/compilationCache';
 import { resolveHook } from 'playwright/lib/transform/transform';
 import { removeDirAndLogToConsole } from 'playwright/lib/util';
 import { stoppable } from 'playwright/lib/utilsBundle';
-import { isURLAvailable } from 'playwright-core/lib/utils';
-import { assert, calculateSha1, getPlaywrightVersion } from 'playwright-core/lib/utils';
-import { colors, debug } from 'playwright-core/lib/utilsBundle';
 
 import { runDevServer } from './devServer';
 import { source as injectedSource } from './generated/indexSource';
 import { createConfig, frameworkConfig, hasJSComponents, populateComponentsFromTests, resolveDirs, resolveEndpoint, transformIndexFile } from './viteUtils';
 
-import type { ImportInfo } from './tsxTransform';
-import type { ComponentRegistry } from './viteUtils';
-import type { TestRunnerPlugin } from '../../playwright/src/plugins';
 import type http from 'http';
 import type { AddressInfo } from 'net';
 import type { FullConfig, Suite } from 'playwright/types/testReporter';
 import type { PluginContext } from 'rollup';
 import type { Plugin, ResolveFn, ResolvedConfig } from 'vite';
+import type { TestRunnerPlugin } from '../../playwright/src/plugins';
+import type { ImportInfo } from './tsxTransform';
+import type { ComponentRegistry } from './viteUtils';
 
 
 const log = debug('pw:vite');
@@ -235,8 +234,16 @@ async function checkNewComponents(buildInfo: BuildInfo, componentRegistry: Compo
       break;
     }
   }
-  for (const c of oldComponents.values())
-    componentRegistry.set(c.id, c);
+  for (const c of oldComponents.values()) {
+    try {
+      if ((await fs.promises.stat(c.filename)))
+        componentRegistry.set(c.id, c);
+    } catch (e) {
+      if (e.code !== 'ENOENT')
+        throw e;
+      log('non existent file, skipping component registry:', c.filename);
+    }
+  }
 
   return hasNewComponents;
 }

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

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { test, expect, playwrightCtConfigText } from './playwright-test-fixtures';
 import fs from 'fs';
 import path from 'path';
+import { expect, playwrightCtConfigText, test } from './playwright-test-fixtures';
 
 test.describe.configure({ mode: 'parallel' });
 
@@ -351,6 +351,55 @@ test('should grow cache', async ({ runInlineTest }, testInfo) => {
   });
 });
 
+test('should not crash when cached component test file is deleted', async ({ runInlineTest }, testInfo) => {
+
+  await test.step('run first test to build the cache', async () => {
+    const result = await runInlineTest({
+      'playwright.config.ts': playwrightCtConfigText,
+      'playwright/index.html': `<script type="module" src="./index.ts"></script>`,
+      'playwright/index.ts': ``,
+      'src/button.tsx': `
+      export const Button = () => <button>Button</button>;
+    `,
+      'src/button.test.tsx': `
+      import { test, expect } from '@playwright/experimental-ct-react';
+      import { Button } from './button.tsx';
+      test('pass', async ({ mount }) => {
+        const component = await mount(<Button></Button>);
+        await expect(component).toHaveText('Button');
+      });
+    `,
+      'src/button2.tsx': `
+      export const Button2 = () => <button>Button 2</button>;
+    `,
+      'src/button2.test.tsx': `
+      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 });
+
+    expect(result.exitCode).toBe(0);
+    expect(result.passed).toBe(2);
+
+  });
+
+  await test.step('remove the second test and component and run the tests again', async () => {
+
+    fs.unlinkSync(testInfo.outputPath('src/button2.tsx'));
+    fs.unlinkSync(testInfo.outputPath('src/button2.test.tsx'));
+
+    const result2 = await runInlineTest({}, { workers: 1 });
+
+    expect(result2.exitCode).toBe(0);
+    expect(result2.passed).toBe(1);
+  });
+
+});
+
 test('should not use global config for preview', async ({ runInlineTest }) => {
   const result1 = await runInlineTest({
     'playwright.config.ts': playwrightCtConfigText,