Post

Rogin Farrer
@rogin.dev

Web component library maintainers, how do you intend for your users to write tests in React with your components? It feels like shadow roots pose a big challenge. I’m wondering if we might need to develop some kind of test harness to abstract the shadow DOM away.

0 reposts1 like

Burton Smith
@stuffbreaker.bsky.social

Component consumers should not be testing the internals of your components. That's the component dev's job. You should definitely have APIs available for devs to trigger interactions and validate the APIs are set correctly.

Joe Pea
@joe.trusktr.io

One way is visual regression testing, for example with Web Test Runner it will take a screenshot of an element and compare it against the checked-in reference. Also usually CE authors leave the root open, so el.shadowRoot.querySelector is right there.

Rogin Farrer
@rogin.dev

Unfortunately this isn’t really feasible with a big company that’s heavily invested in Jest and RTL. And I think exposing shadow roots probably isn’t enough, especially if you have other web components nested in shadow roots with their own roots

Michael Warren
@michaelwarren.dev

i expose certain internal dom elements needed for tests and exception configuration. i call them “internal access props”. they return a dom element instead of another primitive. i expect consumers use those because shadow dom spelunking is brittle af.