does @solidjs/testing-library render shadowDom?
I'm trying to write unit tests for a custom element that wraps some elements inside a shadow DOM. The inner HTML of these and the shadow root's inner html doesn't include them even though they're available in browser. Does anyone have a workaround?
5 Replies
testing-library uses the render function. So if the underlying DOM implementation of your test runner (i.e. jsdom) supports shadow DOM, then it will be rendered.
That being said, solid-testing-library cannot look into the shadow DOM for elements.
You can alias @testing-library/dom with https://github.com/konnorrogers/shadow-dom-testing-library
GitHub
GitHub - KonnorRogers/shadow-dom-testing-library: An extension of D...
An extension of DOM-testing-library to provide hooks into the shadow dom - GitHub - KonnorRogers/shadow-dom-testing-library: An extension of DOM-testing-library to provide hooks into the shadow dom
Or use that for queries.
sorry, it's late on my end; I'll gladly answer further questions tomorrow.
Maybe I can extend
@solidjs/testing-library in a way that allows users to register a different version of the dom testing library, but I'm currently swamped, so this will have to wait for the weekend.Ya I was trying to use that but it only has selectors. I found https://github.com/jsdom/jsdom/pull/2347. It looks like jsdom supports it and I'm setting up vitest with a jsdom env. I think that it may be a problem where it doesn't wait for the element's definition to load. As I looked at it again and it seems to render the shadow root with my FOUC styles saying display:none if it's not defined but it doesn't wait to load the custom element's definition where my custom button pops in. Any advice?
GitHub
Build software better, together
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 330 million projects.
If nothing else helps, use waitFor. I don't like it, but web components are incredibly unhelpful when it comes to managing lifecycles.