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

julienw commented 10 months ago

@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

> bug@0.9.0 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

git clone https://github.com/julienw/bug-testing-library
cd bug-testing-library
npm i
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 commented 10 months ago

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 commented 10 months ago

I believe the problem happens in https://github.com/testing-library/dom-testing-library/blob/336152be6670d40509f35043e661cde14e4b30ba/src/wait-for.js#L27-L31

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

github-actions[bot] commented 10 months ago

:tada: This issue has been resolved in version 9.3.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 9 months ago

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

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 3 months ago

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

The release is available on:

Your semantic-release bot :package::rocket:

testing-library / dom-testing-library