Description
@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.