fix it

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

@@ -69,6 +69,10 @@ export function createPlugin(): TestRunnerPlugin {
       if (stoppableServer)
         await new Promise(f => stoppableServer.stop(f));
     },
+
+    populateDependencies: async () => {
+      await buildBundle(config, configDir);
+    },
   };
 }
 
@@ -167,6 +171,12 @@ export async function buildBundle(config: FullConfig, configDir: string): Promis
     buildInfo.deps = Object.fromEntries(depsCollector.entries());
   }
 
+  {
+    for (const [importingFile, components] of componentsByImportingFile) {
+      setExternalDependencies(importingFile, components)
+    }
+  }
+
   {
     // Update dependencies based on the vite build.
     for (const [importingFile, components] of componentsByImportingFile) {

packages/playwright/src/plugins/index.ts

@@ -23,6 +23,7 @@ export interface TestRunnerPlugin {
   begin?(suite: Suite): Promise<void>;
   end?(): Promise<void>;
   teardown?(): Promise<void>;
+  populateDependencies?(): Promise<void>;
 }
 
 export type TestRunnerPluginRegistration = {

packages/playwright/src/runner/loadUtils.ts

@@ -119,7 +119,9 @@ export async function loadFileSuites(testRun: TestRun, mode: 'out-of-process' |
   }
 }
 
-export async function detectChangedFiles(baseCommit: string): Promise<string[]> {
+export async function detectChangedFiles(testRun: TestRun): Promise<string[]> {
+  const baseCommit = testRun.config.cliOnlyChanged;
+
   function gitFileList(command: string) {
     try {
       return childProcess.execSync(
@@ -149,9 +151,14 @@ export async function detectChangedFiles(baseCommit: string): Promise<string[]>
   const trackedFilesWithChanges = gitFileList(`diff ${baseCommit} --name-only`).map(file => path.join(gitRoot, file));
 
   const filesWithChanges = [...untrackedFiles, ...trackedFilesWithChanges];
+
+  for (const plugin of testRun.config.plugins)
+    await plugin.instance?.populateDependencies?.();
+  const affectedFiles = affectedTestFiles(filesWithChanges);
+
   return [
     ...filesWithChanges,
-    ...affectedTestFiles(filesWithChanges),
+    ...affectedFiles,
   ];
 }
 

packages/playwright/src/runner/tasks.ts

@@ -228,7 +228,7 @@ function createLoadTask(mode: 'out-of-process' | 'in-process', options: { filter
     setup: async (testRun, errors, softErrors) => {
       await collectProjectsAndTestFiles(testRun, !!options.doNotRunDepsOutsideProjectFilter, options.additionalFileMatcher);
       await loadFileSuites(testRun, mode, options.failOnLoadErrors ? errors : softErrors);
-      const changedFiles = testRun.config.cliOnlyChanged ? await detectChangedFiles(testRun.config.cliOnlyChanged) : undefined;
+      const changedFiles = testRun.config.cliOnlyChanged ? await detectChangedFiles(testRun) : undefined;
       testRun.rootSuite = await createRootSuite(testRun, options.failOnLoadErrors ? errors : softErrors, !!options.filterOnly, changedFiles);
       testRun.failureTracker.onRootSuite(testRun.rootSuite);
       // Fail when no tests.

tests/playwright-test/only-changed.spec.ts

@@ -144,7 +144,7 @@ test('should throw nice error message if git doesnt work', async ({ setupReposit
   expect(result.output).toContain('only works with Git repositories');
 });
 
-test.skip('should suppport component tests', async ({ runInlineTest, setupRepository, writeFiles }) => {
+test('should suppport component tests', async ({ runInlineTest, setupRepository, writeFiles }) => {
   const git = await setupRepository();
 
   await writeFiles({
@@ -203,16 +203,9 @@ test.skip('should suppport component tests', async ({ runInlineTest, setupReposi
 
   git('commit -am "update button2 test"');
 
-  // this doesn't work. we do know about dependencies in the Vite bundle,
-  // but only after the Vite build ran.
-  // Right now, --only-changed is interpreted *before* Vite build.
-  // We can either move the build (risky, big architecture change)
-  // or re-apply --only-changed after the build.
-  // Let's try the latter.
-
   const result3 = await runInlineTest({
     'src/button.tsx': `
-      export const Button = () => <button>Different Button</button>;
+      export const Button = () => <button>And another different Button</button>;
     `
   }, { 'workers': 1, 'only-changed': true });