Queries can not find elements in open shadow dom (& weird prettyDOM output) #742

aryzing · 2020-08-17T16:02:15Z

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

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.

The text was updated successfully, but these errors were encountered:

kentcdodds · 2020-08-17T16:42:08Z

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.

Stolle95 · 2021-01-13T12:05:33Z

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?

aryzing · 2021-01-13T12:59:45Z

@Stolle95 have a look at this repo.

Stolle95 · 2021-01-13T13:38:03Z

@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?

bigfish · 2021-05-12T15:59:01Z

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.

gabrielbeauchemin · 2021-09-14T18:40:29Z

Please reopen this issue. I think shadow dom should be supported.

mkjoc · 2021-09-19T07:31:45Z

Anyone know if this issue got resolved ? I have same issue of shadow dom as above mentioned.

gabrielbeauchemin · 2021-09-19T10:32:46Z

No this is not resolved on the testing-library app. If you have your own components wrapping imported web components, you should still be able to test your them (no need to have shadow dom supported to test that in most cases).

If you have implemented your own web components and would like to test them with the testing-library app, it will not work because shadow dom is not supported for now. In htis case you can look at testing-library__dom, Stencil or Puppeteer.

alineDiesel · 2021-11-18T15:12:30Z

Im with the same problem. Any more suggestions?

eriklharper · 2022-07-15T16:27:12Z

Please reopen this issue. I think shadow dom should be supported.

I agree. If this is a DOM testing library then it should be able to test all forms of DOM.

ThijSlim · 2022-08-02T13:12:12Z

Just recently a package appeared which makes it really easy to interact with the shadow Dom using Testing Library methods:
https://www.npmjs.com/package/shadow-dom-testing-library

kentcdodds closed this as completed Aug 17, 2020

MatthiasKainer mentioned this issue Oct 13, 2021

feat(queryconfig): Allows configuring a different element query mechanism #1054

Open

4 tasks

MatthiasKainer mentioned this issue Oct 25, 2021

Draft: feat(query-deep): Using a query selector that supports queries into the shadow dom of elements #1069

Closed

4 tasks

This was referenced Apr 14, 2022

Update va-select events department-of-veterans-affairs/component-library#351

Closed

[Select] React Testing Library does not find select event on VaSelect component department-of-veterans-affairs/vets-design-system-documentation#671

Closed

camilaibs mentioned this issue Apr 26, 2022

[Techdocs] Addons test utilities backstage/backstage#11073

Merged

5 tasks

ariefurtado mentioned this issue Jun 24, 2022

[Bug] Missing shadow dom storybookjs/testing-library#24

Open

Mottie mentioned this issue Apr 19, 2023

Add list loop + summary pattern documentation department-of-veterans-affairs/vets-design-system-documentation#1697

Open

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Queries can not find elements in open shadow dom (& weird prettyDOM output) #742

Queries can not find elements in open shadow dom (& weird prettyDOM output) #742

aryzing commented Aug 17, 2020

kentcdodds commented Aug 17, 2020

Stolle95 commented Jan 13, 2021

aryzing commented Jan 13, 2021

Stolle95 commented Jan 13, 2021 •

edited

Loading

bigfish commented May 12, 2021

gabrielbeauchemin commented Sep 14, 2021

mkjoc commented Sep 19, 2021

gabrielbeauchemin commented Sep 19, 2021

alineDiesel commented Nov 18, 2021

eriklharper commented Jul 15, 2022

ThijSlim commented Aug 2, 2022

Queries can not find elements in open shadow dom (& weird prettyDOM output) #742

Queries can not find elements in open shadow dom (& weird prettyDOM output) #742

Comments

aryzing commented Aug 17, 2020

Relevant code or config:

What you did:

What happened:

Reproduction:

Problem description:

Suggested solution:

kentcdodds commented Aug 17, 2020

Stolle95 commented Jan 13, 2021

aryzing commented Jan 13, 2021

Stolle95 commented Jan 13, 2021 • edited Loading

bigfish commented May 12, 2021

gabrielbeauchemin commented Sep 14, 2021

mkjoc commented Sep 19, 2021

gabrielbeauchemin commented Sep 19, 2021

alineDiesel commented Nov 18, 2021

eriklharper commented Jul 15, 2022

ThijSlim commented Aug 2, 2022

Stolle95 commented Jan 13, 2021 •

edited

Loading