feat(waitFor*): improve stacktrace for timeout errors

[kentcdodds]

What: feat(waitFor*): improve stacktrace for timeout errors

Why: Closes #491

Way improved:

Before:

  ● can create a list item for the book

    Timed out in waitForElementToBeRemoved.

      at node_modules/@testing-library/dom/dist/wait-for-element-to-be-removed.js:51:13
      at checkCallback (node_modules/@testing-library/dom/dist/wait-for.js:50:22)

After:

  ● can create a list item for the book

    Timed out in waitForElementToBeRemoved.

      34 | 
      35 |   const div = document.createElement('div')
    > 36 |   await waitForElementToBeRemoved(() => div)
         |         ^
      37 | 
      38 |   await waitForElementToBeRemoved(() =>
      39 |     utils.getByRole('heading', {name: 'Loading...'}),

      at waitForElementToBeRemoved (node_modules/@testing-library/dom/dist/wait-for-element-to-be-removed.js:22:24)
      at renderBookScreen (src/screens/__tests__/book.js:36:9)
      at Object.<anonymous> (src/screens/__tests__/book.js:76:13)

Right!?!?

Also...

Before:

  ● can create a list item for the book

    Timed out in wait.

      at onTimeout (node_modules/@testing-library/dom/dist/wait-for.js:58:27)

After:

  ● can create a list item for the book

    Timed out in wait.

      33 |   const utils = render(<BookScreen bookId={book ? book.id : bookId} />)
      34 | 
    > 35 |   await waitFor(() => {
         |         ^
      36 |     throw undefined
      37 |   })
      38 |   const div = document.createElement('div')

      at waitFor (node_modules/@testing-library/dom/dist/wait-for.js:24:25)
      at node_modules/@testing-library/dom/dist/wait-for.js:65:54
      at node_modules/@testing-library/react/dist/pure.js:51:22
      at node_modules/@testing-library/react/dist/act-compat.js:60:24
      at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:21856:12)
      at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:929:14)
      at node_modules/@testing-library/react/dist/act-compat.js:59:20
      at asyncAct (node_modules/@testing-library/react/dist/act-compat.js:38:14)
      at Object.asyncWrapper (node_modules/@testing-library/react/dist/pure.js:50:35)
      at waitForWrapper (node_modules/@testing-library/dom/dist/wait-for.js:65:35)
      at renderBookScreen (src/screens/__tests__/book.js:35:9)
      at Object.<anonymous> (src/screens/__tests__/book.js:79:13)

So much better!

How:

Create the timeout error right when the function is called so the stacktrace includes the code that called it.

Checklist:

• Documentation added to the
  docs site N/A
• I've prepared a PR for types targeting
  DefinitelyTyped N/A
• Tests
• Ready to be merged
  

[kentcdodds]

Looks even better with highlighting:

[codesandbox-ci]

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 d83e4e2:

Sandbox	Source
green-flower-phl9r	Configuration

[eps1lon]

This is pretty nice. I'd wish this kind of debugging util would be easier accessible.

[codecov]

Codecov Report

Merging #492 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #492   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          22     22           
  Lines         423    425    +2     
  Branches      101    101           
=====================================
+ Hits          423    425    +2

Impacted Files	Coverage Δ
src/wait-for.js	100% <100%> (ø)	⬆️
src/wait-for-element-to-be-removed.js	100% <100%> (ø)	⬆️

---

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 976675b...d83e4e2. Read the comment docs.

[kentcdodds]

🎉 This PR is included in version 7.1.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀