Use jest-dom to get Web Awesome components?

[david-athena]

I can't seem to find a way to grab Web Awesome components without adding a data-testid property to the component and using getByTestId. Is there a better way than this?

Hopefully this isn't too off-topic. Thanks!

[KonnorRogers]

Oh my. You have stumbled into a hornet's nest.

The TLDR is that Web Awesome utilizes the shadow DOM which assuming you're using @testing-library/dom or @testing-library/react etc, you're going to hit issues trying to grab the native elements in the shadow dom.

I actually have a package I made to address this issue here:

https://github.com/KonnorRogers/shadow-dom-testing-library

That extends the testing library queries to support shadow DOM.

Further reading if youre curious about DOM Testing Library and shadow dom and why I created the library:

testing-library/dom-testing-library#1188

testing-library/dom-testing-library#413

[david-athena]

While looking into a solution, I ran across your package. I'll try it out, thanks!

[marcomuser]

I have no idea which test runner you use but just for your interest: vitest 2.1 introduced a locator api of their own which supports shadow dom out of the box and makes jest-dom superfluous. In combination with web components I think it starts making more sense looking at test runners like vitest or playwright which can run tests in a real browser. See: https://github.com/vitest-dev/vitest/releases/tag/v2.1.0-beta.5

[claviska]

We use Web Test Runner + Playwright to test in real browsers. Works pretty well!