Has anyone set up unit testing for web components created with Preact?
I'm working on a project converting React components to Preact (using preact/compat). We're also providing web component versions of our Preact components using preact-custom-element (https://github.com/preactjs/preact-custom-element), which seems to be the recommended approach (https://preactjs.com/guide/v10/web-components/#creating-a-web-component).
We've successfully set up our unit test infrastructure to test both React and Preact components (we're using testing-library and did the aliasing for Jest as seen in Preact's docs - https://preactjs.com/guide/v10/getting-started/#aliasing-in-jest). We'd like to have unit tests for the generated web components as well, but I'm finding conflicting information about this.
I've seen some resources say testing-library/preact also tests web components and I just need to be mindful to use @testing-library/user-event for testing user events and @testing-library/dom for shadow dom testing. Other resources say I have to have explicit hydration steps set up in our unit tests to test the web components by importing hydrate from Preact.
If I need to provide additional steps for hydration and such, is there recommended Jest aliasing for web components?
Web Components – Preact Guide
How to use web components with Preact.
Getting Started – Preact Guide
How to get started with Preact. We'll learn how to setup the tooling (if any) and get going with writing an application.
0 Replies