When using an invalid selector, the error isn't processed properly by waitFor

[julienw]

• @testing-library/dom version: I think it is 8.20.1 (used by @testing-library/react 13.4.0)
• Testing Framework and version: react 13.4.0
• jest 28.1.3
• DOM Environment: jsdom 19.0.0

Relevant code or config:

screen.getByText('foo', { selector: '[href^=blob:]' });

The selector is incorrect and should be:

screen.getByText('foo', { selector: '[href^="blob:"]' });

What you did:

What happened:

$ npm test

> [email protected] test
> jest

  console.error
    Error: Uncaught [TypeError: Cannot set property message of  which has only a getter]
        at reportException (/home/julien/travail/git/bug-testing-library/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
        at Timeout.task [as _onTimeout] (/home/julien/travail/git/bug-testing-library/node_modules/jsdom/lib/jsdom/browser/Window.js:519:9)
        at listOnTimeout (node:internal/timers:569:17)
        at processTimers (node:internal/timers:512:7) {
      detail: TypeError: Cannot set property message of  which has only a getter
          at onTimeout (/home/julien/travail/git/bug-testing-library/node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:21:19)
          at handleTimeout (/home/julien/travail/git/bug-testing-library/node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:159:14)
          at Timeout.task [as _onTimeout] (/home/julien/travail/git/bug-testing-library/node_modules/jsdom/lib/jsdom/browser/Window.js:514:19)
          at listOnTimeout (node:internal/timers:569:17)
          at processTimers (node:internal/timers:512:7),
      type: 'unhandled exception'
    }

      at VirtualConsole.<anonymous> (node_modules/jest-environment-jsdom/build/index.js:70:23)
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:519:9)

 FAIL  ./file.test.js (5.467 s)
  ✕ reproduces the error (5008 ms)

  ● reproduces the error

    TypeError: Cannot set property message of  which has only a getter

      at onTimeout (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:21:19)
      at handleTimeout (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/wait-for.js:159:14)
      at Timeout.task [as _onTimeout] (node_modules/jsdom/lib/jsdom/browser/Window.js:514:19)

  ● reproduces the error

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

       5 | import {render, screen} from '@testing-library/react'
       6 |
    >  7 | test('reproduces the error', async () => {
         | ^
       8 |   render(<a href="http://example.org">foo</a>);
       9 |   await screen.findByText('foo', {selector: '[href^=http:]'});
      10 | });

      at Object.test (file.test.js:7:1)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        5.719 s, estimated 6 s
Ran all test suites.

Reproduction:

I couldn't reproduce in codesandbox but here is an example:

https://github.com/julienw/bug-testing-library

1. git clone https://github.com/julienw/bug-testing-library
2. cd bug-testing-library
3. npm i
4. npm test

Problem description:

We don't have a good error, instead we have a timeout.
The actual error is in a console error message above, which isn't ideal.

I haven't tried with newer versions of jsdom and jest yet.

Suggested solution:

I'm not sure to be honest...

[julienw]

The same thing happens with the latest versions:
@testing-library/react: 14.0.0
@testing-library/dom: 9.3.1
jest: 29.7.0
jest-environment-jsdom: 29.7.0 (using jsdom 20.0.3 under the hood)

I updated the repository.

[julienw]

I believe the problem happens in

dom-testing-library/src/wait-for.js

Lines 27 to 31 in 336152b

	error.message = getConfig().getElementError(
	error.message,
	container,
	).message
	return error

The message property of a DOMException can't be 'set'. Maybe we should use defineProperty instead?

[github-actions]

🎉 This issue has been resolved in version 9.3.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 10.0.0-alpha.2 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 10.0.0-alpha.3 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀