@stencil/vitest 1.1.21 → 1.2.0

package/dist/testing/render.d.ts

@@ -1,7 +1,19 @@
 import type { RenderResult } from '../types.js';
 interface RenderOptions {
+    /**
+     * Whether to clear existing stage containers before rendering. Defaults to true.
+     */
     clearStage?: boolean;
+    /**
+     * Attributes to set on the stage container element. Defaults to { class: 'stencil-component-stage' }.
+     */
     stageAttrs?: Record<string, string>;
+    /**
+     * Wait for the component to be fully rendered before returning.
+     * In browser mode, this polls until the element has dimensions.
+     * Defaults to true.
+     */
+    waitForReady?: boolean;
 }
 /**
  * Render using Stencil's render

package/dist/testing/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/testing/render.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,aAAa,CAAC;AAE1D,UAAU,aAAa;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC;AAKD;;GAEG;AACH,wBAAsB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,CAAC,GAAG,GAAG,EACvE,KAAK,EAAE,GAAG,EACV,OAAO,GAAE,aAGR,GACA,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAkI7B"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/testing/render.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,aAAa,CAAC;AAE1D,UAAU,aAAa;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAwCD;;GAEG;AACH,wBAAsB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,CAAC,GAAG,GAAG,EACvE,KAAK,EAAE,GAAG,EACV,OAAO,GAAE,aAGR,GACA,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CA6I7B"}

package/dist/testing/render.js

@@ -1,6 +1,40 @@
 import { render as stencilRender } from '@stencil/core';
 // Track event spies
 const eventSpies = new WeakMap();
+/**
+ * Detect if we're running in a real browser vs a mock DOM environment
+ */
+function isRealBrowser() {
+    if (typeof window === 'undefined')
+        return false;
+    if (!navigator.webdriver)
+        return false;
+    const ua = navigator?.userAgent ?? '';
+    if (ua.includes('jsdom'))
+        return false;
+    if ('happyDOM' in window)
+        return false;
+    if ('__stencil_mock_doc__' in window)
+        return false;
+    if (typeof process !== 'undefined' && process.versions?.node) {
+        return false;
+    }
+    return true;
+}
+/**
+ * Poll until element has dimensions (is rendered/visible in real browser)
+ */
+async function waitForRendered(element, timeout = 5000) {
+    const start = Date.now();
+    while (Date.now() - start < timeout) {
+        const rect = element.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+            return;
+        }
+        await new Promise((r) => requestAnimationFrame(r));
+    }
+    // Don't throw on timeout - element might be intentionally zero-sized
+}
 /**
  * Render using Stencil's render
  */
@@ -8,7 +42,6 @@ export async function render(vnode, options = {
     clearStage: true,
     stageAttrs: { class: 'stencil-component-stage' },
 }) {
-    // Use Stencil's render which handles VNodes properly in the browser
     const container = document.createElement('div');
     Object.entries(options.stageAttrs || {}).forEach(([key, value]) => {
         container.setAttribute(key, value);
@@ -19,6 +52,7 @@ export async function render(vnode, options = {
         existingStages.forEach((stage) => stage.remove());
     }
     document.body.appendChild(container);
+    // Use Stencil's render which handles VNodes properly in the browser
     await stencilRender(vnode, container);
     // Get the rendered element
     const element = container.firstElementChild;
@@ -29,6 +63,7 @@ export async function render(vnode, options = {
     if (typeof element.componentOnReady === 'function') {
         await element.componentOnReady();
     }
+    // Define waitForChanges first so we can use it in the ready check
     function waitForChanges(documentElement = element) {
         return new Promise((resolve) => {
             // Wait for Stencil's RAF-based update cycle
@@ -39,16 +74,15 @@ export async function render(vnode, options = {
                     const waitComponentOnReady = (elm, promises) => {
                         if (!elm)
                             return;
-                        if ('shadowRoot' in elm) {
+                        if ('shadowRoot' in elm && elm.shadowRoot) {
                             waitComponentOnReady(elm.shadowRoot, promises);
                         }
                         const children = elm.children;
                         const len = children.length;
                         for (let i = 0; i < len; i++) {
                             const childElm = children[i];
-                            const childStencilElm = childElm;
-                            if (childElm.tagName.includes('-') && typeof childStencilElm.componentOnReady === 'function') {
-                                promises.push(childStencilElm.componentOnReady().then(() => { }));
+                            if (childElm.tagName.includes('-') && typeof childElm.componentOnReady === 'function') {
+                                promises.push(childElm.componentOnReady().then(() => { }));
                             }
                             waitComponentOnReady(childElm, promises);
                         }
@@ -61,6 +95,15 @@ export async function render(vnode, options = {
             });
         });
     }
+    // Wait for component to be fully rendered if requested (default: true)
+    if (options.waitForReady !== false) {
+        if (isRealBrowser()) {
+            // In real browser, poll until element has dimensions
+            await waitForRendered(element);
+        }
+        // Always wait for Stencil's update cycle to complete
+        await waitForChanges();
+    }
     const setProps = async (newProps) => {
         Object.entries(newProps).forEach(([key, value]) => {
             element[key] = value;

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/stenciljs/vitest"
   },
-  "version": "1.1.21",
+  "version": "1.2.0",
   "description": "First-class testing utilities for Stencil design systems with Vitest",
   "license": "MIT",
   "type": "module",
@@ -97,7 +97,7 @@
   "dependencies": {
     "jiti": "^2.6.1",
     "local-pkg": "^1.1.2",
-    "vitest-environment-stencil": "1.1.21"
+    "vitest-environment-stencil": "1.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",