@vitest/browser 1.2.1 → 1.3.0

package/dist/index.js

@@ -1,10 +1,108 @@
 import { fileURLToPath } from 'node:url';
-import { resolve } from 'node:path';
-import { builtinModules } from 'node:module';
+import { readFile } from 'node:fs/promises';
 import sirv from 'sirv';
+import { coverageConfigDefaults } from 'vitest/config';
 import MagicString from 'magic-string';
 import { esmWalker } from '@vitest/utils/ast';
 
+function normalizeWindowsPath(input = "") {
+  if (!input || !input.includes("\\")) {
+    return input;
+  }
+  return input.replace(/\\/g, "/");
+}
+const _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/;
+function cwd() {
+  if (typeof process !== "undefined") {
+    return process.cwd().replace(/\\/g, "/");
+  }
+  return "/";
+}
+const resolve = function(...arguments_) {
+  arguments_ = arguments_.map((argument) => normalizeWindowsPath(argument));
+  let resolvedPath = "";
+  let resolvedAbsolute = false;
+  for (let index = arguments_.length - 1; index >= -1 && !resolvedAbsolute; index--) {
+    const path = index >= 0 ? arguments_[index] : cwd();
+    if (!path || path.length === 0) {
+      continue;
+    }
+    resolvedPath = `${path}/${resolvedPath}`;
+    resolvedAbsolute = isAbsolute(path);
+  }
+  resolvedPath = normalizeString(resolvedPath, !resolvedAbsolute);
+  if (resolvedAbsolute && !isAbsolute(resolvedPath)) {
+    return `/${resolvedPath}`;
+  }
+  return resolvedPath.length > 0 ? resolvedPath : ".";
+};
+function normalizeString(path, allowAboveRoot) {
+  let res = "";
+  let lastSegmentLength = 0;
+  let lastSlash = -1;
+  let dots = 0;
+  let char = null;
+  for (let index = 0; index <= path.length; ++index) {
+    if (index < path.length) {
+      char = path[index];
+    } else if (char === "/") {
+      break;
+    } else {
+      char = "/";
+    }
+    if (char === "/") {
+      if (lastSlash === index - 1 || dots === 1) ; else if (dots === 2) {
+        if (res.length < 2 || lastSegmentLength !== 2 || res[res.length - 1] !== "." || res[res.length - 2] !== ".") {
+          if (res.length > 2) {
+            const lastSlashIndex = res.lastIndexOf("/");
+            if (lastSlashIndex === -1) {
+              res = "";
+              lastSegmentLength = 0;
+            } else {
+              res = res.slice(0, lastSlashIndex);
+              lastSegmentLength = res.length - 1 - res.lastIndexOf("/");
+            }
+            lastSlash = index;
+            dots = 0;
+            continue;
+          } else if (res.length > 0) {
+            res = "";
+            lastSegmentLength = 0;
+            lastSlash = index;
+            dots = 0;
+            continue;
+          }
+        }
+        if (allowAboveRoot) {
+          res += res.length > 0 ? "/.." : "..";
+          lastSegmentLength = 2;
+        }
+      } else {
+        if (res.length > 0) {
+          res += `/${path.slice(lastSlash + 1, index)}`;
+        } else {
+          res = path.slice(lastSlash + 1, index);
+        }
+        lastSegmentLength = index - lastSlash - 1;
+      }
+      lastSlash = index;
+      dots = 0;
+    } else if (char === "." && dots !== -1) {
+      ++dots;
+    } else {
+      dots = -1;
+    }
+  }
+  return res;
+}
+const isAbsolute = function(p) {
+  return _IS_ABSOLUTE_RE.test(p);
+};
+const basename = function(p, extension) {
+  const lastSegment = normalizeWindowsPath(p).split("/").pop();
+  return extension && lastSegment.endsWith(extension) ? lastSegment.slice(0, -extension.length) : lastSegment;
+};
+
 /**
  * @param {import('estree').Node} param
  * @returns {string[]}
@@ -63,7 +161,7 @@ function extract_identifiers(param, nodes = []) {
 }
 
 const viInjectedKey = "__vi_inject__";
-const viExportAllHelper = "__vi_export_all__";
+const viExportAllHelper = "__vitest_browser_runner__.exportAll";
 const skipHijack = [
   "/@vite/client",
   "/@vite/env",
@@ -85,7 +183,6 @@ ${err.message}`);
   const idToImportMap = /* @__PURE__ */ new Map();
   const declaredConst = /* @__PURE__ */ new Set();
   const hoistIndex = 0;
-  let hasInjected = false;
   const transformImportDeclaration = (node) => {
     const source = node.source.value;
     if (skipHijack.some((skip) => source.match(skip)))
@@ -114,7 +211,6 @@ ${err.message}`);
     return importId;
   }
   function defineExport(position, name, local = name) {
-    hasInjected = true;
     s.appendLeft(
       position,
       `
@@ -177,7 +273,6 @@ Object.defineProperty(${viInjectedKey}, "${name}", { enumerable: true, configura
     if (node.type === "ExportDefaultDeclaration") {
       const expressionTypes = ["FunctionExpression", "ClassExpression"];
       if ("id" in node.declaration && node.declaration.id && !expressionTypes.includes(node.declaration.type)) {
-        hasInjected = true;
         const { name } = node.declaration.id;
         s.remove(
           node.start,
@@ -189,7 +284,6 @@ Object.defineProperty(${viInjectedKey}, "${name}", { enumerable: true, configura
 Object.defineProperty(${viInjectedKey}, "default", { enumerable: true, configurable: true, value: ${name} });`
         );
       } else {
-        hasInjected = true;
         s.update(
           node.start,
           node.start + 14,
@@ -203,13 +297,11 @@ export default { ${viInjectedKey}: ${viInjectedKey}.default };
     if (node.type === "ExportAllDeclaration") {
       s.remove(node.start, node.end);
       const importId = defineImportAll(node.source.value);
-      if (node.exported) {
+      if (node.exported)
         defineExport(hoistIndex, node.exported.name, `${importId}`);
-      } else {
-        hasInjected = true;
+      else
         s.appendLeft(hoistIndex, `${viExportAllHelper}(${viInjectedKey}, ${importId});
 `);
-      }
     }
   }
   esmWalker(ast, {
@@ -237,17 +329,15 @@ export default { ${viInjectedKey}: ${viInjectedKey}.default };
     onImportMeta() {
     },
     onDynamicImport(node) {
-      const replace = "__vi_wrap_module__(import(";
+      const replace = "__vitest_browser_runner__.wrapModule(import(";
       s.overwrite(node.start, node.source.start, replace);
       s.overwrite(node.end - 1, node.end, "))");
     }
   });
-  if (hasInjected) {
-    s.prepend(`const ${viInjectedKey} = { [Symbol.toStringTag]: "Module" };
+  s.prepend(`const ${viInjectedKey} = { [Symbol.toStringTag]: "Module" };
 `);
-    s.append(`
+  s.append(`
 export { ${viInjectedKey} }`);
-  }
   return {
     ast,
     code: s.toString(),
@@ -255,6 +345,9 @@ export { ${viInjectedKey} }`);
   };
 }
 
+function replacer(code, values) {
+  return code.replace(/{\s*(\w+)\s*}/g, (_, key) => values[key] ?? "");
+}
 var index = (project, base = "/") => {
   const pkgRoot = resolve(fileURLToPath(import.meta.url), "../..");
   const distRoot = resolve(pkgRoot, "dist");
@@ -270,20 +363,80 @@ var index = (project, base = "/") => {
         }
       },
       async configureServer(server) {
+        const testerHtml = readFile(resolve(distRoot, "client/tester.html"), "utf8");
+        const runnerHtml = readFile(resolve(distRoot, "client/index.html"), "utf8");
+        const injectorJs = readFile(resolve(distRoot, "client/esm-client-injector.js"), "utf8");
+        const favicon = `${base}favicon.svg`;
+        const testerPrefix = `${base}__vitest_test__/__test__/`;
+        server.middlewares.use((_req, res, next) => {
+          const headers = server.config.server.headers;
+          if (headers) {
+            for (const name in headers)
+              res.setHeader(name, headers[name]);
+          }
+          next();
+        });
+        server.middlewares.use(async (req, res, next) => {
+          if (!req.url)
+            return next();
+          const url = new URL(req.url, "http://localhost");
+          if (!url.pathname.startsWith(testerPrefix) && url.pathname !== base)
+            return next();
+          res.setHeader("Cache-Control", "no-cache, max-age=0, must-revalidate");
+          res.setHeader("Content-Type", "text/html; charset=utf-8");
+          const files = project.browserState?.files ?? [];
+          const config = wrapConfig(project.getSerializableConfig());
+          config.env ??= {};
+          config.env.VITEST_BROWSER_DEBUG = process.env.VITEST_BROWSER_DEBUG || "";
+          const injector = replacer(await injectorJs, {
+            __VITEST_CONFIG__: JSON.stringify(config),
+            __VITEST_FILES__: JSON.stringify(files)
+          });
+          if (url.pathname === base) {
+            const html2 = replacer(await runnerHtml, {
+              __VITEST_FAVICON__: favicon,
+              __VITEST_TITLE__: "Vitest Browser Runner",
+              __VITEST_INJECTOR__: injector
+            });
+            res.write(html2, "utf-8");
+            res.end();
+            return;
+          }
+          const decodedTestFile = decodeURIComponent(url.pathname.slice(testerPrefix.length));
+          const tests = decodedTestFile === "__vitest_all__" || !files.includes(decodedTestFile) ? "__vitest_browser_runner__.files" : JSON.stringify([decodedTestFile]);
+          const html = replacer(await testerHtml, {
+            __VITEST_FAVICON__: favicon,
+            __VITEST_TITLE__: "Vitest Browser Tester",
+            __VITEST_INJECTOR__: injector,
+            __VITEST_APPEND__: (
+              // TODO: have only a single global variable to not pollute the global scope
+              `<script type="module">
+  __vitest_browser_runner__.runningFiles = ${tests}
+  __vitest_browser_runner__.runTests(__vitest_browser_runner__.runningFiles)
+<\/script>`
+            )
+          });
+          res.write(html, "utf-8");
+          res.end();
+        });
         server.middlewares.use(
           base,
           sirv(resolve(distRoot, "client"), {
             single: false,
-            dev: true,
-            setHeaders(res, _pathname, _stats) {
-              const headers = server.config.server.headers;
-              if (headers) {
-                for (const name in headers)
-                  res.setHeader(name, headers[name]);
-              }
-            }
+            dev: true
           })
         );
+        const coverageFolder = resolveCoverageFolder(project);
+        const coveragePath = coverageFolder ? coverageFolder[1] : void 0;
+        if (coveragePath && base === coveragePath)
+          throw new Error(`The ui base path and the coverage path cannot be the same: ${base}, change coverage.reportsDirectory`);
+        coverageFolder && server.middlewares.use(coveragePath, sirv(coverageFolder[0], {
+          single: true,
+          dev: true,
+          setHeaders: (res) => {
+            res.setHeader("Cache-Control", "public,max-age=0,must-revalidate");
+          }
+        }));
       }
     },
     {
@@ -303,23 +456,25 @@ var index = (project, base = "/") => {
           optimizeDeps: {
             entries: [
               ...entries,
+              "vitest",
               "vitest/utils",
               "vitest/browser",
-              "vitest/runners"
+              "vitest/runners",
+              "@vitest/utils"
             ],
             exclude: [
-              ...builtinModules,
               "vitest",
               "vitest/utils",
               "vitest/browser",
               "vitest/runners",
-              "@vitest/utils"
+              "@vitest/utils",
+              // loupe is manually transformed
+              "loupe"
             ],
             include: [
               "vitest > @vitest/utils > pretty-format",
               "vitest > @vitest/snapshot > pretty-format",
               "vitest > diff-sequences",
-              "vitest > loupe",
               "vitest > pretty-format",
               "vitest > pretty-format > ansi-styles",
               "vitest > pretty-format > ansi-regex",
@@ -328,6 +483,15 @@ var index = (project, base = "/") => {
           }
         };
       },
+      transform(code, id) {
+        if (id.includes("loupe/loupe.js")) {
+          const exportsList = ["custom", "inspect", "registerConstructor", "registerStringTag"];
+          const codeAppend = exportsList.map((i) => `export const ${i} = globalThis.loupe.${i}`).join("\n");
+          return `${code}
+${codeAppend}
+export default globalThis.loupe`;
+        }
+      },
       async resolveId(id) {
         if (!/\?browserv=\w+$/.test(id))
           return;
@@ -351,5 +515,30 @@ var index = (project, base = "/") => {
     }
   ];
 };
+function resolveCoverageFolder(project) {
+  const options = project.ctx.config;
+  const htmlReporter = options.coverage?.enabled ? options.coverage.reporter.find((reporter) => {
+    if (typeof reporter === "string")
+      return reporter === "html";
+    return reporter[0] === "html";
+  }) : void 0;
+  if (!htmlReporter)
+    return void 0;
+  const root = resolve(
+    options.root || options.root || process.cwd(),
+    options.coverage.reportsDirectory || coverageConfigDefaults.reportsDirectory
+  );
+  const subdir = Array.isArray(htmlReporter) && htmlReporter.length > 1 && "subdir" in htmlReporter[1] ? htmlReporter[1].subdir : void 0;
+  if (!subdir || typeof subdir !== "string")
+    return [root, `/${basename(root)}/`];
+  return [resolve(root, subdir), `/${basename(root)}/${subdir}/`];
+}
+function wrapConfig(config) {
+  return {
+    ...config,
+    // workaround RegExp serialization
+    testNamePattern: config.testNamePattern ? config.testNamePattern.toString() : void 0
+  };
+}
 
 export { index as default };

package/dist/providers.js

@@ -25,17 +25,8 @@ class PlaywrightBrowserProvider {
     });
     this.cachedBrowser = browser;
     this.cachedPage = await browser.newPage(this.options?.page);
-    this.cachedPage.on("close", () => {
-      browser.close();
-    });
     return this.cachedPage;
   }
-  catchError(cb) {
-    this.cachedPage?.on("pageerror", cb);
-    return () => {
-      this.cachedPage?.off("pageerror", cb);
-    };
-  }
   async openPage(url) {
     const browserPage = await this.openBrowserPage();
     await browserPage.goto(url);
@@ -105,11 +96,6 @@ class WebdriverBrowserProvider {
     const browserInstance = await this.openBrowser();
     await browserInstance.url(url);
   }
-  // TODO
-  catchError(_cb) {
-    return () => {
-    };
-  }
   async close() {
     await Promise.all([
       this.cachedBrowser?.sessionId ? this.cachedBrowser?.deleteSession?.() : null
@@ -134,10 +120,6 @@ class NoneBrowserProvider {
     if (ctx.config.browser.headless)
       throw new Error(`You've enabled headless mode for "none" provider but it doesn't support it.`);
   }
-  catchError(_cb) {
-    return () => {
-    };
-  }
   async openPage(_url) {
     this.open = true;
     if (!this.ctx.browser)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitest/browser",
   "type": "module",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Browser running for Vitest",
   "license": "MIT",
   "funding": "https://opencollective.com/vitest",
@@ -42,37 +42,37 @@
   ],
   "peerDependencies": {
     "playwright": "*",
-    "vitest": "^1.0.0",
-    "webdriverio": "*"
+    "webdriverio": "*",
+    "vitest": "1.3.0"
   },
   "peerDependenciesMeta": {
-    "webdriverio": {
+    "playwright": {
       "optional": true
     },
     "safaridriver": {
       "optional": true
     },
-    "playwright": {
+    "webdriverio": {
       "optional": true
     }
   },
   "dependencies": {
     "magic-string": "^0.30.5",
     "sirv": "^2.0.4",
-    "@vitest/utils": "1.2.1"
+    "@vitest/utils": "1.3.0"
   },
   "devDependencies": {
     "@types/ws": "^8.5.9",
-    "@wdio/protocols": "^8.22.0",
+    "@wdio/protocols": "^8.29.7",
     "periscopic": "^4.0.2",
     "playwright": "^1.41.0",
     "playwright-core": "^1.41.0",
     "safaridriver": "^0.1.2",
-    "webdriverio": "^8.22.1",
-    "@vitest/ws-client": "1.2.1",
-    "@vitest/runner": "1.2.1",
-    "@vitest/ui": "1.2.1",
-    "vitest": "1.2.1"
+    "webdriverio": "^8.31.1",
+    "@vitest/runner": "1.3.0",
+    "@vitest/ui": "1.3.0",
+    "@vitest/ws-client": "1.3.0",
+    "vitest": "1.3.0"
   },
   "scripts": {
     "build": "rimraf dist && pnpm build:node && pnpm build:client",
@@ -80,6 +80,6 @@
     "build:node": "rollup -c",
     "dev:client": "vite build src/client --watch",
     "dev:node": "rollup -c --watch --watch.include 'src/node/**'",
-    "dev": "rimraf dist && run-p dev:node dev:client"
+    "dev": "rimraf dist && pnpm run --stream '/^dev:/'"
   }
 }