Troubleshooting React “Error: Failed to initialize watch plugin…”

App created using create-react-app throws error with `npm run test`

Error thrown when trying to run a test on newly created create-react-app

This has happened to me every time I tried to run a test on my newly created react-app using create-react-app. I looked up React docs regarding this bug but didn’t find any. But thanks to stack overflow, I was able to get the answer and resolve it. Here, I will be demonstrating in steps as to what error we will come across and how to troubleshoot and get started with our testing in react.

Create-react-app and Testing

As the official react page states create-react-app is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration. Thus, as simple as it sounds, it works in a similar fashion. You are ready to take off with app development in seconds with a single command — “npx create-react-app my-app” or “npm init react-app my-app” or “yarn create-react-app my-app”. More details regarding create-react-app can be found here.

Create-react-app also comes with Jest automatically, which is a testing framework on javascript, designed mainly to test React and React Native applications. And all you have to do to use jest in create-react-app is to add react-test-renderer for rendering snapshots. For this run “ npm install — dev react-test-renderer” or “ yarn add — dev react-test-renderer”. Once you have the test written then as per documentation in react, we can run “npm test”, or “npm run test ”, or “yarn test” to run the test in interactive mode.

TroubleShoot

However coming to the point of this article, I have never gotten my test to perform as it should without interacting with this error, as shown in the picture below.

Error with an initial test run on a newly created app

Hence, the only step we need to follow for this is to run “npm i -D — exact jest-watch-typeahead@0.6.5”. This will add an install watch plugin called jest watcher in the package.json as shown below.

Jest-watcher added to the dev dependencies

Now that we have run our command and installed the required plugin, it solves the error thrown when running the test for the first time in the create-react-app. Let’s go ahead and create some tests, for our testing. Or for the start, you can just run the “npm run test” with the existing App.test.js file that comes automatically with react app installation. And your test results shall come as below.

Test runs correctly after adding the jest-watch plugin

Happy Testing!!!

If you would like us to evaluate and review your current software development practices or help you modernize your monolithic applications, please email us at info@datasurge.com or complete the form on our contact us page.