Post

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.

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

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.

A querySelectorDeep function can be written that will search downward in all roots.

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")

It's fairly easy to write these helpers. Here's a querySelectorUpwards (in all roots) function: github.com/lume/lume/bl...