Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include roles from shadowDOM in Error message #999

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

kilmc
Copy link

@kilmc kilmc commented Aug 2, 2021

What:
Adds a check which improves Error messages for folks testing Web Components using getByRole.

Note: This PR is focused on getting a correct Error message and not a passing test. This fix will be most useful to folks using dom-testing-library in conjunction with the wrapper library referenced in this comment in #413.

Why:
When testing Web Components the returned error is incorrect. The example below walks you through this case.

<div>
  <h2>An example</h2>
  <custom-button />
</div>

Contents of the shadowDOM for <custom-button>

<button>Button text</button>

Below is a test assertion with a minor typo in it.

expect(screen.getByRole('button', { name: 'Button texx' })).toBeVisible() // Throws an error

Before the change in this PR the error message returned is:

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

After the change the error becomes:

"Unable to find an accessible element with the role "button" and name "Button texx"

      Here are the accessible roles:

        button:

        Name "Button text":
        <button />

        --------------------------------------------------

How:
Adds a check for node.shadowRoot in flattenDom to ensure children inside of Web Components are traversed.

Checklist:

  • Documentation added to the
    docs site N/A
  • Tests
  • TypeScript definitions updated N/A
  • Ready to be merged

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 2, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2cc2867:

Sandbox Source
react-testing-library-examples Configuration

@kilmc kilmc changed the title Include roles from shadowDOM in suggestion output Include roles from shadowDOM in Error message Aug 2, 2021
@kilmc kilmc marked this pull request as ready for review August 2, 2021 14:36
@kilmc
Copy link
Author

kilmc commented Sep 21, 2021

Is there anything I can do to move this along, even if it's going to be rejected?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant