chore: demo checking instance props

test-project/src/components/my-button/my-button.spec.tsx

@@ -5,6 +5,7 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { render, type RenderResult } from '@stencil/vitest';
 import { h } from '@stencil/core';
+import { type MyButton } from './my-button';
 
 describe('my-button - spec tests', () => {
   let result: RenderResult;
@@ -143,4 +144,12 @@ describe('my-button - spec tests', () => {
       expect(button?.classList.contains('button--danger')).toBe(true);
     });
   });
+
+  it('can get the class instance properties', async () => {
+    const { instance } = await render<HTMLMyButtonElement, MyButton>(<my-button variant="primary" />);
+
+    if (!instance) return;
+
+    expect(instance.internalValue).toBe('variant:primary');
+  });
 });

test-project/src/components/my-button/my-button.tsx

@@ -9,6 +9,10 @@ import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';
   shadow: true,
 })
 export class MyButton {
+  get internalValue() {
+    return 'variant:' + this.variant;
+  }
+
   /**
    * The button variant style
    */
@@ -27,7 +31,7 @@ export class MyButton {
   /**
    * Emitted when the button is clicked
    */
-  @Event() buttonClick: EventEmitter<MouseEvent>;
+  @Event() buttonClick!: EventEmitter<MouseEvent>;
 
   private handleClick = (event: MouseEvent) => {
     if (!this.disabled) {

test-project/src/components/my-label/my-label.plugin.spec.tsx

@@ -22,7 +22,8 @@ vi.mock('../../utils/index.js', () => ({
 // Import the component source — the plugin transforms it on-the-fly
 // and the resulting customElements.define() call registers <my-label>
 // the moment this import resolves.
-import './my-label.tsx';
+import { MyLabel } from './my-label';
+import './my-label';
 import { capitalize } from '../../utils/index.js';
 
 describe('my-label — module mocking via stencilVitestPlugin', () => {
@@ -61,4 +62,13 @@ describe('my-label — module mocking via stencilVitestPlugin', () => {
     expect(root.shadowRoot!.querySelector('span')?.textContent).toBe('UPPER:CHANGED state: value');
     expect(capitalize).toHaveBeenCalledTimes(2);
   });
+
+  it('can get the class instance properties', async () => {
+    const { instance } = await render<HTMLMyLabelElement, MyLabel>(<my-label value="world" />);
+
+    if (!instance) return;
+
+    expect(instance.myValue).toBe('hello world');
+    expect(instance.state).toEqual({ property: 'value' });
+  });
 });

test-project/src/components/my-label/my-label.tsx

@@ -14,6 +14,10 @@ export class MyLabel {
   /** Raw text to display — run through `capitalize()` before rendering */
   @Prop() value: string = '';
 
+  get myValue() {
+    return 'hello' + ' ' + this.value;
+  }
+
   @State() state = {
     property: 'value',
   };

test-project/tsconfig.json

@@ -15,10 +15,9 @@
     "jsxFactory": "h",
     "jsxFragmentFactory": "Fragment",
     "types": ["vitest/globals", "@vitest/browser/matchers", "@stencil/vitest/globals"],
-    "baseUrl": ".",
     "paths": {
-      "@utils": ["src/utils/index.ts"],
-      "@utils/*": ["src/utils/*"]
+      "@utils": ["./src/utils/index.ts"],
+      "@utils/*": ["./src/utils/*"]
     }
   },
   "include": ["src"],