testing-library / testing-library/testing-library-docs

Global custom query setup example breaks screen

Open
#1,486 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
479
Forks
740
PR merge metrics
No merged PRs in 30d

Description

The setup example for adding custom queries globally for (at least) React seems to break screen-specific functionality such as screen.debug().

If I understand correctly (via https://github.com/testing-library/dom-testing-library/issues/516#issuecomment-1025096164) this bit:

const customScreen = within(document.body, allQueries)

should be something like this:

const customScreen = { ...screen, ...within(document.body, allQueries) };

And of course that means you have to import screen, too.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the custom-query setup example at the linked React Testing Library documentation page and inspect how the custom screen is assembled. Verify the corrected example preserves screen-specific functionality such as screen.debug(), and confirm the documented imports and usage are complete.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.