React-scripts test command not working

[Huespal]

Describe the bug

react-scripts test command stopped working after update to ^4.0.3 from ^3.0.0.

It shows this error on terminal:

● Validation Error:

  Watch plugin jest-watch-typeahead/filename cannot be found. Make sure the watchPlugins configuration option points to an existing node module.

  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

error Command failed with exit code 1.

Nothing has changed on the code. Only react-scripts package. Tests were working fine before the update. The project is not ejected and it is not intended to be.

Did you try recovering your dependencies?

Yes, I tried. yarn version: 1.22.10

Which terms did you search for in User Guide?

I've search for 'react-scripts test' and 'watchPlugins' and all I found is that I need to eject the project. I don't understand why. It was never like that. So I think that is not the solution to the problem.

Steps to reproduce

1. Open a terminal on the CRA project root
2. Run yarn
3. Run yarn test

Expected behavior

I expect tests run fine. Like before updating to ^4.0.3.

Actual behavior

react-scripts test command stops working after update react-scripts library to ^4.0.3 from ^3.0.0.

It shows this error on terminal:

● Validation Error:

  Watch plugin jest-watch-typeahead/filename cannot be found. Make sure the watchPlugins configuration option points to an existing node module.

  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

error Command failed with exit code 1.

Thank you :D

[aschuermann-at-neusta]

Same Problem here

[Elliot128]

Running into this as well.

[kkgowtamasa]

facing the same issue.

[Warix3]

I've fixed it by installing the plugin jest-watch-typeahead

[danpadua]

I've fixed it by installing the plugin jest-watch-typeahead

Work for me!!! Thanks

[MiroslavPetrik]

Same here. Could be yarn issue?

[k61b]

I've fixed it by installing the plugin jest-watch-typeahead

Thank you!

[seanmhanson]

Repro

I've also run into this same situation with a CRA currently, non-ejected, with react-scripts 4.0.3, though I reproduced it for 4.0.x in general. Same situation where I'm running the following inside my CRA:

• yarn
• yarn test

and then getting the same error:

Validation Error:

Watch plugin jest-watch-typeahead/filename cannot be found. Make sure the watchPlugins configuration option points to an existing node module.

Configuration Documentation:
https://jestjs.io/docs/configuration.html

Jest Config

Since this is through CRA, the only jest config options in my package.json are essentially:

"jest": {
    "testMatch": [
      "**/__tests__/**/*.test.[jt]s?(x)"
    ],
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!@private-repo-name)/"
    ]
  },

Running yarn test with additional options such as below causes the same validation error: yarn react-scripts test --testPathPattern App.test.tsx

Application Structure

I suspect that this might be related to the structure of this application, as I've recently changed it.

Here's a simplified diagram of the (full-stack) project:

Root (express server)

📦 my-preexisting-project
|_ 📁 client // see below for structure ⬇️
|_ 📁 routes
|_ 📁 server
|_ 📁 test // currently empty 😞 😞 😞
|_ 📄  package.json
|_ 📄  babel.config.js, webpack.config.js, (...)

Client Application (made with latest CRA)

📦 client
|_ 📁 public
|_ 📁 src
|  |_ 📁 "__tests__"
|  |  |_ 📁 components
|  |  |_ 📁 setup // helpers surfaced by setupTests.tsx
|  |  |_ 📄 App.test.tsx
|  |_ 📁 assets
|  |_ 📁 components
|  |_ 📁 integrations
|  |_ 📁 pages
|  |_ 📁 utils
|_ 📄 package.json
|_ 📄 setupTests.tsx
|_ 📄 tsconfig.json, .env, (...)

Anyway, apologies in advance if I'm missing something simple (tooling/build stuff for full-stack apps is a bit new for me, and this project predates my work on it), but I mostly just wanted to document another case of this. If I find a work-around, fix, etc., I'll be sure to return and share for others.

[ggwzrd]

I have had the same issue and one important thing to notice is that the newest released version of jest-watch-typeahead is now written in native ESM and will break with the following error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

Make sure to install the version compatible with Jest 26 e non native ESM modules.

yarn add --exact [email protected]

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[MarcelDurganteDev]

same problem here

[Huespal]

Hello. I created a related issue. After adding the correct jest-watch-typeahead v.0.6.5 package as @giuliogallerini pointed out, the problems continues. Thank you.

[dooman87]

I noticed that I didn't have jest-watch-typeahead in my node_modules. Installing it solved the problem:

npm install --save-dev jest-watch-typeahead

That's a workaround of course rather than solving the problem.

[wulinjie122]

any update with this issue?

[jasonaravanis]

Encountered same issue

[shiraze]

I didn't have the issue when moving to 4.0.3, but saw the issue when going to 5.0.0

Just found a linked issue that relates to my issue: https://github.com/facebook/create-react-app/issues/11792

[user2695]

Encountered same issue

The issue has to do with your node version. Update your node to the latest stable version to fix it.

[gmmvllfrt]

I had the same error and I found a work around.

npm i -D --exact [email protected]

then there'll be an error for the jest version, I changed it to version 27.0.0, same the ts-jest.

[edloidas]

Had the same issue after updating react-scripts 4.0.3 → 5.0.1.

It's not necessary to add jest-watch-typeahead as a dependency to the package.json, no-save install was enough in my case: npm install --no-save [email protected]

Running npm ci might be more robust solution, though.