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

docs: add query ByRole performance notes #1349

Merged
merged 1 commit into from
Jan 13, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions docs/queries/byrole.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -462,3 +462,20 @@ You can query a specific element like this
```js
getByRole('alertdialog', {description: 'Your session is about to expire'})
```

## Performance
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me, but I'd like to keep it open for second reviewer.
One additional comment we might encourage is to use happy-dom as that should be faster.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good, I'd be happy to add a note about happy-dom as I agree it is likely the best option if it works for people (I've seen some users report it isn't a viable option for them yet).

What do we think about adding something like this?

"Firstly, if you are using jsdom we'd encourage trying happy-dom as it is much more efficient. If this works for you it is your best option, improving performance while keeping test confidence.

Otherwise the suggestions below may help."

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's leave it like this for now, as this will likely break something.
We can always revisit it later.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From my research, happy-dom is faster but lacks the fetureset of JSDOM, and that is reason folks often revert back to JSDOM after attempting a migration.


`getByRole` is the most preferred query to use as it most closely resembles the
user experience, however the calculations it must perform to provide this
confidence can be expensive (particularly with large DOM trees).

Where test performance is a concern it may be desirable to trade some of this
confidence for improved performance.

`getByRole` performance can be improved by setting the option
[`hidden`](#hidden) to `true` and thereby avoid expensive visibility checks.
Note that in doing so inaccessible elements will now be included in the result.

Another option may be to substitute `getByRole` for simpler `getByLabelText` and
`getByText` queries which can be significantly faster though less robust
alternatives.