How do you set up unit for web components generated using Preact?

[zarahzachz]

(I hope this is the right forum for this question!)

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, which seems to be the recommended approach.

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). 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?

[rschristian]

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.

Have a link for that by any chance? You only need to start thinking about hydration if you're using SSR (and DSD w/ web components), however, that isn't something you'd usually see in a unit test.

You shouldn't need any additional configuration for Jest from Preact's side here, we're just taking a standard component and registering it as a custom element, though I'm not sure how well web components play with JSDOM and the like.

[zarahzachz]

Thanks for the reply!

I was able to get something working in my project by registering the component before our unit tests and it worked pretty seamlessly with the Preact tests 🎉

Gonna mark this as answered and thanks again for the reply!