Diego Hernandez

For the past few weeks I've been experimenting with setting up component testing on a #lit #webcomponents project. There is very little documentation on how to do it:

My solution was:
- #vitest for running tests and assertions
- #JSDom and open-wc/testing-helpers for component rendering
- shadow-dom-testing-library for DOM querying

I might write a blog post about it

Nov 12, 2022 at 11:20pmMastodon for Android
Show threadBen DelarreNov 13, 2022

@diego_hernandez Modern Webs Web Test Runner (WTR) works incredibly well for this and tests in real browsers rather than JSDom emulation (very much preferable - test where your run): https://modern-web.dev/guides/test-runner/getting-started/

The openwc guide shows how to use this: https://open-wc.org/guides/developing-components/testing/

Their scaffolding generator projects get you going with wtr and storybook setups for easy WC development too https://open-wc.org/docs/development/generator/

Test Runner: Getting Started: Modern Web

Guides, tools and libraries for modern web development.

Modern Web
Show threadDiego HernandezNov 13, 2022
@bendelarre, I had some issues with getting WTR working in the project. We were already using vitest for other tests, but you have a good point. Now that I'm more familiar with this space, I'll give it another try.
Show threadBen DelarreNov 13, 2022
@diego_hernandez most common problem is wtr is bundleless by default so non edm and non standard import patterns will bite you. This can usually be fixed by either removing the non standard and cjs code or by using the commonjs and other rollup plugins.