fix: add timeout handling

Author: AriPerkkio

src/fixtures/process.ts

@@ -32,38 +32,52 @@ export class ProcessWrap {
       };
     });
 
-    this._isReady = promise.then((webcontainerProcess) => {
-      this._webcontainerProcess = webcontainerProcess;
-      this._writer = webcontainerProcess.input.getWriter();
+    this._isReady = new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        console.error(
+          "WebContainer process startup timed out in 30s, TODO remove this log message",
+        );
 
-      webcontainerProcess.exit.then(setDone);
+        reject(new Error("WebContainer process startup timed out in 30s"));
+      }, 30_000);
 
-      const reader = this._webcontainerProcess.output.getReader();
+      promise.then((webcontainerProcess) => {
+        clearTimeout(timeout);
 
-      const read = async () => {
-        while (true) {
-          const { done, value } = await reader.read();
+        this._webcontainerProcess = webcontainerProcess;
+        this._writer = webcontainerProcess.input.getWriter();
 
-          if (isExitted && !done) {
-            console.warn(
-              `[webcontainer-test]: Closed process keeps writing to output. Closing reader forcefully. \n` +
-                `                     Received: "${value}".`,
-            );
-            await reader.cancel();
-            break;
-          }
+        webcontainerProcess.exit.then(setDone);
+
+        const reader = this._webcontainerProcess.output.getReader();
+
+        const read = async () => {
+          while (true) {
+            const { done, value } = await reader.read();
 
-          // webcontainer process never reaches here, but for future-proofing let's exit
-          if (done) {
-            break;
+            if (isExitted && !done) {
+              console.warn(
+                `[webcontainer-test]: Closed process keeps writing to output. Closing reader forcefully. \n` +
+                  `                     Received: "${value}".`,
+              );
+              await reader.cancel();
+              break;
+            }
+
+            // webcontainer process never reaches here, but for future-proofing let's exit
+            if (done) {
+              break;
+            }
+
+            this._output += value;
+            this._listeners.forEach((fn) => fn(value));
           }
+        };
 
-          this._output += value;
-          this._listeners.forEach((fn) => fn(value));
-        }
-      };
+        void read();
 
-      void read();
+        resolve();
+      });
     });
   }
 
@@ -147,9 +161,23 @@ export class ProcessWrap {
   exit = async () => {
     await this._isReady;
 
-    this._webcontainerProcess.kill();
-    this._listeners.splice(0);
+    // eslint-disable-next-line no-async-promise-executor -- async in promise is completely fine
+    return new Promise<void>(async (resolve, reject) => {
+      const timeout = setTimeout(() => {
+        console.error(
+          "WebContainer process teardown timed out in 30s, TODO remove this log message",
+        );
+
+        reject(new Error("WebContainer process teardown timed out in 30s"));
+      }, 30_000);
 
-    return this.isDone;
+      this._webcontainerProcess.kill();
+      this._listeners.splice(0);
+
+      await this.isDone;
+
+      clearTimeout(timeout);
+      resolve();
+    });
   };
 }

src/fixtures/webcontainer.ts

@@ -16,8 +16,20 @@ export class WebContainer extends FileSystem {
   constructor() {
     super();
 
-    this._isReady = WebContainerApi.boot({}).then((instance) => {
-      this._instancePromise = instance;
+    this._isReady = new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        console.error(
+          "WebContainer boot timed out in 30s, TODO remove this log message",
+        );
+
+        reject(new Error("WebContainer boot timed out in 30s"));
+      }, 30_000);
+
+      WebContainerApi.boot({}).then((instance) => {
+        clearTimeout(timeout);
+        this._instancePromise = instance;
+        resolve();
+      });
     });
   }
 
@@ -46,13 +58,27 @@ export class WebContainer extends FileSystem {
 
   /** @internal */
   async teardown() {
-    await Promise.all(this._onExit.map((fn) => fn()));
+    // eslint-disable-next-line no-async-promise-executor -- async in promise is completely fine
+    return new Promise<void>(async (resolve, reject) => {
+      const timeout = setTimeout(() => {
+        console.error(
+          "WebContainer teardown timed out in 30s, TODO remove this log message",
+        );
 
-    // @ts-ignore -- internal
-    await this._instance._instance.teardown();
+        reject(new Error("WebContainer teardown timed out in 30s"));
+      }, 30_000);
 
-    this._instance.teardown();
-    this._instancePromise = undefined;
+      await Promise.all(this._onExit.map((fn) => fn()));
+
+      // @ts-ignore -- internal
+      await this._instance._instance.teardown();
+
+      this._instance.teardown();
+      this._instancePromise = undefined;
+
+      clearTimeout(timeout);
+      resolve();
+    });
   }
 
   /**

vitest.config.ts

@@ -5,6 +5,8 @@ export default defineConfig({
   plugins: [vitestWebcontainers()],
 
   test: {
+    reporters: "verbose",
+
     browser: {
       enabled: true,
       provider: "playwright",