@stencil/vitest 1.1.21 → 1.3.0

package/dist/core.d.ts

@@ -1,7 +1,7 @@
 import './testing/matchers.js';
 import './testing/snapshot-serializer.js';
 export { h } from '@stencil/core';
-export { render } from './testing/render.js';
+export { render, waitForStable } from './testing/render.js';
 export { serializeHtml, prettifyHtml, SerializeOptions } from './testing/html-serializer.js';
 export type { RenderOptions, RenderResult } from './types.js';
 //# sourceMappingURL=core.d.ts.map

package/dist/core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAC7F,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../src/core.ts"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAC7F,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/core.js

@@ -2,5 +2,5 @@
 import './testing/matchers.js';
 import './testing/snapshot-serializer.js';
 export { h } from '@stencil/core';
-export { render } from './testing/render.js';
+export { render, waitForStable } from './testing/render.js';
 export { serializeHtml, prettifyHtml } from './testing/html-serializer.js';

package/dist/testing/render.d.ts

@@ -1,8 +1,26 @@
 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;
 }
+/**
+ * Poll until element has dimensions (is rendered/visible in real browser).
+ * Accepts either an Element or a CSS selector string.
+ * If a selector is provided, waits for the element to appear in the DOM first.
+ */
+export declare function waitForStable(elementOrSelector: Element | string, timeout?: number): Promise<void>;
 /**
  * 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;AAyBD;;;;GAIG;AACH,wBAAsB,aAAa,CAAC,iBAAiB,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAiCtG;AAED;;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,59 @@
 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).
+ * Accepts either an Element or a CSS selector string.
+ * If a selector is provided, waits for the element to appear in the DOM first.
+ */
+export async function waitForStable(elementOrSelector, timeout = 5000) {
+    if (!isRealBrowser()) {
+        console.warn('[waitForStable] Only works in real browser environments');
+        return;
+    }
+    const start = Date.now();
+    // Resolve element from selector if needed
+    let element = typeof elementOrSelector === 'string' ? null : elementOrSelector;
+    // If an Element was passed, verify it's in the DOM
+    if (element && !document.contains(element)) {
+        console.warn('[waitForStable] Element is not attached to the DOM');
+    }
+    while (Date.now() - start < timeout) {
+        // If we have a selector, try to find the element
+        if (typeof elementOrSelector === 'string' && !element) {
+            element = document.querySelector(elementOrSelector);
+        }
+        // If we have an element, check if it has dimensions
+        if (element) {
+            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 or not found
+}
 /**
  * Render using Stencil's render
  */
@@ -8,7 +61,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 +71,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 +82,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 +93,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 +114,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 waitForStable(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.3.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.3.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",