Dom-testing-library: Queries can not find elements in open shadow dom (& weird prettyDOM output)

Created on 17 Aug 2020 · 4Comments · Source: testing-library/dom-testing-library

@testing-library/dom version: "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.

Most helpful comment

Hi @aryzing,

Check out this thread: https://github.com/testing-library/dom-testing-library/issues/413

TL;DR, the only way to get this support today is to use this: https://www.npmjs.com/package/testing-library__dom

It works exactly the same as @testing-library/dom except it also supports the shadow DOM.

kentcdodds on 17 Aug 2020

❤2 👍1

All 4 comments

Hi @aryzing,

Check out this thread: https://github.com/testing-library/dom-testing-library/issues/413

TL;DR, the only way to get this support today is to use this: https://www.npmjs.com/package/testing-library__dom

It works exactly the same as @testing-library/dom except it also supports the shadow DOM.

kentcdodds on 17 Aug 2020

❤2 👍1

Hi @aryzing,

Check out this thread: #413

TL;DR, the only way to get this support today is to use this: https://www.npmjs.com/package/testing-library__dom

It works exactly the same as @testing-library/dom except it also supports the shadow DOM.

Hello!
@testing-library__dom seems amazing and I'm eager to try it out.
I'm having difficulty understanding how to replace @testing-library/dom to @testing-library__dom in order to be able to access elements from shadow DOM.

Has anyone made this change and successfully accessed elements from shadow dom?

Stolle95 on 13 Jan 2021

@Stolle95 have a look at this repo.

aryzing on 13 Jan 2021

👍1

@aryzing Thanks for the quick answer. I can see you are testing with a click-event. Did you try to change the value in an input field?
Also, is it supposed to use the render function from @testing-library/react?

Stolle95 on 13 Jan 2021

Was this page helpful?

0 / 5 - 0 ratings