Skip to main content
Version: v4.18

Testing

In order to ensure that your Stencil components work the way you expect, Stencil provides testing support out of the box. Stencil offers both unit testing and end-to-end testing capabilities.

Unit Testing vs. End-to-end Testing

Testing within Stencil is broken up into two distinct types: Unit tests and End-to-end (e2e) tests.

There are several philosophies on how testing should be done, and how to differentiate what should be considered a unit test versus an end-to-end test. Stencil takes an opinionated stance so developers have a description of each to better choose when to use each type of testing:

Unit tests focus on testing a component's methods in isolation. For example, when a method is given the argument X, it should return Y.

End-to-end tests focus on how the components are rendered in the DOM and how the individual components work together. For example, when my-component has the X attribute, the child component then renders the text Y, and expects to receive the event Z.

Library Support

Stencil currently supports the following tools for testing components:

  • Stencil Test Runner: a built-in test runner based on Jest for unit and end-to-end testing with Puppeteer to run within an actual browser in order to provide more realistic results.
  • WebdriverIO: a browser and mobile automation test framework for Node.js that allows you to run component and end-to-end tests across all browsers.
  • Playwright: an automated end-to-end testing framework that can run across all major browsers
info

We are actively working to support a wider range of testing tools, including Playwright. Stay tuned for updates!