{"_id":"@johnjenkins/stencil-vitest","_rev":"4557620","name":"@johnjenkins/stencil-vitest","description":"First-class testing utilities for Stencil design systems with Vitest","dist-tags":{"latest":"0.1.1"},"maintainers":[{"name":"johnny.jenkins","email":""}],"time":{"modified":"2026-04-09T17:24:52.000Z","created":"2025-12-23T00:04:10.245Z","0.1.1":"2025-12-23T00:20:31.611Z","0.1.0":"2025-12-23T00:04:10.245Z"},"users":{},"versions":{"0.1.1":{"name":"@johnjenkins/stencil-vitest","version":"0.1.1","description":"First-class testing utilities for Stencil design systems with Vitest","license":"MIT","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","bin":{"stencil-test":"dist/bin/stencil-test.js"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"},"./config":{"types":"./dist/config.d.ts","import":"./dist/config.js","require":"./dist/config.js"},"./mock-doc-setup":{"types":"./dist/setup/mock-doc-setup.d.ts","import":"./dist/setup/mock-doc-setup.js"},"./jsdom-setup":{"types":"./dist/setup/jsdom-setup.d.ts","import":"./dist/setup/jsdom-setup.js"},"./happy-dom-setup":{"types":"./dist/setup/happy-dom-setup.d.ts","import":"./dist/setup/happy-dom-setup.js"},"./vitest":{"types":"./dist/environments/stencil.d.ts","import":"./dist/environments/stencil.js"}},"keywords":["stencil","testing","vitest","web components","component testing"],"scripts":{"build":"tsc && tsc -p tsconfig.bin.json","dev":"tsc --watch","test":"pnpm --filter test-project test","lint":"eslint .","lint:fix":"eslint . --fix","format":"prettier --check .","format:fix":"prettier --write .","knip":"knip","quality":"pnpm format && pnpm lint && pnpm knip","quality:fix":"pnpm format:fix && pnpm lint:fix && pnpm knip"},"engines":{"node":"^20.0.0 || ^22.0.0 || >=24.0.0"},"packageManager":"pnpm@10.26.0","peerDependencies":{"@stencil/core":"^4.0.0","vitest":"^4.0.0 || ^3.0.0 || ^2.0.0"},"peerDependenciesMeta":{"@playwright/test":{"optional":true},"@wdio/globals":{"optional":true},"jsdom":{"optional":true},"happy-dom":{"optional":true},"@vitest/browser-webdriverio":{"optional":true},"@vitest/browser-playwright":{"optional":true}},"dependencies":{"jiti":"^2.6.1","local-pkg":"^1.1.2","vitest-environment-stencil":"~0.1.0"},"devDependencies":{"@eslint/js":"^9.39.2","@stencil/core":"^4.0.0","@types/node":"^20.19.27","@typescript-eslint/eslint-plugin":"^8.50.0","@typescript-eslint/parser":"^8.50.0","@vitest/coverage-v8":"^4.0.0","eslint":"^9.39.2","knip":"^5.76.3","prettier":"^3.7.4","typescript":"~5.8.3","vitest":"^4.0.0"},"_id":"@johnjenkins/stencil-vitest@0.1.1","gitHead":"e9f174a0b4c9dd5227781068bd58e4d551e7cc95","_nodeVersion":"22.14.0","_npmVersion":"11.1.0","dist":{"shasum":"87e3a799c566e89c037e524d8e91a9a3666c6345","size":25539,"noattachment":false,"key":"/@johnjenkins/stencil-vitest/-/@johnjenkins/stencil-vitest-0.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@johnjenkins/stencil-vitest/download/@johnjenkins/stencil-vitest-0.1.1.tgz"},"_npmUser":{"name":"johnny.jenkins","email":"johnljenkins@hotmail.com"},"directories":{},"maintainers":[{"name":"johnny.jenkins","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/stencil-vitest_0.1.1_1766449231432_0.15462775731278522"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-12-23T00:20:31.611Z","publish_time":1766449231611,"_source_registry_name":"default","_cnpm_publish_time":1766449231611},"0.1.0":{"name":"@johnjenkins/stencil-vitest","version":"0.1.0","description":"First-class testing utilities for Stencil design systems with Vitest","license":"MIT","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","bin":{"stencil-test":"dist/bin/stencil-test.js"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"},"./config":{"types":"./dist/config.d.ts","import":"./dist/config.js","require":"./dist/config.js"},"./mock-doc-setup":{"types":"./dist/setup/mock-doc-setup.d.ts","import":"./dist/setup/mock-doc-setup.js"},"./jsdom-setup":{"types":"./dist/setup/jsdom-setup.d.ts","import":"./dist/setup/jsdom-setup.js"},"./happy-dom-setup":{"types":"./dist/setup/happy-dom-setup.d.ts","import":"./dist/setup/happy-dom-setup.js"},"./vitest":{"types":"./dist/environments/stencil.d.ts","import":"./dist/environments/stencil.js"}},"keywords":["stencil","testing","vitest","web components","component testing"],"scripts":{"build":"tsc && tsc -p tsconfig.bin.json","dev":"tsc --watch","test":"pnpm --filter test-project test","lint":"eslint .","lint:fix":"eslint . --fix","format":"prettier --check .","format:fix":"prettier --write .","knip":"knip","quality":"pnpm format && pnpm lint && pnpm knip","quality:fix":"pnpm format:fix && pnpm lint:fix && pnpm knip"},"engines":{"node":"^20.0.0 || ^22.0.0 || >=24.0.0"},"packageManager":"pnpm@10.26.0","peerDependencies":{"@stencil/core":"^4.0.0","vitest":"^4.0.0 || ^3.0.0 || ^2.0.0"},"peerDependenciesMeta":{"@playwright/test":{"optional":true},"@wdio/globals":{"optional":true},"jsdom":{"optional":true},"happy-dom":{"optional":true},"@vitest/browser-webdriverio":{"optional":true},"@vitest/browser-playwright":{"optional":true}},"dependencies":{"jiti":"^2.6.1","local-pkg":"^1.1.2","vitest-environment-stencil":"workspace:*"},"devDependencies":{"@eslint/js":"^9.39.2","@stencil/core":"^4.0.0","@types/node":"^20.19.27","@typescript-eslint/eslint-plugin":"^8.50.0","@typescript-eslint/parser":"^8.50.0","@vitest/coverage-v8":"^3.0.0","eslint":"^9.39.2","knip":"^5.76.3","prettier":"^3.7.4","typescript":"~5.8.3","vitest":"^4.0.0"},"_id":"@johnjenkins/stencil-vitest@0.1.0","gitHead":"e9f174a0b4c9dd5227781068bd58e4d551e7cc95","_nodeVersion":"22.14.0","_npmVersion":"11.1.0","dist":{"shasum":"50fe36e8c76bbead3c23161153a5126bf9ba7ce9","size":25541,"noattachment":false,"key":"/@johnjenkins/stencil-vitest/-/@johnjenkins/stencil-vitest-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@johnjenkins/stencil-vitest/download/@johnjenkins/stencil-vitest-0.1.0.tgz"},"_npmUser":{"name":"johnny.jenkins","email":"johnljenkins@hotmail.com"},"directories":{},"maintainers":[{"name":"johnny.jenkins","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/stencil-vitest_0.1.0_1766448250079_0.696664496957142"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-12-23T00:04:10.245Z","publish_time":1766448250245,"_source_registry_name":"default","_cnpm_publish_time":1766448250245}},"readme":"# @johnjenkins/stencil-vitest\n\nFirst-class testing utilities for Stencil components, powered by Vitest.\n\n## Installation\n\n```bash\nnpm i --save-dev @johnjenkins/stencil-vitest vitest\n```\n\nFor browser testing, also install:\n\n```bash\nnpm i -D @vitest/browser-preview\n```\n\nor\n\n```bash\nnpm i -D @vitest/browser-webdriverio\n```\n\n## Quick Start\n\n### 1. Create `vitest.config.ts`\n\nUse `defineVitestConfig` to create your Vitest configuration with Stencil enhancements:\n\n```typescript\nimport { defineVitestConfig } from '@johnjenkins/stencil-vitest/config';\nimport { playwright } from '@vitest/browser-playwright';\n// or import { wdio } from '@vitest/browser-webdriverio';\n\nexport default defineVitestConfig({\n  stencilConfig: './stencil.config.ts',\n  test: {\n    projects: [\n      // Unit tests - node environment for functions / logic\n      {\n        test: {\n          name: 'unit',\n          include: ['src/**/*.unit.{ts,tsx}'],\n          environment: 'node',\n        },\n      },\n\n      // Component tests - via a node DOM of your choice\n      {\n        test: {\n          name: 'spec',\n          include: ['src/**/*.spec.{ts,tsx}'],\n          environment: 'stencil',\n          setupFiles: ['./vitest-setup.ts'],\n          // environmentOptions: {\n          //   stencil: {\n          //     domEnvironment: 'happy-dom' // 'jsdom' | 'mock-doc' (default), Make sure to install relevant packages\n          //   },\n          // },\n        },\n      },\n\n      // Browser tests - real browsers e.g. via Playwright\n      {\n        test: {\n          name: 'browser',\n          include: ['src/**/*.test.{ts,tsx}'],\n          setupFiles: ['./vitest-setup.ts'],\n          browser: {\n            enabled: true,\n            provider: playwright(),\n            headless: true,\n            instances: [{ browser: 'chromium' }],\n          },\n        },\n      },\n    ],\n  },\n});\n```\n\n[refer Vitest documentation for all configuration options](https://vitest.dev/config/)\n\n### 2. Load your components via `vitest-setup.ts`\n\nLoad your components:\n\n```typescript\n// Load Stencil components, adjusting according to your build output of choice*\n// (*Bear in mind, you may need `buildDist: true` (in your stencil.config)\n// or `--prod` to use an output other than the browser lazy-loader)\nawait import('./dist/test-components/test-components.esm.js');\n\nexport {};\n```\n\n### 3. Write Tests\n\n```typescript\nimport { describe, it, expect } from 'vitest';\nimport { render, h } from '@johnjenkins/stencil-vitest';\n\ndescribe('my-button', () => {\n  it('renders with text', async () => {\n    const { root } = await render(<my-button label=\"Click me\" />);\n    expect(root).toHaveTextContent('Click me');\n  });\n\n  it('responds to clicks', async () => {\n    const { root } = await render(<my-button label=\"Click\" />);\n    root.click();\n    await root.waitForChanges();\n    expect(root).toHaveClass('clicked');\n  });\n});\n```\n\n### 4. Run tests\n\n```json\n// package.json\n{\n  \"scripts\": {\n    \"test\": \"stencil-test\",\n    \"test:watch\": \"stencil-test --watch\",\n    \"test:e2e\": \"stencil-test --project browser\",\n    \"test:spec\": \"stencil-test --project spec\"\n  }\n}\n```\n\n## API\n\n### Rendering\n\n#### `render(VNode)`\n\nRender a component for testing.\n\n```tsx\nimport { render, h } from '@johnjenkins/stencil-vitest';\nconst { root, waitForChanges } = await render(<my-component name=\"World\" />);\n\n// Access the element\nexpect(root.textContent).toContain('World');\n\n// Update props\nroot.name = 'Stencil';\nawait waitForChanges();\n```\n\n### Available matchers:\n\n```typescript\n// DOM assertions\nexpect(element).toHaveClass('active');\nexpect(element).toHaveClasses(['active', 'primary']);\nexpect(element).toMatchClasses(['active']); // Partial match\nexpect(element).toHaveAttribute('aria-label', 'Close');\nexpect(element).toEqualAttribute('type', 'button');\nexpect(element).toEqualAttributes({ type: 'button', disabled: true });\nexpect(element).toHaveProperty('value', 'test');\nexpect(element).toHaveTextContent('Hello World');\nexpect(element).toEqualText('Exact text match');\nexpect(element).toBeVisible();\n\n// Shadow DOM\nexpect(element).toHaveShadowRoot();\nexpect(element).toEqualHtml('<div>Expected HTML</div>');\nexpect(element).toEqualLightHtml('<div>Light DOM only</div>');\n```\n\n### Event Testing\n\nTest custom events emitted by your components:\n\n```typescript\nconst { root } = await render(<my-button />);\n\n// Spy on events\nconst clickSpy = root.spyOnEvent('buttonClick');\nconst changeSpy = root.spyOnEvent('valueChange');\n\n// Trigger events\nroot.click();\nawait root.waitForChanges();\n\n// Assert events were emitted\nexpect(clickSpy).toHaveReceivedEvent();\nexpect(clickSpy).toHaveReceivedEventTimes(1);\nexpect(clickSpy).toHaveReceivedEventDetail({ buttonId: 'my-button' });\n\n// Access event data\nexpect(clickSpy.events).toHaveLength(1);\nexpect(clickSpy.firstEvent?.detail).toEqual({ buttonId: 'my-button' });\nexpect(clickSpy.lastEvent?.detail).toEqual({ buttonId: 'my-button' });\n```\n\n## Snapshots\n\nThe package includes a custom snapshot serializer for Stencil components that properly handles shadow DOM:\n\n```typescript\nimport { render, h } from '@johnjenkins/stencil-vitest';\n...\nconst { root } = await render(<my-component />);\nexpect(root).toMatchSnapshot();\n```\n\n**Snapshot output example:**\n\n```html\n<my-component>\n  <mock:shadow-root>\n    <button class=\"primary\">\n      <slot />\n    </button>\n  </mock:shadow-root>\n  Click me\n</my-component>\n```\n\n## Screenshot Testing\n\nBrowser tests can include screenshot comparisons using Vitest's screenshot capabilities:\n\n```tsx\nimport { render, h } from '@johnjenkins/stencil-vitest';\n...\nconst { root } = await render(<my-button variant=\"primary\">Primary Button</my-button>);\nawait expect(root).toMatchScreenshot();\n```\n\nRefer to Vitest's [screenshot testing documentation](https://vitest.dev/guide/snapshot.html#visual-snapshots) for more details.\n\n## CLI\n\nThe `stencil-test` CLI wraps both Stencil builds with Vitest testing.\n\n### Add to package.json\n\n```json\n{\n  \"scripts\": {\n    \"test\": \"stencil-test\",\n    \"test:watch\": \"stencil-test --watch\"\n  }\n}\n```\n\n### Usage\n\n```bash\n# Build once, test once\nstencil-test\n\n# Watch mode (rebuilds on component changes, interactive Vitest)\nstencil-test --watch\n\n# Watch mode with dev server\nstencil-test --watch --serve\n\n# Production build before testing\nstencil-test --prod\n\n# Pass arguments to Vitest\nstencil-test --watch --coverage\n\n# Test specific files\nstencil-test button.spec.ts\n\n# Test specific project\nstencil-test --project browser\n```\n\n### CLI Options\n\nThe `stencil-test` CLI supports most of Stencil's CLI options and all of Vitest CLI options\n\n- For full Stencil CLI options, see [Stencil CLI docs](https://stenciljs.com/docs/cli).\n- For full Vitest CLI options, see [Vitest CLI docs](https://vitest.dev/guide/cli.html).\n\n## License\n\nMIT\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for development setup and guidelines.\n","_attachments":{},"license":"MIT"}