feat: Print link to the Testing-Library playground when getBy* queries fail

[mathiassoeholm]

What:

Adds a link to the Testing-Library playground, when getBy* queries fail, as requested in https://github.com/testing-library/dom-testing-library/issues/837.

Why:

It adds awareness of the playground, which might help in making a better query.

How:

Changes the default getElementError function.

Checklist:

• [x] Documentation added to the docs site, a PR has been added: https://github.com/testing-library/testing-library-docs/pull/726
• [x] Tests
• [x] Typescript definitions updated
• [x] Ready to merge. Maybe, see my comment below

[codesandbox-ci[bot]]

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 07aa3a154677e0956aece1ece02e239aaf7374d7:

Sandbox	Source
react-testing-library-examples	Configuration

[codecov[bot]]

Codecov Report

Merging #852 (07aa3a1) into main (c273ed5) will not change coverage. The diff coverage is 100.00%.

@@            Coverage Diff            @@
##              main      #852   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           26        27    +1     
  Lines          966       977   +11     
  Branches       293       303   +10     
=========================================
+ Hits           966       977   +11     

Flag	Coverage Δ
node-10.14.2	100.00% <100.00%> (ø)
node-12	100.00% <100.00%> (ø)
node-14	100.00% <100.00%> (ø)
node-15	100.00% <100.00%> (ø)
node-16	100.00% <100.00%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/config.ts	100.00% <100.00%> (ø)
src/playground-helper.ts	100.00% <100.00%> (ø)
src/screen.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update c273ed5...07aa3a1. Read the comment docs.

[mathiassoeholm]

It appears that Prettier might have formatted the inline snapshots differently, I'm not sure why 🤔

[mathiassoeholm]

Before I will call this Ready to be merged, I have a few questions:

1. ~~Is it okay that I remove part of a test, that was causing the type check to fail? https://github.com/testing-library/dom-testing-library/pull/852/commits/43e7464c158a2f66bc12453d7ec201b1757b6831~~ (Fixed by https://github.com/testing-library/dom-testing-library/pull/856)
2. Should @types/lz-string be a dependency or a dev-dependency? I added it as dev dependency, because it doesn't provide any types to the public API.
3. ~~Why do I get a @typescript-eslint/no-unsafe-call lint warning, when I've added the types?~~ Seems like this was a local issue in my editor, and it is gone now.
4. Does anyone have a better suggestion for a text than "Open this DOM in the Testing-Library Playground"

[mathiassoeholm]

Sorry for taking so long.

No worries! This is hardly an urgent issue, so thanks for taking the time to review :-)

[mathiassoeholm]

@eps1lon I think I finally understood the difference between error handling in internal and public facing functions, so the PR should be ready again now :-)

[golergka]

What's the status of this issue? I want something like this implemented and would love to help.