Addon Test: Always run Vitest in watch mode internally

code/addons/test/src/node/test-manager.ts

@@ -39,10 +39,10 @@ export class TestManager {
     this.vitestManager.startVitest().then(() => options.onReady?.());
   }
 
-  async restartVitest({ watchMode, coverage }: { watchMode: boolean; coverage: boolean }) {
+  async restartVitest({ coverage }: { coverage: boolean }) {
     await this.vitestManager.vitest?.runningPromise;
     await this.vitestManager.closeVitest();
-    await this.vitestManager.startVitest({ watchMode, coverage });
+    await this.vitestManager.startVitest({ coverage });
   }
 
   async handleConfigChange(
@@ -52,24 +52,28 @@ export class TestManager {
       return;
     }
     if (this.coverage !== payload.config.coverage) {
+      this.coverage = payload.config.coverage;
       try {
-        this.coverage = payload.config.coverage;
-        await this.restartVitest({ watchMode: this.watchMode, coverage: this.coverage });
+        await this.restartVitest({ coverage: this.coverage });
       } catch (e) {
         this.reportFatalError('Failed to change coverage mode', e);
       }
     }
   }
 
   async handleWatchModeRequest(payload: TestingModuleWatchModeRequestPayload) {
-    try {
-      if (payload.providerId !== TEST_PROVIDER_ID) {
-        return;
-      }
+    if (payload.providerId !== TEST_PROVIDER_ID) {
+      return;
+    }
+    this.watchMode = payload.watchMode;
 
-      if (this.watchMode !== payload.watchMode) {
-        this.watchMode = payload.watchMode;
-        await this.restartVitest({ watchMode: this.watchMode, coverage: false });
+    try {
+      if (payload.watchMode && this.coverage) {
+        // if watch mode is toggled on and coverage is already enabled, restart vitest without coverage to automatically disable it
+        await this.restartVitest({ coverage: false });
+      } else if (!payload.watchMode && this.coverage) {
+        // if watch mode is toggled off and coverage is already enabled, restart vitest with coverage to automatically re-enable it
+        await this.restartVitest({ coverage: this.coverage });
       }
     } catch (e) {
       this.reportFatalError('Failed to change watch mode', e);
@@ -85,28 +89,23 @@ export class TestManager {
         this.coverage = payload.config.coverage;
       }
 
-      const allTestsRun = (payload.storyIds ?? []).length === 0;
-      if (this.coverage) {
-        /*
-           If we have coverage enabled and we're running all stories,
-           we have to restart Vitest AND disable watch mode otherwise the coverage report will be incorrect,
-           Vitest behaves wonky when re-using the same Vitest instance but with watch mode disabled,
-           among other things it causes the coverage report to be incorrect and stale.
-
-           If we're only running a subset of stories, we have to temporarily disable coverage,
-           as a coverage report for a subset of stories is not useful.
-         */
+      /*
+        If we're only running a subset of stories, we have to temporarily disable coverage,
+        as a coverage report for a subset of stories is not useful.
+      */
+      const temporarilyDisableCoverage =
+        this.coverage && !this.watchMode && (payload.storyIds ?? []).length > 0;
+      if (temporarilyDisableCoverage) {
         await this.restartVitest({
-          watchMode: allTestsRun ? false : this.watchMode,
-          coverage: allTestsRun,
+          coverage: false,
         });
       }
 
       await this.vitestManager.runTests(payload);
 
-      if (this.coverage && !allTestsRun) {
+      if (temporarilyDisableCoverage) {
         // Re-enable coverage if it was temporarily disabled because of a subset of stories was run
-        await this.restartVitest({ watchMode: this.watchMode, coverage: this.coverage });
+        await this.restartVitest({ coverage: this.coverage });
       }
     } catch (e) {
       this.reportFatalError('Failed to run tests', e);

code/addons/test/src/node/vitest-manager.ts

@@ -38,7 +38,7 @@ export class VitestManager {
 
   constructor(private testManager: TestManager) {}
 
-  async startVitest({ watchMode = false, coverage = false } = {}) {
+  async startVitest({ coverage = false } = {}) {
     const { createVitest } = await import('vitest/node');
 
     const storybookCoverageReporter: [string, StorybookCoverageReporterOptions] = [
@@ -53,7 +53,7 @@ export class VitestManager {
         ? {
             enabled: true,
             clean: false,
-            cleanOnRerun: !watchMode,
+            cleanOnRerun: false,
             reportOnFailure: true,
             reporter: [['html', {}], storybookCoverageReporter],
             reportsDirectory: resolvePathInStorybookCache(COVERAGE_DIRECTORY),
@@ -62,9 +62,8 @@ export class VitestManager {
     ) as CoverageOptions;
 
     this.vitest = await createVitest('test', {
-      watch: watchMode,
+      watch: true,
       passWithNoTests: false,
-      changed: watchMode,
       // TODO:
       // Do we want to enable Vite's default reporter?
       // The output in the terminal might be too spamy and it might be better to
@@ -82,9 +81,7 @@ export class VitestManager {
 
     await this.vitest.init();
 
-    if (watchMode) {
-      await this.setupWatchers();
-    }
+    await this.setupWatchers();
   }
 
   private updateLastChanged(filepath: string) {
@@ -276,6 +273,11 @@ export class VitestManager {
     this.updateLastChanged(id);
     this.storyCountForCurrentRun = 0;
 
+    // when watch mode is disabled, don't trigger any tests (below)
+    // but still invalidate the cache for the changed file, which is handled above
+    if (!this.testManager.watchMode) {
+      return;
+    }
     await this.runAffectedTests(file);
   }