Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Queries can not find elements in open shadow dom (& weird prettyDOM output)
See original GitHub issue@testing-library/domversion:"7.22.0"- Testing Framework and version: Jest
"26.2.2" - DOM Environment:
"16.3.0"
Relevant code or config:
After appending a custom element to the DOM,
test("Renders content when attached to DOM", async (): Promise<void> => {
const testComponent = new TestComponent({ label: "counter" }, { count: 0 });
if (!testComponent.shadowRoot) {
throw new Error("Expected an open shadow DOM to be attached.");
}
document.body.append(testComponent);
// Works! But Typescript complains about the type of shadowRoot.
// Recommendation taken from https://github.com/testing-library/dom-testing-library/issues/413#issuecomment-660039128
// Unsure if this is even correct usage of testing-library (this is not documented).
expect(queryAllByText(testComponent.shadowRoot, "counter")).toHaveLength(1);
// Fails... :(
expect(screen.queryAllByText("counter")).toHaveLength(1);
});
What you did:
Queried for text that is in the DOM.
What happened:
Assertion fails b/c query is unable to find element in shadow DOM. Also, interestingly when using prettyDOM, the custom element is shown as an object rather than with its tag, <test-component>:
<body>
TestComponent {
"props": Object {
"label": "counter",
},
"setProps": [Function],
"setState": [Function],
"state": Object {
"count": 0,
},
}
</body>
Reproduction:
(do you have a non-React Codesandbox I could use?)
Managed to pull this together in the one suggested, but even the expect that is working on my local fails in the codesandbox. https://codesandbox.io/s/react-testing-library-demo-forked-126wx?file=/src/__tests__/hello.js
Problem description:
The queries are described as being able to find relevant nodes in DOM, yet are unable to find elements when they are in a custom element’s shadow DOM.
Suggested solution:
I’m sorry, i am unable to provide any suggestions beyond having queries meet the expectation that they find elements in the DOM, including when they are inside the shadow DOM of a custom element.
Issue Analytics
- State:
- Created 3 years ago
- Comments:11 (1 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I too am having difficulty using the proposed replacement ‘testing-library__dom’, even after looking at aryzing’s repo. Can this solution be documentend properly by the maintainer, as I didn’t find any documentation relating to it, and the repo link in npm just points to the spectrum components repo. I tried using it, but no queries executed on the ‘screen’ exported by the library are able to find elements within the shadow dom. So it seems like the statement that ‘It works exactly the same as @testing-library/dom except it also supports the shadow DOM’ is false. Unless I’m missing something ??? Again, documentation would be nice. I’m frustrated that shadow DOM is not something supported out of the box as it is a standard part of the web platform now for a couple of years and jsdom supports it apparently. If it is not going to be supported, I (& many others!) will have to abandon @testing-library/* and use something else like Playwright, which does support shadow dom queries transparently.
Please reopen this issue. I think shadow dom should be supported.