@vitest/browser 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/index.js

@@ -1,8 +1,13 @@
 import { fileURLToPath } from 'node:url';
-import { readFile } from 'node:fs/promises';
+import { mkdir, readFile as readFile$1 } from 'node:fs/promises';
+import { createRequire } from 'node:module';
 import sirv from 'sirv';
+import { isFileServingAllowed, getFilePoolName, distDir } from 'vitest/node';
 import { coverageConfigDefaults } from 'vitest/config';
-import { slash } from '@vitest/utils';
+import { slash, toArray } from '@vitest/utils';
+import { P as PlaywrightBrowserProvider, W as WebdriverBrowserProvider } from './webdriver-CXn0ag9T.js';
+import fs, { promises } from 'node:fs';
+import { resolve as resolve$1, dirname as dirname$1, normalize as normalize$1 } from 'node:path';
 import MagicString from 'magic-string';
 import { esmWalker } from '@vitest/utils/ast';
 
@@ -17,6 +22,7 @@ function normalizeWindowsPath(input = "") {
 const _UNC_REGEX = /^[/\\]{2}/;
 const _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/;
 const _DRIVE_LETTER_RE = /^[A-Za-z]:$/;
+const _ROOT_FOLDER_RE = /^\/([A-Za-z]:)?$/;
 const normalize = function(path) {
   if (path.length === 0) {
     return ".";
@@ -151,78 +157,261 @@ function normalizeString(path, allowAboveRoot) {
 const isAbsolute = function(p) {
   return _IS_ABSOLUTE_RE.test(p);
 };
+const relative = function(from, to) {
+  const _from = resolve(from).replace(_ROOT_FOLDER_RE, "$1").split("/");
+  const _to = resolve(to).replace(_ROOT_FOLDER_RE, "$1").split("/");
+  if (_to[0][1] === ":" && _from[0][1] === ":" && _from[0] !== _to[0]) {
+    return _to.join("/");
+  }
+  const _fromCopy = [..._from];
+  for (const segment of _fromCopy) {
+    if (_to[0] !== segment) {
+      break;
+    }
+    _from.shift();
+    _to.shift();
+  }
+  return [..._from.map(() => ".."), ..._to].join("/");
+};
+const dirname = function(p) {
+  const segments = normalizeWindowsPath(p).replace(/\/$/, "").split("/").slice(0, -1);
+  if (segments.length === 1 && _DRIVE_LETTER_RE.test(segments[0])) {
+    segments[0] += "/";
+  }
+  return segments.join("/") || (isAbsolute(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[]}
- */
-function extract_names(param) {
-	return extract_identifiers(param).map((node) => node.name);
-}
-
-/**
- * @param {import('estree').Node} param
- * @param {import('estree').Identifier[]} nodes
- * @returns {import('estree').Identifier[]}
- */
-function extract_identifiers(param, nodes = []) {
-	switch (param.type) {
-		case 'Identifier':
-			nodes.push(param);
-			break;
-
-		case 'MemberExpression':
-			let object = param;
-			while (object.type === 'MemberExpression') {
-				object = /** @type {any} */ (object.object);
-			}
-			nodes.push(/** @type {any} */ (object));
-			break;
-
-		case 'ObjectPattern':
-			for (const prop of param.properties) {
-				if (prop.type === 'RestElement') {
-					extract_identifiers(prop.argument, nodes);
-				} else {
-					extract_identifiers(prop.value, nodes);
-				}
-			}
+const click = async (context, xpath, options = {}) => {
+  const provider = context.provider;
+  if (provider instanceof PlaywrightBrowserProvider) {
+    const tester = context.tester;
+    await tester.locator(`xpath=${xpath}`).click(options);
+    return;
+  }
+  if (provider instanceof WebdriverBrowserProvider) {
+    const page = provider.browser;
+    const markedXpath = `//${xpath}`;
+    const element = await page.$(markedXpath);
+    await element.click(options);
+    return;
+  }
+  throw new Error(`Provider "${provider.name}" doesn't support click command`);
+};
 
-			break;
+function assertFileAccess(path, project) {
+  if (!isFileServingAllowed(path, project.server) && !isFileServingAllowed(path, project.ctx.server))
+    throw new Error(`Access denied to "${path}". See Vite config documentation for "server.fs": https://vitejs.dev/config/server-options.html#server-fs-strict.`);
+}
+const readFile = async ({ project, testPath = process.cwd() }, path, options = {}) => {
+  const filepath = resolve$1(dirname$1(testPath), path);
+  assertFileAccess(filepath, project);
+  if (typeof options === "object" && !options.encoding)
+    options.encoding = "utf-8";
+  return promises.readFile(filepath, options);
+};
+const writeFile = async ({ project, testPath = process.cwd() }, path, data, options) => {
+  const filepath = resolve$1(dirname$1(testPath), path);
+  assertFileAccess(filepath, project);
+  const dir = dirname$1(filepath);
+  if (!fs.existsSync(dir))
+    await promises.mkdir(dir, { recursive: true });
+  await promises.writeFile(filepath, data, options);
+};
+const removeFile = async ({ project, testPath = process.cwd() }, path) => {
+  const filepath = resolve$1(dirname$1(testPath), path);
+  assertFileAccess(filepath, project);
+  await promises.rm(filepath);
+};
 
-		case 'ArrayPattern':
-			for (const element of param.elements) {
-				if (element) extract_identifiers(element, nodes);
-			}
+function isObject(payload) {
+  return payload != null && typeof payload === "object";
+}
+function isSendKeysPayload(payload) {
+  const validOptions = ["type", "press", "down", "up"];
+  if (!isObject(payload))
+    throw new Error("You must provide a `SendKeysPayload` object");
+  const numberOfValidOptions = Object.keys(payload).filter(
+    (key) => validOptions.includes(key)
+  ).length;
+  const unknownOptions = Object.keys(payload).filter((key) => !validOptions.includes(key));
+  if (numberOfValidOptions > 1) {
+    throw new Error(
+      `You must provide ONLY one of the following properties to pass to the browser runner: ${validOptions.join(
+        ", "
+      )}.`
+    );
+  }
+  if (numberOfValidOptions === 0) {
+    throw new Error(
+      `You must provide one of the following properties to pass to the browser runner: ${validOptions.join(
+        ", "
+      )}.`
+    );
+  }
+  if (unknownOptions.length > 0)
+    throw new Error(`Unknown options \`${unknownOptions.join(", ")}\` present.`);
+  return true;
+}
+function isTypePayload(payload) {
+  return "type" in payload;
+}
+function isPressPayload(payload) {
+  return "press" in payload;
+}
+function isDownPayload(payload) {
+  return "down" in payload;
+}
+function isUpPayload(payload) {
+  return "up" in payload;
+}
+const sendKeys = async ({ provider, contextId }, payload) => {
+  if (!isSendKeysPayload(payload) || !payload)
+    throw new Error("You must provide a `SendKeysPayload` object");
+  if (provider instanceof PlaywrightBrowserProvider) {
+    const page = provider.getPage(contextId);
+    if (isTypePayload(payload))
+      await page.keyboard.type(payload.type);
+    else if (isPressPayload(payload))
+      await page.keyboard.press(payload.press);
+    else if (isDownPayload(payload))
+      await page.keyboard.down(payload.down);
+    else if (isUpPayload(payload))
+      await page.keyboard.up(payload.up);
+  } else if (provider instanceof WebdriverBrowserProvider) {
+    const browser = provider.browser;
+    if (isTypePayload(payload))
+      await browser.keys(payload.type.split(""));
+    else if (isPressPayload(payload))
+      await browser.keys([payload.press]);
+    else
+      throw new Error('Only "press" and "type" are supported by webdriverio.');
+  } else {
+    throw new TypeError(`"sendKeys" is not supported for ${provider.name} browser provider.`);
+  }
+};
 
-			break;
+const screenshot = async (context, name, options = {}) => {
+  if (!context.testPath)
+    throw new Error(`Cannot take a screenshot without a test path`);
+  const path = resolveScreenshotPath(context.testPath, name, context.project.config);
+  const savePath = normalize$1(path);
+  await mkdir(dirname(path), { recursive: true });
+  if (context.provider instanceof PlaywrightBrowserProvider) {
+    if (options.element) {
+      const { element: elementXpath, ...config } = options;
+      const iframe = context.tester;
+      const element = iframe.locator(`xpath=${elementXpath}`);
+      await element.screenshot({ ...config, path: savePath });
+    } else {
+      await context.body.screenshot({ ...options, path: savePath });
+    }
+    return path;
+  }
+  if (context.provider instanceof WebdriverBrowserProvider) {
+    const page = context.provider.browser;
+    if (!options.element) {
+      const body = await page.$("body");
+      await body.saveScreenshot(savePath);
+      return path;
+    }
+    const xpath = `//${options.element}`;
+    const element = await page.$(xpath);
+    await element.saveScreenshot(savePath);
+    return path;
+  }
+  throw new Error(`Provider "${context.provider.name}" does not support screenshots`);
+};
+function resolveScreenshotPath(testPath, name, config) {
+  const dir = dirname(testPath);
+  const base = basename(testPath);
+  if (config.browser.screenshotDirectory) {
+    return resolve(
+      config.browser.screenshotDirectory,
+      relative(config.root, dir),
+      base,
+      name
+    );
+  }
+  return resolve(dir, "__screenshots__", base, name);
+}
 
-		case 'RestElement':
-			extract_identifiers(param.argument, nodes);
-			break;
+var builtinCommands = {
+  readFile,
+  removeFile,
+  writeFile,
+  sendKeys,
+  __vitest_click: click,
+  __vitest_screenshot: screenshot
+};
 
-		case 'AssignmentPattern':
-			extract_identifiers(param.left, nodes);
-			break;
-	}
+const VIRTUAL_ID_CONTEXT = "\0@vitest/browser/context";
+const ID_CONTEXT = "@vitest/browser/context";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+function BrowserContext(project) {
+  project.config.browser.commands ??= {};
+  for (const [name, command] of Object.entries(builtinCommands))
+    project.config.browser.commands[name] ??= command;
+  for (const command in project.config.browser.commands) {
+    if (!/^[a-z_$][\w$]*$/i.test(command))
+      throw new Error(`Invalid command name "${command}". Only alphanumeric characters, $ and _ are allowed.`);
+  }
+  return {
+    name: "vitest:browser:virtual-module:context",
+    enforce: "pre",
+    resolveId(id) {
+      if (id === ID_CONTEXT)
+        return VIRTUAL_ID_CONTEXT;
+    },
+    load(id) {
+      if (id === VIRTUAL_ID_CONTEXT)
+        return generateContextFile.call(this, project);
+    }
+  };
+}
+async function generateContextFile(project) {
+  const commands = Object.keys(project.config.browser.commands ?? {});
+  const filepathCode = "__vitest_worker__.filepath || __vitest_worker__.current?.file?.filepath || undefined";
+  const provider = project.browserProvider;
+  const commandsCode = commands.filter((command) => !command.startsWith("__vitest")).map((command) => {
+    return `    ["${command}"]: (...args) => rpc().triggerCommand(contextId, "${command}", filepath(), args),`;
+  }).join("\n");
+  const userEventNonProviderImport = await getUserEventImport(provider, this.resolve.bind(this));
+  const distContextPath = slash(`/@fs/${resolve(__dirname, "context.js")}`);
+  return `
+import { page, userEvent as __userEvent_CDP__ } from '${distContextPath}'
+${userEventNonProviderImport}
+const filepath = () => ${filepathCode}
+const rpc = () => __vitest_worker__.rpc
+const contextId = __vitest_browser_runner__.contextId
 
-	return nodes;
+export const server = {
+  platform: ${JSON.stringify(process.platform)},
+  version: ${JSON.stringify(process.version)},
+  provider: ${JSON.stringify(provider.name)},
+  browser: ${JSON.stringify(project.config.browser.name)},
+  commands: {
+    ${commandsCode}
+  }
+}
+export const commands = server.commands
+export const userEvent = ${provider.name === "preview" ? "__vitest_user_event__" : "__userEvent_CDP__"}
+export { page }
+`;
+}
+async function getUserEventImport(provider, resolve2) {
+  if (provider.name !== "preview")
+    return "";
+  const resolved = await resolve2("@testing-library/user-event", __dirname);
+  if (!resolved)
+    throw new Error(`Failed to resolve user-event package from ${__dirname}`);
+  return `import { userEvent as __vitest_user_event__ } from '${slash(`/@fs/${resolved.id}`)}'`;
 }
 
-const viInjectedKey = "__vi_inject__";
-const viExportAllHelper = "__vitest_browser_runner__.exportAll";
-const skipHijack = [
-  "/@vite/client",
-  "/@vite/env",
-  /vite\/dist\/client/
-];
-function injectVitestModule(code, id, parse) {
-  if (skipHijack.some((skip) => id.match(skip)))
-    return;
+function injectDynamicImport(code, id, parse) {
   const s = new MagicString(code);
   let ast;
   try {
@@ -232,165 +421,16 @@ function injectVitestModule(code, id, parse) {
 ${err.message}`);
     return;
   }
-  let uid = 0;
-  const idToImportMap = /* @__PURE__ */ new Map();
-  const declaredConst = /* @__PURE__ */ new Set();
-  const hoistIndex = 0;
-  const transformImportDeclaration = (node) => {
-    const source = node.source.value;
-    if (skipHijack.some((skip) => source.match(skip)))
-      return null;
-    const importId = `__vi_esm_${uid++}__`;
-    const hasSpecifiers = node.specifiers.length > 0;
-    const code2 = hasSpecifiers ? `import { ${viInjectedKey} as ${importId} } from '${source}'
-` : `import '${source}'
-`;
-    return {
-      code: code2,
-      id: importId
-    };
-  };
-  function defineImport(node) {
-    const declaration = transformImportDeclaration(node);
-    if (!declaration)
-      return null;
-    s.appendLeft(hoistIndex, declaration.code);
-    return declaration.id;
-  }
-  function defineImportAll(source) {
-    const importId = `__vi_esm_${uid++}__`;
-    s.appendLeft(hoistIndex, `const { ${viInjectedKey}: ${importId} } = await import(${JSON.stringify(source)});
-`);
-    return importId;
-  }
-  function defineExport(position, name, local = name) {
-    s.appendLeft(
-      position,
-      `
-Object.defineProperty(${viInjectedKey}, "${name}", { enumerable: true, configurable: true, get(){ return ${local} }});`
-    );
-  }
-  for (const node of ast.body) {
-    if (node.type === "ImportDeclaration") {
-      const importId = defineImport(node);
-      if (!importId)
-        continue;
-      s.remove(node.start, node.end);
-      for (const spec of node.specifiers) {
-        if (spec.type === "ImportSpecifier") {
-          idToImportMap.set(
-            spec.local.name,
-            `${importId}.${spec.imported.name}`
-          );
-        } else if (spec.type === "ImportDefaultSpecifier") {
-          idToImportMap.set(spec.local.name, `${importId}.default`);
-        } else {
-          idToImportMap.set(spec.local.name, importId);
-        }
-      }
-    }
-  }
-  for (const node of ast.body) {
-    if (node.type === "ExportNamedDeclaration") {
-      if (node.declaration) {
-        if (node.declaration.type === "FunctionDeclaration" || node.declaration.type === "ClassDeclaration") {
-          defineExport(node.end, node.declaration.id.name);
-        } else {
-          for (const declaration of node.declaration.declarations) {
-            const names = extract_names(declaration.id);
-            for (const name of names)
-              defineExport(node.end, name);
-          }
-        }
-        s.remove(node.start, node.declaration.start);
-      } else {
-        s.remove(node.start, node.end);
-        if (node.source) {
-          const importId = defineImportAll(node.source.value);
-          for (const spec of node.specifiers) {
-            defineExport(
-              hoistIndex,
-              spec.exported.name,
-              `${importId}.${spec.local.name}`
-            );
-          }
-        } else {
-          for (const spec of node.specifiers) {
-            const local = spec.local.name;
-            const binding = idToImportMap.get(local);
-            defineExport(node.end, spec.exported.name, binding || local);
-          }
-        }
-      }
-    }
-    if (node.type === "ExportDefaultDeclaration") {
-      const expressionTypes = ["FunctionExpression", "ClassExpression"];
-      if ("id" in node.declaration && node.declaration.id && !expressionTypes.includes(node.declaration.type)) {
-        const { name } = node.declaration.id;
-        s.remove(
-          node.start,
-          node.start + 15
-          /* 'export default '.length */
-        );
-        s.append(
-          `
-Object.defineProperty(${viInjectedKey}, "default", { enumerable: true, configurable: true, value: ${name} });`
-        );
-      } else {
-        s.update(
-          node.start,
-          node.start + 14,
-          `${viInjectedKey}.default =`
-        );
-        s.append(`
-export default { ${viInjectedKey}: ${viInjectedKey}.default };
-`);
-      }
-    }
-    if (node.type === "ExportAllDeclaration") {
-      s.remove(node.start, node.end);
-      const importId = defineImportAll(node.source.value);
-      if (node.exported)
-        defineExport(hoistIndex, node.exported.name, `${importId}`);
-      else
-        s.appendLeft(hoistIndex, `${viExportAllHelper}(${viInjectedKey}, ${importId});
-`);
-    }
-  }
   esmWalker(ast, {
-    onIdentifier(id2, info, parentStack) {
-      const binding = idToImportMap.get(id2.name);
-      if (!binding)
-        return;
-      if (info.hasBindingShortcut) {
-        s.appendLeft(id2.end, `: ${binding}`);
-      } else if (info.classDeclaration) {
-        if (!declaredConst.has(id2.name)) {
-          declaredConst.add(id2.name);
-          const topNode = parentStack[parentStack.length - 2];
-          s.prependRight(topNode.start, `const ${id2.name} = ${binding};
-`);
-        }
-      } else if (
-        // don't transform class name identifier
-        !info.classExpression
-      ) {
-        s.update(id2.start, id2.end, binding);
-      }
-    },
     // TODO: make env updatable
     onImportMeta() {
     },
     onDynamicImport(node) {
-      const replace = "__vitest_browser_runner__.wrapModule(import(";
+      const replace = "__vitest_browser_runner__.wrapModule(() => import(";
       s.overwrite(node.start, node.source.start, replace);
       s.overwrite(node.end - 1, node.end, "))");
     }
   });
-  s.prepend(`const ${viInjectedKey} = { [Symbol.toStringTag]: "Module" };
-`);
-  s.append(`
-export { ${viInjectedKey} }`);
   return {
     ast,
     code: s.toString(),
@@ -398,6 +438,23 @@ export { ${viInjectedKey} }`);
   };
 }
 
+const regexDynamicImport = /import\s*\(/;
+var DynamicImport = () => {
+  return {
+    name: "vitest:browser:esm-injector",
+    enforce: "post",
+    transform(source, id) {
+      if (!regexDynamicImport.test(source))
+        return;
+      return injectDynamicImport(source, id, this.parse);
+    }
+  };
+};
+
+function defineBrowserCommand(fn) {
+  return fn;
+}
+
 var index = (project, base = "/") => {
   const pkgRoot = resolve(fileURLToPath(import.meta.url), "../..");
   const distRoot = resolve(pkgRoot, "dist");
@@ -413,9 +470,12 @@ 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 testerHtml = readFile$1(resolve(distRoot, "client/tester.html"), "utf8");
+        const orchestratorHtml = project.config.browser.ui ? readFile$1(resolve(distRoot, "client/__vitest__/index.html"), "utf8") : readFile$1(resolve(distRoot, "client/orchestrator.html"), "utf8");
+        const injectorJs = readFile$1(resolve(distRoot, "client/esm-client-injector.js"), "utf8");
+        const manifest = (async () => {
+          return JSON.parse(await readFile$1(`${distRoot}/client/.vite/manifest.json`, "utf8"));
+        })();
         const favicon = `${base}favicon.svg`;
         const testerPrefix = `${base}__vitest_test__/__test__/`;
         server.middlewares.use((_req, res, next) => {
@@ -426,7 +486,7 @@ var index = (project, base = "/") => {
           }
           next();
         });
-        let indexScripts;
+        let orchestratorScripts;
         let testerScripts;
         server.middlewares.use(async (req, res, next) => {
           if (!req.url)
@@ -436,29 +496,70 @@ var index = (project, 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)
-          });
+          res.removeHeader("X-Frame-Options");
           if (url.pathname === base) {
-            if (!indexScripts)
-              indexScripts = await formatScripts(project.config.browser.indexScripts, server);
-            const html2 = replacer(await runnerHtml, {
+            let contextId2 = url.searchParams.get("contextId");
+            if (!contextId2)
+              contextId2 = project.browserState.keys().next().value ?? "none";
+            const files2 = project.browserState.get(contextId2)?.files ?? [];
+            const injector2 = replacer(await injectorJs, {
+              __VITEST_CONFIG__: JSON.stringify(config),
+              __VITEST_VITE_CONFIG__: JSON.stringify({
+                root: project.browser.config.root
+              }),
+              __VITEST_FILES__: JSON.stringify(files2),
+              __VITEST_TYPE__: url.pathname === base ? '"orchestrator"' : '"tester"',
+              __VITEST_CONTEXT_ID__: JSON.stringify(contextId2)
+            });
+            res.removeHeader("Content-Security-Policy");
+            if (!orchestratorScripts)
+              orchestratorScripts = await formatScripts(project.config.browser.orchestratorScripts, server);
+            let baseHtml = await orchestratorHtml;
+            if (project.config.browser.ui) {
+              const manifestContent = await manifest;
+              const jsEntry = manifestContent["orchestrator.html"].file;
+              baseHtml = baseHtml.replaceAll("./assets/", `${base}__vitest__/assets/`).replace(
+                "<!-- !LOAD_METADATA! -->",
+                [
+                  "<script>{__VITEST_INJECTOR__}<\/script>",
+                  "{__VITEST_SCRIPTS__}",
+                  `<script type="module" crossorigin src="${jsEntry}"><\/script>`
+                ].join("\n")
+              );
+            }
+            const html2 = replacer(baseHtml, {
               __VITEST_FAVICON__: favicon,
               __VITEST_TITLE__: "Vitest Browser Runner",
-              __VITEST_SCRIPTS__: indexScripts,
-              __VITEST_INJECTOR__: injector
+              __VITEST_SCRIPTS__: orchestratorScripts,
+              __VITEST_INJECTOR__: injector2,
+              __VITEST_CONTEXT_ID__: JSON.stringify(contextId2)
             });
             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 csp = res.getHeader("Content-Security-Policy");
+          if (typeof csp === "string") {
+            res.setHeader("Content-Security-Policy", csp.replace(/frame-ancestors [^;]+/, "frame-ancestors *"));
+          }
+          const [contextId, testFile] = url.pathname.slice(testerPrefix.length).split("/");
+          const decodedTestFile = decodeURIComponent(testFile);
+          const testFiles = await project.globTestFiles();
+          const tests = decodedTestFile === "__vitest_all__" || !testFiles.includes(decodedTestFile) ? "__vitest_browser_runner__.files" : JSON.stringify([decodedTestFile]);
+          const iframeId = JSON.stringify(decodedTestFile);
+          const files = project.browserState.get(contextId)?.files ?? [];
+          const injector = replacer(await injectorJs, {
+            __VITEST_CONFIG__: JSON.stringify(config),
+            __VITEST_FILES__: JSON.stringify(files),
+            __VITEST_VITE_CONFIG__: JSON.stringify({
+              root: project.browser.config.root
+            }),
+            __VITEST_TYPE__: url.pathname === base ? '"orchestrator"' : '"tester"',
+            __VITEST_CONTEXT_ID__: JSON.stringify(contextId)
+          });
           if (!testerScripts)
             testerScripts = await formatScripts(project.config.browser.testerScripts, server);
           const html = replacer(await testerHtml, {
@@ -470,6 +571,7 @@ var index = (project, base = "/") => {
               // TODO: have only a single global variable to not pollute the global scope
               `<script type="module">
   __vitest_browser_runner__.runningFiles = ${tests}
+  __vitest_browser_runner__.iframeId = ${iframeId}
   __vitest_browser_runner__.runTests(__vitest_browser_runner__.runningFiles)
 <\/script>`
             )
@@ -501,24 +603,21 @@ var index = (project, base = "/") => {
       name: "vitest:browser:tests",
       enforce: "pre",
       async config() {
-        const {
-          include,
-          exclude,
-          includeSource,
-          dir,
-          root
-        } = project.config;
-        const projectRoot = dir || root;
-        const entries = await project.globAllTestFiles(include, exclude, includeSource, projectRoot);
+        const allTestFiles = await project.globTestFiles();
+        const browserTestFiles = allTestFiles.filter((file) => getFilePoolName(project, file) === "browser");
+        const setupFiles = toArray(project.config.setupFiles);
+        const vitestPaths = [
+          resolve(distDir, "index.js"),
+          resolve(distDir, "browser.js"),
+          resolve(distDir, "runners.js"),
+          resolve(distDir, "utils.js")
+        ];
         return {
           optimizeDeps: {
             entries: [
-              ...entries,
-              "vitest",
-              "vitest/utils",
-              "vitest/browser",
-              "vitest/runners",
-              "@vitest/utils"
+              ...browserTestFiles,
+              ...setupFiles,
+              ...vitestPaths
             ],
             exclude: [
               "vitest",
@@ -526,31 +625,35 @@ var index = (project, base = "/") => {
               "vitest/browser",
               "vitest/runners",
               "@vitest/utils",
-              // loupe is manually transformed
-              "loupe"
+              "@vitest/runner",
+              "@vitest/spy",
+              "@vitest/utils/error",
+              "@vitest/snapshot",
+              "@vitest/expect",
+              "std-env",
+              "tinybench",
+              "tinyspy",
+              "pathe",
+              "msw",
+              "msw/browser"
             ],
             include: [
               "vitest > @vitest/utils > pretty-format",
               "vitest > @vitest/snapshot > pretty-format",
               "vitest > @vitest/snapshot > magic-string",
-              "vitest > diff-sequences",
               "vitest > pretty-format",
               "vitest > pretty-format > ansi-styles",
               "vitest > pretty-format > ansi-regex",
-              "vitest > chai"
+              "vitest > chai",
+              "vitest > chai > loupe",
+              "vitest > @vitest/runner > p-limit",
+              "vitest > @vitest/utils > diff-sequences",
+              "@vitest/browser > @testing-library/user-event",
+              "@vitest/browser > @testing-library/dom"
             ]
           }
         };
       },
-      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;
@@ -563,13 +666,47 @@ export default globalThis.loupe`;
       }
     },
     {
-      name: "vitest:browser:esm-injector",
-      enforce: "post",
-      transform(source, id) {
-        const hijackESM = project.config.browser.slowHijackESM ?? false;
-        if (!hijackESM)
-          return;
-        return injectVitestModule(source, id, this.parse);
+      name: "vitest:browser:resolve-virtual",
+      async resolveId(rawId) {
+        if (rawId.startsWith("/__virtual_vitest__:")) {
+          let id = rawId.slice("/__virtual_vitest__:".length);
+          if (id === "mocker-worker.js")
+            id = "msw/mockServiceWorker.js";
+          const resolved = await this.resolve(
+            id,
+            distRoot,
+            {
+              skipSelf: true
+            }
+          );
+          return resolved;
+        }
+      }
+    },
+    BrowserContext(project),
+    DynamicImport(),
+    // TODO: remove this when @testing-library/vue supports ESM
+    {
+      name: "vitest:browser:support-vue-testing-library",
+      config() {
+        return {
+          optimizeDeps: {
+            esbuildOptions: {
+              plugins: [
+                {
+                  name: "test-utils-rewrite",
+                  setup(build) {
+                    const _require = createRequire(import.meta.url);
+                    build.onResolve({ filter: /@vue\/test-utils/ }, (args) => {
+                      const resolved = _require.resolve(args.path, { paths: [args.importer] });
+                      return { path: resolved };
+                    });
+                  }
+                }
+              ]
+            }
+          }
+        };
       }
     }
   ];
@@ -584,7 +721,7 @@ function resolveCoverageFolder(project) {
   if (!htmlReporter)
     return void 0;
   const root = resolve(
-    options.root || options.root || process.cwd(),
+    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;
@@ -600,7 +737,7 @@ function wrapConfig(config) {
   };
 }
 function replacer(code, values) {
-  return code.replace(/{\s*(\w+)\s*}/g, (_, key) => values[key] ?? "");
+  return code.replace(/\{\s*(\w+)\s*\}/g, (_, key) => values[key] ?? "");
 }
 async function formatScripts(scripts, server) {
   if (!scripts?.length)
@@ -615,4 +752,4 @@ async function formatScripts(scripts, server) {
   return (await Promise.all(promises)).join("\n");
 }
 
-export { index as default };
+export { index as default, defineBrowserCommand };