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.

Rogin Farrer
@rogin.dev

Or maybe the web component should expose the methods required for tests? Element.openMenu(), Element.selectOption(), etc

0 reposts1 like

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

Joe Pea
@joe.trusktr.io

Same with querySelectorAllDeep. Patching attachShadow will ensure it works with closed roots. Usage would then be easy for test writers: const attr = querySelectorDeep('.foo').getAttrribute('foo') expect(attr).toBe("value")