Create-react-app: Testing: waitFor is not a function

[mglaman]

Describe the bug

Currently writing tests for my app, and I need to use the Testing Library's waitFor method.

import React from "react";
import { MemoryRouter } from "react-router-dom";
import {
  render,
  fireEvent,
  waitFor,
  waitForElementToBeRemoved,
} from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

However, the following line of code throws an error:

    await waitFor(() => getByText(testEmail));
    debug();

Result:

 register form › registers a new user

    TypeError: (0 , _react2.waitFor) is not a function

      86 |     }
      87 | 
    > 88 |     await waitFor(() => getByText(testEmail));
         |           ^
      89 |     debug();
      90 | 
      91 |   });

      at Object.<anonymous> (src/__tests__/Register.test.js:88:11)

Did you try recovering your dependencies?

Yes, I have purged node_modules and yarn.lock. Note this project is part of a Yarn workspace.

yarn --version
1.22.4

Environment

Environment Info:

current version of create-react-app: 3.4.1
running from /Users/mglaman/.npm/_npx/50913/lib/node_modules/create-react-app

System:
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Binaries:
Node: 13.11.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Browsers:
Chrome: 80.0.3987.163
Firefox: 75.0
Safari: 13.1
npmPackages:
react: Not Found
react-dom: Not Found
react-scripts: Not Found
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. Write a test (example https://testing-library.com/docs/dom-testing-library/example-intro)
2. Use waitFor
3. Expect it to run

Expected behavior

Test would work using waitFor

Actual behavior

waitFor is not considered a function

Reproducible demo

Working on the test here https://github.com/mglaman/contribkanban.com/pull/195

[mAAdhaTTah]

Check your RTL version. It used to be waitForElement. I think waitFor is new.

[mglaman]

Okay, checking based off of this:

├─ @testing-library/[email protected]
│  └─ @types/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]

It's available in my types, and defined, that's why I'm a bit confused.

[mglaman]

🤦 I forgot to dig into node_modules; apparently the @types has it, but it's not in the library.

[mAAdhaTTah]

Yeah, you need to bump the testing-library packages to the next major (v10 for /react).