stencil-awesome-test

1.0.6 verified Sat Apr 25 auth: no javascript

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.

Common errors

error TypeError: Cannot destructure property 'root' of 'page' as it is undefined. ↓

cause waitForChanges() not called after initial render, so the component is not yet attached to DOM.

fix

Add 'await page.waitForChanges();' after the render call before accessing page properties.

error Error: 'MyComponent' is not a valid constructor or is not a Stencil component. ↓

cause The component class is not exported or not a Stencil component decorated with @Component.

fix

Ensure the component is properly exported and uses the @Component decorator from @stencil/core.

Warnings

deprecated renderTestComponent() may be deprecated in future versions; use newTestSpecPage() instead. ↓

fix Replace renderTestComponent() with newTestSpecPage() from @stencil/core/testing.

gotcha Components array must include all custom elements used in the template, otherwise they won't be defined. ↓

fix Ensure the components array includes every component referenced in the html string.

breaking Breaking change: The returned page object's root property changed from ShadowRoot to HTMLElement in v1.0.0. ↓

fix Access page.root (now HTMLElement) instead of page.root.shadowRoot for component root.

Install

npm install stencil-awesome-test

yarn add stencil-awesome-test

pnpm add stencil-awesome-test

Imports

renderTestComponent

wrong

const renderTestComponent = require('stencil-awesome-test');

correct

import { renderTestComponent } from 'stencil-awesome-test';

Package is ESM-first; CommonJS require may work but is not recommended.

TestComponent

wrong

import TestComponent from 'stencil-awesome-test';

correct

import { TestComponent } from 'stencil-awesome-test';

TestComponent is a named export, not default.

ComponentProps

wrong

import { ComponentProps } from 'stencil-awesome-test';

correct

import type { ComponentProps } from 'stencil-awesome-test';

Use type import for TypeScript types to avoid runtime overhead.

Quickstart

Shows how to render a Stencil component with props and assert on the output using the test utility.

import { renderTestComponent } from 'stencil-awesome-test';
import { MyComponent } from './my-component';

it('renders with props', async () => {
  const page = await renderTestComponent({
    components: [MyComponent],
    html: '<my-component first="John"></my-component>'
  });
  expect(page.root).toBeTruthy();
  expect(page.root.textContent).toContain('John');
});