@testspectra/react 1.1.8-rc.29 → 1.1.8-rc.30

package/dist/cli.js

@@ -22,6 +22,9 @@ function buildAutoImportManifest(root) {
     const entries = [];
     for (const name of readdirSync(dir, { withFileTypes: true })) {
       if (!name.isDirectory()) continue;
+      if (name.name.startsWith(".") || name.name === "node_modules" || name.name === "dist" || name.name === "__screenshots__" || name.name === "coverage") {
+        continue;
+      }
       for (const platform of ["web", "common"]) {
         for (const ext of ["tsx", "ts"]) {
           const candidate = path.join(dir, name.name, filePattern(platform).replace(/\.tsx?$/, `.${ext}`));
@@ -38,7 +41,7 @@ function buildAutoImportManifest(root) {
   function scanFixtures() {
     const dir = path.join(root, "fixtures");
     if (!existsSync(dir)) return [];
-    return readdirSync(dir).filter((f) => f.endsWith(".json")).map((f) => ({ name: f.replace(/\.json$/, ""), path: path.join(dir, f).replace(/\\/g, "/") }));
+    return readdirSync(dir).filter((f) => f.endsWith(".json") && !f.startsWith(".")).map((f) => ({ name: f.replace(/\.json$/, ""), path: path.join(dir, f).replace(/\\/g, "/") }));
   }
   return {
     pageObjects: scanEntityDir("page-objects", (p) => `${p}.tsx`),
@@ -60,7 +63,7 @@ import { defineConfig } from '${vitestConfigUrl}';
 ${opts.semanticReporter ? `import { SpectraVitestReporter } from '${reporterUrl}';` : ""}
 
 export default defineConfig({
-  root: ${JSON.stringify(normalizedPackageDir)},
+  root: ${JSON.stringify(normalizedTestRoot)},
   plugins: [react()],
   define: {
     __TESTSPECTRA_AUTO_IMPORT_MANIFEST__: ${JSON.stringify(JSON.stringify(manifest))},
@@ -92,7 +95,20 @@ export default defineConfig({
       ${opts.outputFile ? `['json', { outputFile: ${JSON.stringify(opts.outputFile)} }],` : ""}
     ]` : opts.outputFile ? `['default', ['json', { outputFile: ${JSON.stringify(opts.outputFile)} }]]` : "'default'"},
     dir: ${JSON.stringify(normalizedTestRoot)},
-    include: ['specs/**/web.test.tsx', 'specs/**/*.test.tsx'],
+    include: [
+      'specs/**/web.test.tsx',
+      'specs/**/*.test.tsx',
+      'specs/**/web.test.ts',
+      'specs/**/*.test.ts',
+    ],
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/__screenshots__/**',
+      '**/.testspectra/**',
+      '**/.git/**',
+      '**/coverage/**',
+    ],
     browser: {
       enabled: true,
       provider: 'playwright',

package/dist/index.js

@@ -322,12 +322,26 @@ var DomDriverBridge = class {
 };
 
 // src/mount.ts
-import * as ReactDOMClient from "react-dom/client";
 var ROOT_ID = "spectra-root";
 var cachedRoot = null;
-function getCreateRoot() {
-  const client = ReactDOMClient;
-  return client.createRoot || client.default?.createRoot || client.default;
+var dynamicCreateRoot = null;
+async function getCreateRoot() {
+  if (typeof window !== "undefined" && window.__TESTSPECTRA_CREATE_ROOT__) {
+    return window.__TESTSPECTRA_CREATE_ROOT__;
+  }
+  if (dynamicCreateRoot) {
+    return dynamicCreateRoot;
+  }
+  try {
+    const mod = await import(
+      /* @vite-ignore */
+      "react-dom/client"
+    );
+    dynamicCreateRoot = mod.createRoot || mod.default?.createRoot || mod.default;
+    if (dynamicCreateRoot) return dynamicCreateRoot;
+  } catch {
+  }
+  throw new Error("Could not find react-dom/client createRoot. Ensure react-dom is installed in your project.");
 }
 function ensureContainer() {
   let container = document.getElementById(ROOT_ID);
@@ -341,7 +355,7 @@ function ensureContainer() {
 async function mount(element) {
   const container = ensureContainer();
   if (!cachedRoot) {
-    const createRootFn = getCreateRoot();
+    const createRootFn = await getCreateRoot();
     cachedRoot = createRootFn(container);
   }
   const componentName = (typeof element.type === "string" ? element.type : element.type?.displayName || element.type?.name) || "component";
@@ -350,7 +364,7 @@ async function mount(element) {
     { type: "action", key: "mount", target: componentName, args: [] },
     async () => {
       cachedRoot.render(element);
-      await new Promise((r) => queueMicrotask(r));
+      await new Promise((r) => setTimeout(r, 20));
       return globalThis.__TS_RUNTIME__.createElementProxy(`#${ROOT_ID}`);
     }
   );
@@ -380,6 +394,9 @@ function buildAutoImportManifest(root) {
     const entries = [];
     for (const name of readdirSync(dir, { withFileTypes: true })) {
       if (!name.isDirectory()) continue;
+      if (name.name.startsWith(".") || name.name === "node_modules" || name.name === "dist" || name.name === "__screenshots__" || name.name === "coverage") {
+        continue;
+      }
       for (const platform of ["web", "common"]) {
         for (const ext of ["tsx", "ts"]) {
           const candidate = path.join(dir, name.name, filePattern(platform).replace(/\.tsx?$/, `.${ext}`));
@@ -396,7 +413,7 @@ function buildAutoImportManifest(root) {
   function scanFixtures() {
     const dir = path.join(root, "fixtures");
     if (!existsSync(dir)) return [];
-    return readdirSync(dir).filter((f) => f.endsWith(".json")).map((f) => ({ name: f.replace(/\.json$/, ""), path: path.join(dir, f).replace(/\\/g, "/") }));
+    return readdirSync(dir).filter((f) => f.endsWith(".json") && !f.startsWith(".")).map((f) => ({ name: f.replace(/\.json$/, ""), path: path.join(dir, f).replace(/\\/g, "/") }));
   }
   return {
     pageObjects: scanEntityDir("page-objects", (p) => `${p}.tsx`),
@@ -418,7 +435,7 @@ import { defineConfig } from '${vitestConfigUrl}';
 ${opts.semanticReporter ? `import { SpectraVitestReporter } from '${reporterUrl}';` : ""}
 
 export default defineConfig({
-  root: ${JSON.stringify(normalizedPackageDir)},
+  root: ${JSON.stringify(normalizedTestRoot)},
   plugins: [react()],
   define: {
     __TESTSPECTRA_AUTO_IMPORT_MANIFEST__: ${JSON.stringify(JSON.stringify(manifest))},
@@ -450,7 +467,20 @@ export default defineConfig({
       ${opts.outputFile ? `['json', { outputFile: ${JSON.stringify(opts.outputFile)} }],` : ""}
     ]` : opts.outputFile ? `['default', ['json', { outputFile: ${JSON.stringify(opts.outputFile)} }]]` : "'default'"},
     dir: ${JSON.stringify(normalizedTestRoot)},
-    include: ['specs/**/web.test.tsx', 'specs/**/*.test.tsx'],
+    include: [
+      'specs/**/web.test.tsx',
+      'specs/**/*.test.tsx',
+      'specs/**/web.test.ts',
+      'specs/**/*.test.ts',
+    ],
+    exclude: [
+      '**/node_modules/**',
+      '**/dist/**',
+      '**/__screenshots__/**',
+      '**/.testspectra/**',
+      '**/.git/**',
+      '**/coverage/**',
+    ],
     browser: {
       enabled: true,
       provider: 'playwright',
@@ -621,29 +651,96 @@ import http from "node:http";
 import path3 from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 import * as esbuild from "esbuild";
+import { createRequire as createRequire2 } from "node:module";
 var bundleCache = /* @__PURE__ */ new Map();
 var inFlightBuilds = /* @__PURE__ */ new Map();
+var cssInjectorPlugin = {
+  name: "spectra-css-injector",
+  setup(build2) {
+    build2.onLoad({ filter: /\.(css|scss|sass|less)$/ }, async (args) => {
+      try {
+        const raw = await fs.promises.readFile(args.path, "utf8");
+        const escaped = JSON.stringify(raw);
+        const sourcePath = JSON.stringify(args.path);
+        return {
+          contents: `
+            if (typeof document !== 'undefined') {
+              const style = document.createElement('style');
+              style.setAttribute('data-spectra-css', ${sourcePath});
+              style.textContent = ${escaped};
+              document.head.appendChild(style);
+            }
+          `,
+          loader: "js"
+        };
+      } catch (e) {
+        return {
+          contents: `/* failed to load css: ${String(e)} */`,
+          loader: "js"
+        };
+      }
+    });
+  }
+};
+var SHARED_REACT_EXTERNALS = [
+  "react",
+  "react/jsx-runtime",
+  "react/jsx-dev-runtime",
+  "react/compiler-runtime",
+  "react-dom",
+  "react-dom/client"
+];
 async function buildBundle(entrypoint, opts = {}) {
-  const result = await esbuild.build({
-    entryPoints: [entrypoint],
+  const mergedExternals = opts.skipSharedExternals ? opts.external ?? [] : Array.from(/* @__PURE__ */ new Set([...opts.external ?? [], ...SHARED_REACT_EXTERNALS]));
+  const buildOptions = {
     bundle: true,
     format: "esm",
     platform: "browser",
     target: "esnext",
-    external: opts.external ?? [],
+    external: mergedExternals,
     minify: false,
     write: false,
-    // Inline source maps so Chrome DevTools can map errors back to .tsx source lines.
+    plugins: [cssInjectorPlugin],
+    loader: {
+      ".png": "dataurl",
+      ".jpg": "dataurl",
+      ".jpeg": "dataurl",
+      ".gif": "dataurl",
+      ".webp": "dataurl",
+      ".svg": "text",
+      ".json": "json",
+      ".woff": "dataurl",
+      ".woff2": "dataurl",
+      ".ttf": "dataurl",
+      ".eot": "dataurl"
+    },
+    logLevel: "error",
+    logOverride: {
+      "ignored-bare-import": "silent"
+    },
     sourcemap: "inline",
-    // React 17+ automatic JSX runtime — test files do not need `import React from 'react'`.
     jsx: "automatic",
     jsxImportSource: "react"
-  });
+  };
+  if (opts.virtualContents) {
+    buildOptions.stdin = {
+      contents: opts.virtualContents,
+      resolveDir: opts.resolveDir ?? process.cwd(),
+      sourcefile: entrypoint,
+      loader: "ts"
+    };
+  } else {
+    buildOptions.entryPoints = [entrypoint];
+  }
+  const result = await esbuild.build(buildOptions);
   if (result.errors.length > 0) {
     const msgs = result.errors.map((e) => e.text).join("\n");
     throw new Error(`esbuild failed for ${entrypoint}:
 ${msgs}`);
   }
+  if (!result.outputFiles || result.outputFiles.length === 0) {
+    throw new Error(`esbuild produced no output files for ${entrypoint}`);
+  }
   return result.outputFiles[0].text;
 }
 async function getCachedBundle(cacheKey, entrypoint, opts) {
@@ -665,16 +762,134 @@ async function getCachedBundle(cacheKey, entrypoint, opts) {
   inFlightBuilds.set(cacheKey, buildPromise);
   return buildPromise;
 }
+function buildCombinedReactBundleCode(testRoot) {
+  let req;
+  try {
+    req = createRequire2(path3.join(testRoot, "package.json"));
+  } catch {
+    req = createRequire2(import.meta.url);
+  }
+  const resolveSafe = (specifier) => {
+    try {
+      return req.resolve(specifier);
+    } catch {
+      try {
+        return createRequire2(import.meta.url).resolve(specifier);
+      } catch {
+        return null;
+      }
+    }
+  };
+  const loadSafe = (specifier) => {
+    try {
+      return req(specifier);
+    } catch {
+      try {
+        return createRequire2(import.meta.url)(specifier);
+      } catch {
+        return null;
+      }
+    }
+  };
+  const reactPath = resolveSafe("react");
+  const jsxPath = resolveSafe("react/jsx-runtime");
+  const compilerPath = resolveSafe("react/compiler-runtime");
+  const domPath = resolveSafe("react-dom");
+  const domClientPath = resolveSafe("react-dom/client");
+  const reactPkg = loadSafe("react") ?? {};
+  const jsxPkg = loadSafe("react/jsx-runtime") ?? {};
+  const compilerPkg = loadSafe("react/compiler-runtime") ?? {};
+  const domPkg = loadSafe("react-dom") ?? {};
+  const domClientPkg = loadSafe("react-dom/client") ?? {};
+  const allKeys = /* @__PURE__ */ new Set();
+  const exportLines = [];
+  const addExports = (varName, pkg) => {
+    const keys = Object.keys(pkg).filter((k) => /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(k));
+    for (const k of keys) {
+      if (!allKeys.has(k)) {
+        allKeys.add(k);
+        exportLines.push(`export const ${k} = (${varName} as any).${k};`);
+      }
+    }
+  };
+  addExports("_react", reactPkg);
+  addExports("_jsx", jsxPkg);
+  addExports("_compiler", compilerPkg);
+  addExports("_dom", domPkg);
+  addExports("_domClient", domClientPkg);
+  const importParts = [];
+  const initParts = [];
+  if (reactPath) {
+    importParts.push(`import * as _rawReact from ${JSON.stringify(reactPath)};`);
+    initParts.push(`const _react: any = (_rawReact as any).default || _rawReact;`);
+  } else {
+    initParts.push(`const _react: any = {};`);
+  }
+  if (jsxPath) {
+    importParts.push(`import * as _rawJsx from ${JSON.stringify(jsxPath)};`);
+    initParts.push(`const _jsx: any = (_rawJsx as any).default || _rawJsx;`);
+  } else {
+    initParts.push(`const _jsx: any = {};`);
+  }
+  if (compilerPath) {
+    importParts.push(`import * as _rawCompiler from ${JSON.stringify(compilerPath)};`);
+    initParts.push(`const _compiler: any = (_rawCompiler as any).default || _rawCompiler;`);
+  } else {
+    initParts.push(`const _compiler: any = {};`);
+  }
+  if (domPath) {
+    importParts.push(`import * as _rawDom from ${JSON.stringify(domPath)};`);
+    initParts.push(`const _dom: any = (_rawDom as any).default || _rawDom;`);
+  } else {
+    initParts.push(`const _dom: any = {};`);
+  }
+  if (domClientPath) {
+    importParts.push(`import * as _rawDomClient from ${JSON.stringify(domClientPath)};`);
+    initParts.push(`const _domClient: any = (_rawDomClient as any).default || _rawDomClient;`);
+  } else {
+    initParts.push(`const _domClient: any = {};`);
+  }
+  return `
+${importParts.join("\n")}
+
+${initParts.join("\n")}
+
+${exportLines.join("\n")}
+
+export default _react;
+`;
+}
 function buildHarnessHtml(manifest, stepDelayMs) {
   const manifestJson = JSON.stringify(manifest);
   return `<!DOCTYPE html>
 <html>
-<head><meta charset="utf-8"><title>Spectra Component Test</title></head>
+<head>
+<meta charset="utf-8">
+<title>Spectra Component Test</title>
+<script type="importmap">
+{
+  "imports": {
+    "react": "/@modules/react.js",
+    "react/jsx-runtime": "/@modules/react.js",
+    "react/jsx-dev-runtime": "/@modules/react.js",
+    "react/compiler-runtime": "/@modules/react.js",
+    "react-dom": "/@modules/react.js",
+    "react-dom/client": "/@modules/react.js"
+  }
+}
+</script>
+</head>
 <body>
-<script>
+<script type="module">
   window.__TESTSPECTRA_AUTO_IMPORT_MANIFEST__ = ${manifestJson};
   window.__TESTSPECTRA_STEP_DELAY_MS__ = ${JSON.stringify(stepDelayMs)};
   window.__TESTSPECTRA_SEMANTIC_REPORTER__ = true;
+  try {
+    const rdc = await import('react-dom/client');
+    window.__TESTSPECTRA_CREATE_ROOT__ = rdc.createRoot || rdc.default?.createRoot || rdc.default;
+  } catch (e) {
+    console.warn('[TestSpectra] createRoot pre-load warning:', e);
+  }
 </script>
 <script type="module" src="/runner.js"></script>
 <script type="module" src="/setup.js"></script>
@@ -709,28 +924,20 @@ function makeHandler(testRoot, packageDir, harnessHtml, setupEntrypoint, runnerE
       respond(res, 200, "text/html; charset=utf-8", harnessHtml);
       return;
     }
-    if (url.pathname.startsWith("/@fs/")) {
-      const rawFsPath = url.pathname.slice("/@fs/".length);
-      const fsPath = rawFsPath.startsWith("/") ? rawFsPath : `/${rawFsPath}`;
-      const resolved = path3.resolve(fsPath);
-      if (resolved.endsWith(".json")) {
-        try {
-          const raw = fs.readFileSync(resolved, "utf-8");
-          respond(res, 200, "application/json; charset=utf-8", raw);
-        } catch (err) {
-          respond(res, 500, "application/json", JSON.stringify({ error: String(err) }));
-        }
-        return;
-      }
+    if (url.pathname === "/@modules/react.js" || url.pathname.startsWith("/@modules/react")) {
       try {
-        const js = await getCachedBundle(resolved, resolved);
+        const js = await getCachedBundle("module_react_combined", path3.join(testRoot, "__virtual_react_combined.js"), {
+          virtualContents: buildCombinedReactBundleCode(testRoot),
+          resolveDir: testRoot,
+          skipSharedExternals: true
+        });
         respond(res, 200, "application/javascript; charset=utf-8", js);
       } catch (err) {
         respond(
           res,
-          200,
+          500,
           "application/javascript",
-          `throw new Error(${JSON.stringify(`Module bundle error for ${fsPath}: ${String(err)}`)});`
+          `throw new Error(${JSON.stringify(`Failed to bundle shared React runtime: ${String(err)}`)});`
         );
       }
       return;
@@ -761,9 +968,8 @@ function makeHandler(testRoot, packageDir, harnessHtml, setupEntrypoint, runnerE
       }
       const testFilePath = decodeURIComponent(encodedFile);
       const resolved = path3.resolve(testFilePath);
-      const rootResolved = path3.resolve(testRoot);
-      if (!resolved.startsWith(rootResolved + path3.sep) && resolved !== rootResolved) {
-        respond(res, 403, "text/plain", "Forbidden: path outside test root");
+      if (!fs.existsSync(resolved)) {
+        respond(res, 404, "text/plain", `File not found: ${testFilePath}`);
         return;
       }
       if (resolved.endsWith(".json")) {

package/dist/runner.js

@@ -1 +1 @@
-var i=[],a=[],T=[];globalThis.it=function(n,t){i.push({title:n,fn:t})};globalThis.beforeEach=function(n){a.push(n)};globalThis.afterEach=function(n){T.push(n)};function _(){let n=globalThis.Spectra;if(typeof n?.unmount=="function")n.unmount();else{let t=document.getElementById("spectra-root");t&&(t.innerHTML="")}}function r(n,t){console.log(`[${n}] ${t}`)}globalThis.__SPECTRA_RUNNER__={async run(n,t){r("TESTSPECTRA_SUITE_START",JSON.stringify({file:n}));let c=globalThis.__bootstrapAutoImports;if(typeof c=="function")try{await c(t)}catch(o){r("TESTSPECTRA_SUITE_ERROR",JSON.stringify({file:n,error:`Failed to bootstrap auto imports: ${String(o)}`}));return}let l=encodeURIComponent(n);try{await import(`/test?file=${l}`)}catch(o){r("TESTSPECTRA_SUITE_ERROR",JSON.stringify({file:n,error:String(o)}));return}let f=0,S=0;for(let{title:o,fn:g}of i){r("TESTSPECTRA_TEST_START",o),globalThis.__CURRENT_TEST_TITLE__=o;let E={task:{name:o}},u=performance.now();try{for(let e of a)await e(E);await g();for(let e of T)await e(E);let s=Math.round(performance.now()-u);r("TESTSPECTRA_TEST_PASS",`${o} (${s}ms)`),f++}catch(s){let e=Math.round(performance.now()-u),R=s instanceof Error?s.message:String(s);r("TESTSPECTRA_TEST_ERROR",R),r("TESTSPECTRA_TEST_FAIL",`${o} (${e}ms)`),S++}finally{_()}}i.length=0,a.length=0,T.length=0,r("TESTSPECTRA_SUITE_END",JSON.stringify({file:n,passed:f,failed:S}))}};
+var T=[],c=[],f=[];globalThis.it=function(n,o){T.push({title:n,fn:o})};globalThis.beforeEach=function(n){c.push(n)};globalThis.afterEach=function(n){f.push(n)};function R(){let n=globalThis.Spectra;if(typeof n?.unmount=="function")n.unmount();else{let o=document.getElementById("spectra-root");o&&(o.innerHTML="")}}function e(n,o){console.log(`[${n}] ${o}`)}globalThis.__SPECTRA_RUNNER__={async run(n,o){e("TESTSPECTRA_SUITE_START",JSON.stringify({file:n}));let u=globalThis.__bootstrapAutoImports;if(typeof u=="function")try{await u(o)}catch(t){return e("TESTSPECTRA_SUITE_ERROR",JSON.stringify({file:n,error:`Failed to bootstrap auto imports: ${String(t)}`})),{passed:0,failed:1}}let l=encodeURIComponent(n);try{await import(`/test?file=${l}`)}catch(t){return e("TESTSPECTRA_SUITE_ERROR",JSON.stringify({file:n,error:String(t)})),{passed:0,failed:1}}let i=0,a=0;for(let{title:t,fn:d}of T){e("TESTSPECTRA_TEST_START",t),globalThis.__CURRENT_TEST_TITLE__=t;let S={task:{name:t}},E=performance.now();try{for(let s of c)await s(S);await d();for(let s of f)await s(S);let r=Math.round(performance.now()-E);e("TESTSPECTRA_TEST_PASS",`${t} (${r}ms)`),i++}catch(r){let s=Math.round(performance.now()-E),g=r instanceof Error?r.message:String(r);e("TESTSPECTRA_TEST_ERROR",g),e("TESTSPECTRA_TEST_FAIL",`${t} (${s}ms)`),a++}finally{R()}}return T.length=0,c.length=0,f.length=0,e("TESTSPECTRA_SUITE_END",JSON.stringify({file:n,passed:i,failed:a})),{passed:i,failed:a}}};