jsdom | JavaScript implementation of various web standards | Runtime Evironment library

You passed --presets=env and the error is trying to tell you that instead of that, it should be --presets=@babel/preset-env.

In your package.json, or jest.config.js/jest.config.js, change the value of the testEnvironment property to jsdom.

I was facing the same issue which is why I stumbled across this post.

My issue was I was using the wrong node version. I faced a similar issue after upgrading to Angular 13 but I was using node version v14.2.0.

I changed the node version to v14.15.0 and it worked.

nvm use v14.15.0

PS: NVM manages multiple nodejs versions.

I found the solution, it was just in the file jest.tsconfig.json change the field "sourceMap" to true:

The problem is most likely that you did not install jsdom for your project. You can do so by running

You can read more on how Jest handles mocking CSS modules in the Jest docs. You could perhaps write your own module name mapper or custom transform to load and process the Less files. However, you'd have to figure out how to actually inject the CSS into the code under test (that's something that Webpack normally handles). Something like jest-transform-css might do this.

Personally, I'd just test whether the CSS class is present, like @jonrsharpe suggests. Think of it from the perspective of the test pyramid: your Jest tests should likely be focused at the unit test level, with an emphasis on speed and simplicity. Unit tests are ideally fast enough that you can run them nearly instantly, whenever you save a file; adding the complexity to parse and insert Less CSS may work against that.

It's okay if the unit tests don't test the entire stack; you have other tests, higher up in the pyramid, to do this. For example, you could have a handful of Cypress tests that run your app in the actual browser and verify that a couple of controls are actually hidden, then it should be safe to assume that (1) Jest validating all controls set the correct class plus (2) Cypress validating that a few controls with the correct class are correctly hidden means that (3) all controls are correctly hidden.

To help make your tests more self-documenting, and to make them easier to maintain if you ever change how controls are shown and hidden, you can use Jest's expect.extend to make your own matcher. Perhaps something like this (untested):

React Router v6 splits apart the history into multiple pieces, for this use case the relevant parts are the navigator and the location. This change is hinted at in Use useNavigate instead of useHistory, and you can see it in the definition of the Navigator type used in the Router props:

Did you already use type:"module" in package.json?

Update

It's likely a bug introduced in CRA5: issue

Using WDS_SOCKET_PORT=0 will allow the solution to work with all debug configurations.

=================================================

I notice that, after upgrading to CRA5, the react dev client starts to respect the current page's protocol. That is, if you are debugging your asp.net core project using https locally, the react dev client will also try to connect to node dev server with wss(websocket over TLS) which is not enabled by default. There are several ways to get around with this, the simplest way would be:

1. create a file with name .env.development in the same folder where lies your package.json.
2. put WDS_SOCKET_PORT= in .env.development you just created. should be 5001 by default if you are using the SPA template generated by dotnet cli.

This will allow the ws connection initiated by react dev client to be proxified to node dev server with UseReactDevelopmentServer middleware.