@stencil/vitest 1.3.0 → 1.5.0

package/README.md

@@ -270,6 +270,44 @@ const formatted = prettifyHtml('<div><span>Hello</span></div>');
 // </div>
 ```
 
+### `waitForStable(elementOrSelector, timeout?)`
+
+Waits for an element to be rendered and visible in the DOM. Only works in real browser environments (not jsdom/happy-dom).
+
+Accepts either an `Element` or a CSS selector string. When a selector is provided, it polls until the element appears in the DOM.
+
+```tsx
+import { render, waitForStable, h } from '@stencil/vitest';
+
+// Wait for a rendered element to be stable / visible
+const { root } = await render(<my-component />);
+await waitForStable(root);
+
+// Wait for an element using a selector (useful when element isn't in DOM yet)
+await waitForStable('my-component .inner-element');
+
+// Custom timeout (default: 5000ms)
+await waitForStable('my-component', 10000);
+```
+
+> **Note:** In non-browser environments, `waitForStable` logs a warning and returns immediately.
+
+### `waitForExist(selector, timeout?)`
+
+Waits for an element matching the selector to exist in the DOM. Unlike `waitForStable`, this works in both real browsers and mock DOM environments (jsdom/happy-dom).
+
+Returns the element if found, or `null` if timeout is reached.
+
+```tsx
+import { waitForExist } from '@stencil/vitest';
+
+// Wait for an element to appear in the DOM
+const element = await waitForExist('my-component .lazy-loaded');
+
+// Custom timeout (default: 5000ms)
+const element = await waitForExist('#dynamic-content', 10000);
+```
+
 ## CLI
 
 The `stencil-test` CLI wraps both Stencil builds with Vitest testing.

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, waitForStable } from './testing/render.js';
+export { render, waitForStable, waitForExist } 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,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"}
+{"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,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC1E,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, waitForStable } from './testing/render.js';
+export { render, waitForStable, waitForExist } from './testing/render.js';
 export { serializeHtml, prettifyHtml } from './testing/html-serializer.js';

package/dist/testing/render.d.ts

@@ -22,8 +22,14 @@ interface RenderOptions {
  */
 export declare function waitForStable(elementOrSelector: Element | string, timeout?: number): Promise<void>;
 /**
- * Render using Stencil's render
+ * Poll until element exists in the DOM.
+ * Accepts a CSS selector string and waits for a matching element to appear.
+ * Works in both real browsers and mock DOM environments.
  */
-export declare function render<T extends HTMLElement = HTMLElement, I = any>(vnode: any, options?: RenderOptions): Promise<RenderResult<T, I>>;
+export declare function waitForExist(selector: string, timeout?: number): Promise<Element | null>;
+/**
+ * Render using Stencil's render or raw HTML template string
+ */
+export declare function render<T extends HTMLElement = HTMLElement, I = any>(template: any | string, options?: RenderOptions): Promise<RenderResult<T, I>>;
 export {};
 //# sourceMappingURL=render.d.ts.map

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;;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"}
+{"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;;;;GAIG;AACH,wBAAsB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAY5F;AAED;;GAEG;AACH,wBAAsB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,CAAC,GAAG,GAAG,EACvE,QAAQ,EAAE,GAAG,GAAG,MAAM,EACtB,OAAO,GAAE,aAGR,GACA,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAkJ7B"}

package/dist/testing/render.js

@@ -55,9 +55,25 @@ export async function waitForStable(elementOrSelector, timeout = 5000) {
     // Don't throw on timeout - element might be intentionally zero-sized or not found
 }
 /**
- * Render using Stencil's render
+ * Poll until element exists in the DOM.
+ * Accepts a CSS selector string and waits for a matching element to appear.
+ * Works in both real browsers and mock DOM environments.
  */
-export async function render(vnode, options = {
+export async function waitForExist(selector, timeout = 5000) {
+    const start = Date.now();
+    while (Date.now() - start < timeout) {
+        const element = document.querySelector(selector);
+        if (element) {
+            return element;
+        }
+        await new Promise((r) => setTimeout(r, 16));
+    }
+    return null;
+}
+/**
+ * Render using Stencil's render or raw HTML template string
+ */
+export async function render(template, options = {
     clearStage: true,
     stageAttrs: { class: 'stencil-component-stage' },
 }) {
@@ -71,8 +87,14 @@ 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);
+    if (typeof template === 'string') {
+        // Handle string template - add as innerHTML
+        container.innerHTML = template;
+    }
+    else {
+        // Use Stencil's render which handles VNodes properly in the browser
+        await stencilRender(template, container);
+    }
     // Get the rendered element
     const element = container.firstElementChild;
     if (!element) {

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/stenciljs/vitest"
   },
-  "version": "1.3.0",
+  "version": "1.5.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.3.0"
+    "vitest-environment-stencil": "1.5.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",