{"id":18830,"library":"stencil-awesome-test","title":"stencil-awesome-test","description":"Provides generic test utilities for Stencil components, currently at version 1.0.6. Designed to simplify unit testing of Stencil-built web components, with TypeScript definitions included. Key differentiator: purpose-built for Stencil's testing patterns, reducing boilerplate when using tools like Jest.","status":"active","version":"1.0.6","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install stencil-awesome-test","lang":"bash","label":"npm"},{"cmd":"yarn add stencil-awesome-test","lang":"bash","label":"yarn"},{"cmd":"pnpm add stencil-awesome-test","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for Stencil component testing; must be >=2.","package":"@stencil/core","optional":false}],"imports":[{"note":"Package is ESM-first; CommonJS require may work but is not recommended.","wrong":"const renderTestComponent = require('stencil-awesome-test');","symbol":"renderTestComponent","correct":"import { renderTestComponent } from 'stencil-awesome-test';"},{"note":"TestComponent is a named export, not default.","wrong":"import TestComponent from 'stencil-awesome-test';","symbol":"TestComponent","correct":"import { TestComponent } from 'stencil-awesome-test';"},{"note":"Use type import for TypeScript types to avoid runtime overhead.","wrong":"import { ComponentProps } from 'stencil-awesome-test';","symbol":"ComponentProps","correct":"import type { ComponentProps } from 'stencil-awesome-test';"}],"quickstart":{"code":"import { renderTestComponent } from 'stencil-awesome-test';\nimport { MyComponent } from './my-component';\n\nit('renders with props', async () => {\n  const page = await renderTestComponent({\n    components: [MyComponent],\n    html: '<my-component first=\"John\"></my-component>'\n  });\n  expect(page.root).toBeTruthy();\n  expect(page.root.textContent).toContain('John');\n});","lang":"typescript","description":"Shows how to render a Stencil component with props and assert on the output using the test utility."},"warnings":[{"fix":"Replace renderTestComponent() with newTestSpecPage() from @stencil/core/testing.","message":"renderTestComponent() may be deprecated in future versions; use newTestSpecPage() instead.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure the components array includes every component referenced in the html string.","message":"Components array must include all custom elements used in the template, otherwise they won't be defined.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Access page.root (now HTMLElement) instead of page.root.shadowRoot for component root.","message":"Breaking change: The returned page object's root property changed from ShadowRoot to HTMLElement in v1.0.0.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add 'await page.waitForChanges();' after the render call before accessing page properties.","cause":"waitForChanges() not called after initial render, so the component is not yet attached to DOM.","error":"TypeError: Cannot destructure property 'root' of 'page' as it is undefined."},{"fix":"Ensure the component is properly exported and uses the @Component decorator from @stencil/core.","cause":"The component class is not exported or not a Stencil component decorated with @Component.","error":"Error: 'MyComponent' is not a valid constructor or is not a Stencil component."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}