@stencil/vitest 1.8.3 → 1.9.0

package/README.md

@@ -155,6 +155,18 @@ await setProps({ name: 'Stencil' });
 unmount();
 ```
 
+#### `waitForReady` Option
+
+By default, `render()` waits for components to be fully hydrated before returning. It detects when Stencil applies the hydrated flag (class or attribute) to your component, respecting your `stencil.config` settings.
+
+```tsx
+// Default behaviour - waits for hydration
+const { root } = await render(<my-component />);
+
+// Skip hydration wait (useful for testing loading states)
+const { root } = await render(<my-component />, { waitForReady: false });
+```
+
 ### Available matchers:
 
 ```typescript
@@ -177,6 +189,231 @@ await expect(element).toEqualHtml('<div>Expected HTML</div>');
 await expect(element).toEqualLightHtml('<div>Light DOM only</div>');
 ```
 
+### Spying and Mocking
+
+Spy on component methods, props, and lifecycle hooks to verify behaviour without modifying your component code.
+
+> **Setup requirement:** Load your components in a `beforeAll` block (typically in your setup file). The spy system patches `customElements.define`, so components must be registered after the test framework initializes.
+>
+> ```diff
+> // vitest-setup.ts
+> - await import('./dist/test-components/test-components.esm.js');
+>
+> + import { beforeAll } from 'vitest';
+> + beforeAll(async () => {
+> +   await import('./dist/test-components/test-components.esm.js');
+> + });
+> ```
+
+#### Method Spying
+
+Spy on methods while still calling the original implementation:
+
+```tsx
+const { root, spies } = await render(<my-button>Click me</my-button>, {
+  spyOn: {
+    methods: ['handleClick'],
+  },
+});
+
+// Trigger the method
+root.shadowRoot?.querySelector('button')?.click();
+
+// Assert the method was called
+expect(spies?.methods.handleClick).toHaveBeenCalledTimes(1);
+expect(spies?.methods.handleClick).toHaveBeenCalledWith(expect.objectContaining({ type: 'click' }));
+
+// Reset call history
+spies?.methods.handleClick.mockClear();
+```
+
+#### Method Mocking
+
+Replace methods with pre-configured mocks:
+
+```tsx
+// Create mock with desired return value *before* render
+const fetchUserMock = vi.fn().mockResolvedValue({
+  id: '123',
+  name: 'Test User',
+  email: 'test@example.com',
+});
+
+// Mock is applied before initialisation
+const { root, spies, waitForChanges } = await render(<user-profile userId="123" />, {
+  spyOn: {
+    mocks: { fetchUserData: fetchUserMock },
+  },
+});
+await waitForChanges();
+
+expect(fetchUserMock).toHaveBeenCalledWith('123');
+expect(root.shadowRoot?.querySelector('.name')?.textContent).toBe('Test User');
+```
+
+Access the original implementation to augment rather than fully replace:
+
+```tsx
+const fetchMock = vi.fn();
+const { spies } = await render(<my-component />, {
+  spyOn: { mocks: { fetchData: fetchMock } },
+});
+
+// Wrap the original to add logging or modify behaviour
+fetchMock.mockImplementation(async (...args) => {
+  console.log('Fetching data with args:', args);
+  const result = await spies?.mocks.fetchData.original?.(...args);
+  console.log('Got result:', result);
+  return result;
+});
+```
+
+#### Prop Spying
+
+Track when props are changed:
+
+```tsx
+const { spies, setProps, waitForChanges } = await render(<my-button variant="primary">Click me</my-button>, {
+  spyOn: {
+    props: ['variant', 'disabled'],
+  },
+});
+
+await setProps({ variant: 'danger' });
+await waitForChanges();
+
+expect(spies?.props.variant).toHaveBeenCalledWith('danger');
+expect(spies?.props.variant).toHaveBeenCalledTimes(1);
+```
+
+#### Lifecycle Spying
+
+Spy on lifecycle methods. Methods that don't exist on the component are auto-stubbed:
+
+```tsx
+const { spies, setProps, waitForChanges } = await render(<my-button>Click me</my-button>, {
+  spyOn: {
+    lifecycle: ['componentWillLoad', 'componentDidLoad', 'componentWillRender', 'componentDidRender'],
+  },
+});
+
+// Lifecycle methods are called during initial render
+expect(spies?.lifecycle.componentWillLoad).toHaveBeenCalledTimes(1);
+expect(spies?.lifecycle.componentDidRender).toHaveBeenCalledTimes(1);
+
+// Trigger a re-render
+await setProps({ variant: 'danger' });
+await waitForChanges();
+
+// Re-render lifecycle methods called again
+expect(spies?.lifecycle.componentWillRender).toHaveBeenCalledTimes(2);
+expect(spies?.lifecycle.componentDidRender).toHaveBeenCalledTimes(2);
+```
+
+#### Resetting Spies
+
+Reset all spies at once using `resetAll()`. This clears call histories AND resets mock implementations:
+
+```tsx
+const fetchMock = vi.fn().mockReturnValue('mocked');
+const { root, spies, setProps, waitForChanges } = await render(<my-button variant="primary">Click me</my-button>, {
+  spyOn: {
+    methods: ['handleClick'],
+    mocks: { fetchData: fetchMock },
+    props: ['variant'],
+  },
+});
+
+// Trigger some calls
+root.shadowRoot?.querySelector('button')?.click();
+await setProps({ variant: 'danger' });
+
+// Reset everything
+spies?.resetAll();
+
+// Call histories cleared
+expect(spies?.methods.handleClick).toHaveBeenCalledTimes(0);
+expect(spies?.props.variant).toHaveBeenCalledTimes(0);
+
+// Mock implementations reset to default (returns undefined)
+expect(fetchMock()).toBeUndefined();
+```
+
+#### Nested Components
+
+When the root element is not a custom element, or when you have multiple custom elements, use `getComponentSpies()` to retrieve spies for specific elements:
+
+```tsx
+import { render, getComponentSpies, h } from '@stencil/vitest';
+
+// Root is a div, not a custom element
+const { root } = await render(
+  <div>
+    <my-button>Click me</my-button>
+  </div>,
+  {
+    spyOn: { methods: ['handleClick'] },
+  },
+);
+
+// Query the nested custom element
+const button = root.querySelector('my-button') as HTMLElement;
+
+// Get spies for the nested element
+const buttonSpies = getComponentSpies(button);
+expect(buttonSpies?.methods.handleClick).toBeDefined();
+
+// Multiple instances have independent spies
+const { root: container } = await render(
+  <div>
+    <my-button class="a">A</my-button>
+    <my-button class="b">B</my-button>
+  </div>,
+  { spyOn: { methods: ['handleClick'] } },
+);
+
+const spiesA = getComponentSpies(container.querySelector('.a') as HTMLElement);
+const spiesB = getComponentSpies(container.querySelector('.b') as HTMLElement);
+
+// Each has its own spy instance
+container.querySelector('.a')?.shadowRoot?.querySelector('button')?.click();
+expect(spiesA?.methods.handleClick).toHaveBeenCalledTimes(1);
+expect(spiesB?.methods.handleClick).toHaveBeenCalledTimes(0);
+```
+
+#### Per-Component Configurations
+
+When rendering multiple component types, use the `components` property for tag-specific spy configs:
+
+```tsx
+import { render, getComponentSpies, h } from '@stencil/vitest';
+
+const { root } = await render(
+  <my-card cardTitle="Test">
+    <my-button slot="footer">Click me</my-button>
+  </my-card>,
+  {
+    spyOn: {
+      lifecycle: ['componentDidLoad'], // base - applies to all
+      components: {
+        'my-card': { props: ['cardTitle'] },
+        'my-button': { methods: ['handleClick'] },
+      },
+    },
+  },
+);
+
+const cardSpies = getComponentSpies(root);
+const buttonSpies = getComponentSpies(root.querySelector('my-button') as HTMLElement);
+
+// Both get base lifecycle spy + their specific config
+expect(cardSpies?.lifecycle.componentDidLoad).toHaveBeenCalled();
+expect(cardSpies?.props.cardTitle).toBeDefined();
+
+expect(buttonSpies?.lifecycle.componentDidLoad).toHaveBeenCalled();
+expect(buttonSpies?.methods.handleClick).toBeDefined();
+```
+
 ### Event Testing
 
 Test custom events emitted by your components:

package/dist/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAOlE,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAMtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,GAAE,cAAc,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;CAAO,GACvE,OAAO,CAAC,cAAc,CAAC,CAqBzB"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAQlE,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAMtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,GAAE,cAAc,GAAG;IAAE,aAAa,CAAC,EAAE,MAAM,GAAG,aAAa,CAAA;CAAO,GACvE,OAAO,CAAC,cAAc,CAAC,CAqBzB"}

package/dist/config.js

@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vitest/config';
-import { loadStencilConfig, getStencilSrcDir, getStencilOutputDirs, getStencilResolveAliases, } from './setup/config-loader.js';
+import { loadStencilConfig, getStencilSrcDir, getStencilOutputDirs, getStencilResolveAliases, getStencilHydratedFlag, } from './setup/config-loader.js';
 // Resolve the path to the stencil environment module at config load time
 // This is necessary for pnpm which doesn't hoist transitive dependencies
 const stencilEnvironmentPath = fileURLToPath(import.meta.resolve('@stencil/vitest/environments/stencil'));
@@ -130,6 +130,7 @@ function applyStencilDefaults(config, stencilConfig) {
         __STENCIL_PROD__: JSON.stringify(process.env.STENCIL_PROD === 'true'),
         __STENCIL_SERVE__: JSON.stringify(process.env.STENCIL_SERVE === 'true'),
         __STENCIL_PORT__: JSON.stringify(process.env.STENCIL_PORT || ''),
+        __STENCIL_HYDRATED_FLAG__: JSON.stringify(getStencilHydratedFlag(stencilConfig)),
     };
     if (!result.define) {
         result.define = stencilEnvDefines;
@@ -342,6 +343,7 @@ function enhanceProject(project, stencilConfig) {
         __STENCIL_PROD__: JSON.stringify(process.env.STENCIL_PROD === 'true'),
         __STENCIL_SERVE__: JSON.stringify(process.env.STENCIL_SERVE === 'true'),
         __STENCIL_PORT__: JSON.stringify(process.env.STENCIL_PORT || ''),
+        __STENCIL_HYDRATED_FLAG__: JSON.stringify(getStencilHydratedFlag(stencilConfig)),
     };
     if (!enhanced.define) {
         enhanced.define = stencilEnvDefines;

package/dist/core.d.ts

@@ -4,4 +4,6 @@ export { h } from '@stencil/core';
 export { render, waitForStable, waitForExist } from './testing/render.js';
 export { serializeHtml, prettifyHtml, SerializeOptions } from './testing/html-serializer.js';
 export type { RenderOptions, RenderResult } from './types.js';
+export { getComponentSpies, clearComponentSpies } from './testing/spy-helper.js';
+export type { SpyConfig, ComponentSpies } from './testing/spy-helper.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,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"}
+{"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;AAC9D,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACjF,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/core.js

@@ -4,3 +4,4 @@ import './testing/snapshot-serializer.js';
 export { h } from '@stencil/core';
 export { render, waitForStable, waitForExist } from './testing/render.js';
 export { serializeHtml, prettifyHtml } from './testing/html-serializer.js';
+export { getComponentSpies, clearComponentSpies } from './testing/spy-helper.js';

package/dist/globals.d.ts

@@ -21,3 +21,13 @@
 declare const __STENCIL_PROD__: boolean;
 declare const __STENCIL_SERVE__: boolean;
 declare const __STENCIL_PORT__: string;
+
+interface StencilHydratedFlag {
+  name: string;
+  selector: 'class' | 'attribute';
+  property: string;
+  initialValue: string;
+  hydratedValue: string;
+}
+
+declare const __STENCIL_HYDRATED_FLAG__: StencilHydratedFlag | null;

package/dist/setup/config-loader.d.ts

@@ -1,4 +1,4 @@
-import type { Config as StencilConfig } from '@stencil/core/internal';
+import type { Config as StencilConfig, HydratedFlag } from '@stencil/core/internal';
 /**
  * Load Stencil configuration from a file path
  * Uses jiti to handle TypeScript files in Node.js
@@ -12,6 +12,12 @@ export declare function getStencilSrcDir(config?: StencilConfig): string;
  * Get all output directories from Stencil config for exclusion
  */
 export declare function getStencilOutputDirs(config?: StencilConfig): string[];
+/**
+ * Get the hydrated flag configuration from Stencil config.
+ * Returns null if hydration indication is explicitly disabled.
+ * Returns defaults if not configured.
+ */
+export declare function getStencilHydratedFlag(config?: StencilConfig): HydratedFlag | null;
 /**
  * Create resolve aliases from Stencil config
  */

package/dist/setup/config-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config-loader.d.ts","sourceRoot":"","sources":["../../src/setup/config-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAItE;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC,CAsB9F;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAE/D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,EAAE,CAyCrE;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmBvF"}
+{"version":3,"file":"config-loader.d.ts","sourceRoot":"","sources":["../../src/setup/config-loader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAIpF;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC,CAsB9F;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAE/D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,EAAE,CAyCrE;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,YAAY,GAAG,IAAI,CAclF;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmBvF"}

package/dist/setup/config-loader.js

@@ -70,6 +70,26 @@ export function getStencilOutputDirs(config) {
     const validDirs = Array.from(outputDirs).filter((dir) => !dir.includes('..'));
     return validDirs.length > 0 ? validDirs : ['dist', 'www', 'build', '.stencil'];
 }
+/**
+ * Get the hydrated flag configuration from Stencil config.
+ * Returns null if hydration indication is explicitly disabled.
+ * Returns defaults if not configured.
+ */
+export function getStencilHydratedFlag(config) {
+    // If explicitly null, hydration indication is disabled
+    if (config?.hydratedFlag === null) {
+        return null;
+    }
+    // If undefined or object, return with defaults applied
+    const flag = config?.hydratedFlag;
+    return {
+        name: flag?.name ?? 'hydrated',
+        selector: flag?.selector ?? 'class',
+        property: flag?.property ?? 'visibility',
+        initialValue: flag?.initialValue ?? 'hidden',
+        hydratedValue: flag?.hydratedValue ?? 'inherit',
+    };
+}
 /**
  * Create resolve aliases from Stencil config
  */

package/dist/testing/render.d.ts

@@ -1,4 +1,5 @@
 import type { RenderResult } from '../types.js';
+import { type SpyConfig } from './spy-helper.js';
 interface RenderOptions {
     /**
      * Whether to clear existing stage containers before rendering. Defaults to true.
@@ -14,6 +15,10 @@ interface RenderOptions {
      * Defaults to true.
      */
     waitForReady?: boolean;
+    /**
+     * Spy configuration for this render call. Spies on methods, props, and lifecycle hooks.
+     */
+    spyOn?: SpyConfig;
 }
 /**
  * Poll until element has dimensions (is rendered/visible in real browser).

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,CAyCtG;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"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/testing/render.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAyC,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAExF,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;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA+FD;;;;GAIG;AACH,wBAAsB,aAAa,CAAC,iBAAiB,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAyCtG;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,CAqK7B"}

package/dist/testing/render.js

@@ -1,4 +1,5 @@
 import { render as stencilRender } from '@stencil/core';
+import { setRenderSpyConfig, getComponentSpies } from './spy-helper.js';
 // Track event spies
 const eventSpies = new WeakMap();
 /**
@@ -21,6 +22,66 @@ function isRealBrowser() {
     }
     return true;
 }
+/**
+ * Get the hydrated flag config, with defaults when not configured.
+ * Returns null if hydration is explicitly disabled.
+ */
+function getHydratedFlag() {
+    // If global is defined, use it (could be null if explicitly disabled)
+    if (typeof __STENCIL_HYDRATED_FLAG__ !== 'undefined') {
+        return __STENCIL_HYDRATED_FLAG__;
+    }
+    // Default to 'hydrated' class when no config loaded
+    return { name: 'hydrated', selector: 'class' };
+}
+/**
+ * Find the first custom element (tag contains '-') in the tree.
+ * If the element itself is a custom element, returns it.
+ * Otherwise walks down to find the topmost custom element child.
+ */
+function findCustomElement(element) {
+    if (element.tagName.includes('-')) {
+        return element;
+    }
+    // Breadth-first search for first custom element
+    const queue = Array.from(element.children);
+    while (queue.length > 0) {
+        const child = queue.shift();
+        if (child.tagName.includes('-')) {
+            return child;
+        }
+        queue.push(...Array.from(child.children));
+    }
+    return null;
+}
+/**
+ * Wait for element to be hydrated based on Stencil's hydrated flag config.
+ * Checks for the hydrated class or attribute as configured.
+ * Returns immediately if hydration is disabled (flag is null).
+ */
+async function waitForHydrated(element, timeout = 5000) {
+    const flag = getHydratedFlag();
+    // If hydration is disabled, skip this check
+    if (flag === null) {
+        return;
+    }
+    // Find the custom element to check - hydrated flag is applied to the component, not wrappers
+    const customElement = findCustomElement(element);
+    if (!customElement) {
+        return;
+    }
+    const start = Date.now();
+    while (Date.now() - start < timeout) {
+        const isHydrated = flag.selector === 'attribute'
+            ? customElement.hasAttribute(flag.name)
+            : customElement.classList.contains(flag.name);
+        if (isHydrated) {
+            return;
+        }
+        await new Promise((r) => requestAnimationFrame(r));
+    }
+    // Don't throw - component might not use hydration or might be ready without flag
+}
 /**
  * Poll until element has dimensions (is rendered/visible in real browser).
  * Accepts either an Element or a CSS selector string.
@@ -94,6 +155,10 @@ export async function render(template, options = {
         existingStages.forEach((stage) => stage.remove());
     }
     document.body.appendChild(container);
+    // Set per-render spy config before element creation
+    if (options.spyOn) {
+        setRenderSpyConfig(options.spyOn);
+    }
     if (typeof template === 'string') {
         // Handle string template - add as innerHTML
         container.innerHTML = template;
@@ -107,10 +172,19 @@ export async function render(template, options = {
     if (!element) {
         throw new Error('Failed to render component');
     }
+    // Wait for custom element to be defined
+    const tagName = element.tagName.toLowerCase();
+    if (tagName.includes('-')) {
+        await customElements.whenDefined(tagName);
+    }
     // Wait for component to be ready
     if (typeof element.componentOnReady === 'function') {
         await element.componentOnReady();
     }
+    // Clear per-render spy config after component is ready
+    if (options.spyOn) {
+        setRenderSpyConfig(null);
+    }
     // Define waitForChanges first so we can use it in the ready check
     function waitForChanges(documentElement = element) {
         return new Promise((resolve) => {
@@ -145,10 +219,8 @@ export async function render(template, 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);
-        }
+        // Wait for Stencil's hydration flag (skipped if hydration disabled)
+        await waitForHydrated(element);
         // Always wait for Stencil's update cycle to complete
         await waitForChanges();
     }
@@ -206,6 +278,8 @@ export async function render(template, options = {
     if (element.__stencil__getHostRef) {
         instance = element.__stencil__getHostRef()?.$lazyInstance$ || element;
     }
+    // Get spies if spyOn option was used
+    const spies = options.spyOn ? getComponentSpies(element) : undefined;
     return {
         root: element,
         waitForChanges,
@@ -213,5 +287,6 @@ export async function render(template, options = {
         setProps,
         unmount,
         spyOnEvent,
+        spies,
     };
 }

package/dist/testing/spy-helper.d.ts

@@ -0,0 +1,123 @@
+import { type Mock } from 'vitest';
+/**
+ * Base configuration for what to spy on in a component
+ */
+interface SpyConfigBase {
+    /**
+     * Method names to spy on (calls original implementation)
+     */
+    methods?: string[];
+    /**
+     * Pre-configured mocks to replace methods. The mock is applied before lifecycle runs,
+     * allowing you to control return values for methods called during initialization.
+     * @example
+     * ```ts
+     * const loadUserMock = vi.fn().mockResolvedValue({ id: 1, name: 'Test' });
+     * const { root } = await render(<my-component />, {
+     *   spyOn: { mocks: { loadUser: loadUserMock } }
+     * });
+     * expect(loadUserMock).toHaveBeenCalled();
+     * ```
+     */
+    mocks?: Record<string, Mock>;
+    /**
+     * Property names to spy on
+     */
+    props?: string[];
+    /**
+     * Lifecycle method names to spy on ('componentWillLoad', 'componentDidRender')
+     */
+    lifecycle?: string[];
+}
+/**
+ * Configuration for what to spy on in a component.
+ * Can include per-component overrides via the `components` property.
+ */
+export interface SpyConfig extends SpyConfigBase {
+    /**
+     * Per-component spy configurations, keyed by tag name.
+     * These override the base config for specific components.
+     * @example
+     * ```ts
+     * spyOn: {
+     *   lifecycle: ['componentDidLoad'], // applies to all
+     *   components: {
+     *     'my-select': { methods: ['open', 'close'] },
+     *     'my-option': { methods: ['select'] },
+     *   }
+     * }
+     * ```
+     */
+    components?: Record<string, SpyConfigBase>;
+}
+/**
+ * A mock with access to the original implementation
+ */
+interface MockWithOriginal extends Mock {
+    /**
+     * The original method implementation, bound to the component instance.
+     * Call this within mockImplementation to augment rather than replace.
+     */
+    original?: (...args: any[]) => any;
+}
+/**
+ * Container for all spies on a component instance
+ */
+export interface ComponentSpies {
+    /**
+     * Spies on component methods (calls through to original)
+     */
+    methods: Record<string, Mock>;
+    /**
+     * Mocks on component methods (pure stubs, doesn't call original).
+     * Each mock has an `original` property to access the original implementation.
+     */
+    mocks: Record<string, MockWithOriginal>;
+    /**
+     * Spies on property setters
+     */
+    props: Record<string, Mock>;
+    /**
+     * Spies on lifecycle methods
+     */
+    lifecycle: Record<string, Mock>;
+    /**
+     * The target instance (either $lazyInstance$ or the element itself for custom-elements output)
+     */
+    instance: any;
+    /**
+     * Reset all spies/mocks - clears call history AND resets implementations to default.
+     */
+    resetAll: () => void;
+}
+/**
+ * Set spy config for the next render call. Used internally by render().
+ * @internal
+ */
+export declare function setRenderSpyConfig(config: SpyConfig | null): void;
+/**
+ * Get the spies for a rendered component instance.
+ * Spies are lazily applied on first call to ensure the instance is fully constructed.
+ *
+ * @param element - The rendered component element
+ * @returns The spies object or undefined if no spies were registered
+ */
+export declare function getComponentSpies(element: HTMLElement): ComponentSpies | undefined;
+/**
+ * Clear spy registrations. Call this in afterEach to reset state between tests.
+ *
+ * @param tagName - Optional tag name to clear. If omitted, clears all registrations.
+ *
+ * @example
+ * ```ts
+ * afterEach(() => {
+ *   clearComponentSpies(); // Clear all
+ * });
+ *
+ * // Or clear specific component
+ * clearComponentSpies('my-button');
+ * ```
+ */
+export declare function clearComponentSpies(tagName?: string): void;
+export {};
+//# sourceMappingURL=spy-helper.d.ts.map

package/dist/testing/spy-helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spy-helper.d.ts","sourceRoot":"","sources":["../../src/testing/spy-helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEvC;;GAEG;AACH,UAAU,aAAa;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CAC5C;AAED;;GAEG;AACH,UAAU,gBAAiB,SAAQ,IAAI;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC;CACpC;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC9B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC5B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,EAAE,GAAG,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAgDD;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAEjE;AAmLD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,cAAc,GAAG,SAAS,CAkBlF;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAQ1D"}

package/dist/testing/spy-helper.js

@@ -0,0 +1,256 @@
+import { vi } from 'vitest';
+// Registry of components to spy on (by tag name)
+const spyTargets = {};
+// Store spies by element reference (after applied)
+const elementSpies = new WeakMap();
+// Store pending spy configs by element (before applied)
+const pendingSpies = new WeakMap();
+// Per-render spy config (set by render(), consumed by constructor)
+let pendingRenderConfig = null;
+/**
+ * Resolve the spy config for a specific tag, merging base config with per-component overrides.
+ */
+function resolveConfigForTag(config, tagName) {
+    const tagLower = tagName.toLowerCase();
+    const tagConfig = config.components?.[tagLower];
+    // Extract base config (everything except `components`)
+    const { components: _components, ...baseConfig } = config;
+    const hasBaseConfig = baseConfig.methods?.length ||
+        (baseConfig.mocks && Object.keys(baseConfig.mocks).length) ||
+        baseConfig.props?.length ||
+        baseConfig.lifecycle?.length;
+    if (!tagConfig && !hasBaseConfig) {
+        return null; // No config applies to this tag
+    }
+    if (!tagConfig) {
+        return baseConfig; // Only base config
+    }
+    if (!hasBaseConfig) {
+        return tagConfig; // Only tag-specific config
+    }
+    // Merge: tag-specific config extends base config
+    return {
+        methods: [...(baseConfig.methods || []), ...(tagConfig.methods || [])],
+        mocks: { ...(baseConfig.mocks || {}), ...(tagConfig.mocks || {}) },
+        props: [...(baseConfig.props || []), ...(tagConfig.props || [])],
+        lifecycle: [...(baseConfig.lifecycle || []), ...(tagConfig.lifecycle || [])],
+    };
+}
+/**
+ * Set spy config for the next render call. Used internally by render().
+ * @internal
+ */
+export function setRenderSpyConfig(config) {
+    pendingRenderConfig = config;
+}
+// Store original define before patching
+const origDefine = customElements.define.bind(customElements);
+/**
+ * Apply spies to a target instance (shared logic)
+ */
+function applySpies(target, config) {
+    const spies = {
+        methods: {},
+        mocks: {},
+        props: {},
+        lifecycle: {},
+        instance: target,
+        resetAll() {
+            // Reset all method spies
+            for (const spy of Object.values(this.methods)) {
+                spy.mockReset();
+            }
+            // Reset all mocks
+            for (const mock of Object.values(this.mocks)) {
+                mock.mockReset();
+            }
+            // Reset all prop spies
+            for (const spy of Object.values(this.props)) {
+                spy.mockReset();
+            }
+            // Reset all lifecycle spies
+            for (const spy of Object.values(this.lifecycle)) {
+                spy.mockReset();
+            }
+        },
+    };
+    // Spy on methods (calls through to original)
+    if (config.methods) {
+        for (const methodName of config.methods) {
+            const method = target[methodName];
+            if (typeof method === 'function' && !method.__isSpy) {
+                const spy = vi.fn((...args) => method.apply(target, args));
+                spy.__isSpy = true;
+                spies.methods[methodName] = spy;
+                Object.defineProperty(target, methodName, {
+                    value: spy,
+                    writable: true,
+                    configurable: true,
+                });
+            }
+        }
+    }
+    // Mock methods (use pre-configured mocks, original is accessible)
+    if (config.mocks) {
+        for (const [methodName, mock] of Object.entries(config.mocks)) {
+            const original = target[methodName];
+            const mockWithOriginal = mock;
+            mockWithOriginal.__isSpy = true;
+            // Store the original so users can call it if they want to augment rather than replace
+            if (typeof original === 'function') {
+                mockWithOriginal.original = (...args) => original.apply(target, args);
+            }
+            spies.mocks[methodName] = mockWithOriginal;
+            Object.defineProperty(target, methodName, {
+                value: mockWithOriginal,
+                writable: true,
+                configurable: true,
+            });
+        }
+    }
+    // Spy on props - need to intercept $instanceValues$ since Stencil stores props there
+    if (config.props) {
+        const hostRef = target.__stencil__getHostRef?.();
+        const instanceValues = hostRef?.$instanceValues$;
+        if (instanceValues) {
+            // Wrap the Map's set method to intercept prop changes
+            const originalSet = instanceValues.set.bind(instanceValues);
+            instanceValues.set = (key, value) => {
+                const result = originalSet(key, value);
+                // If this prop is being spied on, call the spy
+                if (config.props.includes(key) && spies.props[key]) {
+                    spies.props[key](value);
+                }
+                return result;
+            };
+        }
+        // Create spies for each prop
+        for (const propName of config.props) {
+            const spy = vi.fn();
+            spies.props[propName] = spy;
+        }
+    }
+    // Spy on lifecycle methods (auto-stub if not defined)
+    if (config.lifecycle) {
+        for (const lifecycleName of config.lifecycle) {
+            const method = target[lifecycleName];
+            let spy;
+            if (typeof method === 'function' && !method.__isSpy) {
+                // Method exists - wrap it
+                spy = vi.fn((...args) => method.apply(target, args));
+            }
+            else if (typeof method !== 'function') {
+                // Method doesn't exist - create stub so Stencil will call it
+                spy = vi.fn();
+            }
+            else {
+                // Already a spy
+                continue;
+            }
+            spy.__isSpy = true;
+            spies.lifecycle[lifecycleName] = spy;
+            Object.defineProperty(target, lifecycleName, {
+                value: spy,
+                writable: true,
+                configurable: true,
+            });
+        }
+    }
+    return spies;
+}
+// Patch customElements.define to intercept component registration
+customElements.define = function (name, ctor, options) {
+    const lc = name.toLowerCase();
+    const OrigCtor = ctor;
+    // Wrap ALL components to enable per-render spies without module-level registration
+    const Wrapped = class extends OrigCtor {
+        constructor(...args) {
+            super(...args);
+            // Check for spy config: per-render takes priority, then module-level
+            // Capture config now, at constructor time (before async callbacks)
+            const baseConfig = pendingRenderConfig || spyTargets[lc];
+            if (!baseConfig)
+                return; // No spying configured, quick exit
+            // Resolve config for this specific tag (handles per-component overrides)
+            const configToUse = resolveConfigForTag(baseConfig, lc);
+            if (!configToUse)
+                return; // No config applies to this tag
+            // After super(), registerHost has run and we have access to hostRef
+            const hostRef = this.__stencil__getHostRef?.();
+            if (hostRef && hostRef.$fetchedCbList$) {
+                // Lazy-load path: Use $fetchedCbList$ to apply spies after constructor but before render
+                const element = this;
+                // Capture config in closure for when callback executes
+                const capturedConfig = configToUse;
+                hostRef.$fetchedCbList$.push(() => {
+                    const instance = hostRef.$lazyInstance$;
+                    if (instance) {
+                        const spies = applySpies(instance, capturedConfig);
+                        elementSpies.set(element, spies);
+                    }
+                });
+            }
+            else if (hostRef) {
+                // Custom-elements output with Stencil runtime: element IS the instance
+                // Apply spies immediately since there's no lazy loading
+                const spies = applySpies(this, configToUse);
+                elementSpies.set(this, spies);
+            }
+            else {
+                // Custom-elements output path: element IS the instance
+                const spies = applySpies(this, configToUse);
+                elementSpies.set(this, spies);
+            }
+        }
+    };
+    return origDefine.call(customElements, name, Wrapped, options);
+};
+/**
+ * Get the spies for a rendered component instance.
+ * Spies are lazily applied on first call to ensure the instance is fully constructed.
+ *
+ * @param element - The rendered component element
+ * @returns The spies object or undefined if no spies were registered
+ */
+export function getComponentSpies(element) {
+    // Return existing spies if already applied
+    const existing = elementSpies.get(element);
+    if (existing) {
+        return existing;
+    }
+    // Check for pending spy config
+    const pending = pendingSpies.get(element);
+    if (pending) {
+        // Apply spies now that the instance is fully constructed
+        const spies = applySpies(pending.instance, pending.config);
+        elementSpies.set(element, spies);
+        pendingSpies.delete(element);
+        return spies;
+    }
+    return undefined;
+}
+/**
+ * Clear spy registrations. Call this in afterEach to reset state between tests.
+ *
+ * @param tagName - Optional tag name to clear. If omitted, clears all registrations.
+ *
+ * @example
+ * ```ts
+ * afterEach(() => {
+ *   clearComponentSpies(); // Clear all
+ * });
+ *
+ * // Or clear specific component
+ * clearComponentSpies('my-button');
+ * ```
+ */
+export function clearComponentSpies(tagName) {
+    if (tagName) {
+        delete spyTargets[tagName.toLowerCase()];
+    }
+    else {
+        for (const key of Object.keys(spyTargets)) {
+            delete spyTargets[key];
+        }
+    }
+}

package/dist/types.d.ts

@@ -23,6 +23,7 @@ export interface EventSpy {
      */
     length: number;
 }
+import type { SpyConfig } from './testing/spy-helper.js';
 /**
  * Component render options
  */
@@ -48,7 +49,13 @@ export interface RenderOptions {
      * Additional HTML attributes
      */
     attributes?: Record<string, string>;
+    /**
+     * Spy configuration for this render call. Spies on methods, props, and lifecycle hooks.
+     * Takes priority over module-level spyOnComponent() calls.
+     */
+    spyOn?: SpyConfig;
 }
+import type { ComponentSpies } from './testing/spy-helper.js';
 /**
  * Render result for component testing
  */
@@ -78,5 +85,9 @@ export interface RenderResult<T = HTMLElement, I = any> {
      * Spy on a custom event
      */
     spyOnEvent: (eventName: string) => EventSpy;
+    /**
+     * Component spies (only present when `spyOn` option is used)
+     */
+    spies?: ComponentSpies;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,EAAE,WAAW,EAAE,CAAC;IAEtB;;OAEG;IACH,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;IAEpC;;OAEG;IACH,SAAS,EAAE,WAAW,GAAG,SAAS,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC;IAE7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,WAAW,EAAE,CAAC,GAAG,GAAG;IACpD;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEb;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAExD;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,QAAQ,CAAC;CAC7C"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,EAAE,WAAW,EAAE,CAAC;IAEtB;;OAEG;IACH,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;IAEpC;;OAEG;IACH,SAAS,EAAE,WAAW,GAAG,SAAS,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC;IAE7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEpC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,WAAW,EAAE,CAAC,GAAG,GAAG;IACpD;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEb;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAExD;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,QAAQ,CAAC;IAE5C;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB"}

package/package.json

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