Error Encountered: "fsevents is not defined" during ReactJS Test

I've been working on writing test cases for my program and I recently came across recommendations for testing-library/react and jest-junit. After installing both packages using npm as devDependencies and updating my test script to "test": 'react-scripts test", I encountered an issue when running npm test.

The error message displayed was: 

TypeError: fsevents is not a function
.

I attempted to resolve this by installing fsevents with npm, but unfortunately that didn't solve the problem. Searching online brought up suggestions such as fsevents not being a constructor or switching to yarn, neither of which helped me in this case.

Can anyone provide insight into what might be causing this issue? My current setup includes npm v6.4.1 and react-script v3.1.1.

Update: I am using a Mac if that detail makes a difference in troubleshooting.

Update 2: Running the test again later did not result in the same error, even without any further changes made.

reactjsunit-testingnpmtypeerrorreact-scripts

Answer №1

Encountered a similar problem on my Mac. If you're using Homebrew, execute this command in the terminal and give it another shot:

brew install watchman

If that doesn't work, try running these commands in the terminal:

sudo rm -rf (xcode-select -print-path)
xcode-select --install

Answer №2

Every time I tried to create a React app using create-react-app, I encountered an error when running 'npm test' immediately after. I found that the solution was to manually install a specific package if I had already committed to the project:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfa9bcaab9aaa1bbbc8ffee1fde1fefe">[email protected]</a>

After some investigation, it became clear that I needed this package even though there were warning messages like:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e187928497848f9592a1d0cfd3cfd0d0">[email protected]</a> ...

I also realized that create-react-app was skipping this dependency due to not detecting Xcode on my system, leading to messages such as:

gyp: No Xcode or CLT version detected!

To fix this issue, I executed the command:

xcode-select --install

Now, any future create-react-app projects should run smoothly without requiring additional dependency installations! For more Xcode troubleshooting tips, check out this link.

Answer №3

Upon setting up a new installation of node and create-react-app, I encountered the same issue. However, with some investigation, I stumbled upon an insightful article [1] that addressed a common problem related to running npm test.

Fortunately, after incorporating watchman into the setup, the tests started running smoothly.

[1] https://github.com/bbc/simorgh/wiki/Known-setup-issue-when-running-%60npm-test%60

Answer №4

fsevents comes pre-installed with npm on both Mac OS and Windows operating systems. Seeing the error message "is not a constructor" usually indicates an attempt to initialize fsevents in your code, possibly using the new keyword. Make sure to check your code for this issue, and feel free to reach out if you need further assistance.

Answer №5

The solution is straightforward. Just follow these steps:

rm -rf node_modules/ package-lock.json

After that, run the following command:

npm i

I can confirm that this method worked for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on implementing a shared layout in NextJS with Auth0 integration

After following the Next docs to configure my layouts successfully, I encountered an issue with the NextJS Auth0 SDK's withPageAuthRequired wrapper that disrupts this setup. The layout pattern I've implemented is based on the guidelines outlined ...

reactjsauthenticationnext.jsserver-side-renderingauth0

The spy function in the React test refuses to trigger

Having a managed component with a form containing two radio buttons and a text input. There's a function triggered by the onChange event of the text input, and a test is set up to simulate a change event. Despite expecting the spy function to be calle ...

reactjsreact-testing-library

Collaborating on PHPStorm file watchers across different operating systems

Is there a way to create a file watcher that can run the (npm) gulp command when a file is changed, and have it work on both mac and windows without having to use explicit paths? Currently, I was only successful in making this work by specifying the paths ...

npmphpstormgulp

Attention! The npm package [email protected] has been deprecated. It is advised to upgrade to minimatch version 3.0.2 or above to prevent a potential RegExp DoS vulnerability

While trying to install cordova, I encountered the following warning. How can I resolve this issue? https://i.stack.imgur.com/U5aLM.png Please refer to the image to see what happened when I executed the commands below: npm update [email protected] ...

cordovanpm

Empowering Components with React Hooks

I am currently in the process of transitioning from using class components to React hooks with the Context API. However, I am encountering an error and struggling to pinpoint the exact reason for it. Here are my Codes: // contexts/sample.jsx import React ...

javascriptreactjsreact-hooksreact-context

Guide on launching an Angular 12 project with the help of Angular CLI 13

After downloading an Angular 12 project, I attempted to run it using Angular 13 (the latest version). However, I encountered issues when trying to run it. Even after attempting to use npm install, I still faced dependency problems. Errors occurred when ru ...

node.jsangularnpmangular12angular13

The type of props injected by WithStyles

When working on my class component, I utilize material UI withStyles to inject classes as a property. export default withStyles(styles)(myComponent) In this process, const styles = ( (theme:Theme) => createStyles({className:CSS_PROPERTIES}) I am att ...

reactjstypescriptmaterial-ui

"Accessing your account only requires a simple two-click login process

Why do I need to click the log in button twice for data validation on my forum website? While designing a forum website, I noticed that users have to click the log-in button twice before the system validates and processes the input data. Below is the code ...

javascriptnode.jsreactjs

Creating a Dynamic Dropdown menu in React that changes based on the input entered in a Text Input field

I am looking to implement a dropdown in my React Material UI project where the options change dynamically based on the input entered into a search box, similar to the functionality on the npm homepage. https://i.stack.imgur.com/dJbhb.png Unfortunately, I ...

reactjsmaterial-uidropdownreact-dropdown-tree-select

Exploring how to use React with a select component featuring objects

Hello, I am new to working with React and I have a question regarding the select component of Material UI. Here's my situation: I am creating functionality for creating and editing a User object. This User object has a primary key and some data, incl ...

javascriptreactjsreact-nativematerial-ui

What causes variation in the node_modules folder when npm install is executed repeatedly?

I have a package.json file with dependencies specified by exact versions as shown below: "dependencies": { "async": "0.9.2", "body-parser": "1.15.1", "cookie-parser": "1.4.2", "csvtojson": "0.3.21", "express": "4.1 ...

npmnpm-installnode-modulespackage.json

Navigating the implementation of undefined returned data in useQuery hook within Apollo and ReactJS

I am facing an issue with my code where the cookieData is rendered as undefined on the initial render and query, causing the query to fail authentication. Is there a way to ensure that the query waits for the response from the cookie API before running? co ...

javascriptreactjsgraphqlnext.jsapollo

Looking to organize and sum up values in DataTable REACT – is there a way to achieve this

I have a script that I'm working with and I want to group the data by the AKONT field and then totalize it based on the UM01S field. Is this something that can be done? const options = { UM01S: (item) => <td>{formatColumn('currency' ...

reactjs

React: Challenges with Implementing Conditional Rendering

In my React application, I am utilizing the Firebase SDK. Whenever a user needs to reset their password, they will be directed to a specific page within my app. If the entered code is valid, the <PWResetConfirmForm /> component should be displayed. I ...

reactjsfirebase

Transferring information from offspring to parent

Greetings! I'm currently getting my feet wet with React and finding myself stuck on an issue regarding passing states. Is it possible for me to pass a child state to a parent component in order to selectively render other child components? ...

javascriptreactjs

What could be causing the table to display empty when we are passing data to the usetable function?

Visit Codesandbox to view Table While the header appears correctly, I noticed something strange. When I console log the data props, it shows all the necessary data. However, when I try to console.log row, there doesn't seem to be any single object re ...

reactjstypescriptreact-table

Having trouble setting up my Angular Universal server, need assistance please

Having trouble starting the server, encountering this issue: [email protected] serve:ssr D:\PROGRAMMING\CMSfrontbackup node dist/CMSfront/server/main.js D:\PROGRAMMING\CMSfrontbackup\dist\CMSfront\server\m ...

node.jsangularexpressnpmangular-universal

Creating a dropdown menu using React库

The API response I received looks like this:- [ { "Product.Name": "Data Migration - Test1", "Product.Id": "8ad0", "Product.Hello__c": { "Value": "First ...

javascriptreactjsarrays

Create a ReactJS page with no pre-generated additional pages

Just ventured into the world of reactjs and created my first app. Now I'm trying to build a production version using the command: npm run build However, all I get is a blank index.html file generated. Why is this happening? I have multiple routes in ...

node.jsreactjs

What could be causing React onclick events to not trigger when wrapped within a Vue application? (No additional libraries)

As I dive into the world of combining React and Vue components, I encountered an interesting challenge... const RootTemplate = () => { return ( <div id="vue-app"> ... <IconButton color="inherit" onClick={thi ...

javascriptreactjsvue.js