diff --git a/test-project/src/components/my-button/my-button.spec.tsx b/test-project/src/components/my-button/my-button.spec.tsx index 452d42c..121eff5 100644 --- a/test-project/src/components/my-button/my-button.spec.tsx +++ b/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(); + + if (!instance) return; + + expect(instance.internalValue).toBe('variant:primary'); + }); }); diff --git a/test-project/src/components/my-button/my-button.tsx b/test-project/src/components/my-button/my-button.tsx index 103a3af..c0b8605 100644 --- a/test-project/src/components/my-button/my-button.tsx +++ b/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; + @Event() buttonClick!: EventEmitter; private handleClick = (event: MouseEvent) => { if (!this.disabled) { diff --git a/test-project/src/components/my-label/my-label.plugin.spec.tsx b/test-project/src/components/my-label/my-label.plugin.spec.tsx index 262bbdd..8b5ee82 100644 --- a/test-project/src/components/my-label/my-label.plugin.spec.tsx +++ b/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 // 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(); + + if (!instance) return; + + expect(instance.myValue).toBe('hello world'); + expect(instance.state).toEqual({ property: 'value' }); + }); }); diff --git a/test-project/src/components/my-label/my-label.tsx b/test-project/src/components/my-label/my-label.tsx index b306ed1..807c571 100644 --- a/test-project/src/components/my-label/my-label.tsx +++ b/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', }; diff --git a/test-project/tsconfig.json b/test-project/tsconfig.json index d8e6ce3..8ad0a84 100644 --- a/test-project/tsconfig.json +++ b/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"],