I am working on an application that was recently converted from an old Webpack build to use create-react-app. Most of the transition has went smoothly, but I'm running into some major issues with the previous unit tests. When I run npm test which has the standard package.json test script of "test": "react-scripts test --env=jsdom", it says all my snapshot tests have failed. This is fine and expected since there have been a lot of changes, and the tests need to be updated.
However, when I just run jest or jest --updateSnapshot, all of my tests immediately fail with SyntaxError: Unexpected token errors, most of which are related to import. This leads me to believe that Jest isn't using Babel to transform the ES6 syntax correctly.
Previously, we used a .babelrc file with these settings:
{
"presets": ["env", "react", "stage-0", "flow"],
"plugins": ["transform-runtime", "add-module-exports", "transform-decorators-legacy"]
}
But since Babel is already included in create-react-app I removed this file as well as any references to Babel. My package.json also does not have any special scripts set up for Jest itself.
I have tried adding some of the previously used Babel packages back in, but after further reading it seems those won't work anyway unless I eject from create-react-app and that is not an option at this time.
What would cause npm test to run correctly but jest to fail miserably?
It turns out it was a Babel issue. Even though create-react-app comes pre-configured, we still had to add in custom configuration since our app wasn't initially built with cra. I installed some new dev dependencies:
"babel-cli": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-preset-react-app": "^3.1.1",
And also updated the .babelrc:
{
"presets": ["babel-preset-react-app"]
}
And now both jest and npm test both work as they should.
Related
I have a Chrome Extension built with Parcel and React, but I'm not getting warnings (e.g. missing useEffect dependencies) when I inspect the popup. How do I get these warnings?
Missing useEffect dependencies warnings are provided by eslint through this plugin. Parcel won't run eslint for you unless you set it up through the #parcel/validator-eslint plugin. I provided instructions on how to do that in this answer.
Another option is to use eslint-watch (npm) from the command line separately from parcel, so you'd have two separate scripts in your package.json that might look like this:
{
"scripts": {
"start": "parcel src/index.html"
"lint": "esw --watch src/**/*.js"
}
}
To get react hooks warnings, you'll need to use eslint-plugin-react-hooks by first installing it (e.g. yarn add eslint-plugin-react-hooks --dev), and then adding this to your .eslintrc.json:
{
"extends": [
// ...
"plugin:react-hooks/recommended"
]
}
Is there a way to disable colorized output for tests run via react-scripts test? I'd like to disable this to get rid of the color control codes in our CI pipeline.
With jest you can specify jest --no-colors, but react-scripts test --no-colors does not seem to pass the option down to jest.
FYI, the app was created with create-react-app and the react version is 17.0.0.
"env FORCE_COLOR=0" worked for me.
Neither "npm config set color false" nor "npm --no-color" worked, though.
Neither of the proposed solutions worked for me. ("react-scripts": "5.0.0")
My solution for this was installing as dev dep
"#relmify/jest-serializer-strip-ansi"
and in package.json have this
"jest": {
"snapshotSerializers": [
"#relmify/jest-serializer-strip-ansi/always"
]
},
List of supported jest config overwrites for CRA
https://create-react-app.dev/docs/running-tests/#configuration
I have a react application created with create-react-app using react-data-grid#7. Since canary17 they started to use es2020 modules, to using the more recent builds I have to add support to optional-chaining and nullish-coalescing-operator to the app, otherwise I have errors starting the app.
After a few searchs, I installed customize-cra and react-app-rewired, changed the scripts commands to
"start": "react-app-rewired start"
"build": "react-app-rewired build"
and added this config-overrides.js
const {
override,
addBabelPlugin
} = require("customize-cra");
module.exports = override(
addBabelPlugin("#babel/plugin-proposal-optional-chaining"),
addBabelPlugin("#babel/plugin-proposal-nullish-coalescing-operator"),
);
Trying to run the app I obtain a strange behavior.
using the start command I obtaing the same error, but if I build and the deploy the app works correctly.
If I add something wrong in the config-overrides.js and try to start run start I received an error message, so I think the file is loaded.
Am I missing something?
After a few tests I found the solution changing from
addBabelPlugin("#babel/plugin-proposal-optional-chaining"),
addBabelPlugin("#babel/plugin-proposal-nullish-coalescing-operator"),
to
addExternalBabelPlugin(["#babel/plugin-proposal-optional-chaining", { "loose": false }]),
addExternalBabelPlugin(["#babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }]),
I added the loose parameter too, but it was not the problem. now looks like works both in serve and build
I recently upgraded RN from version 0.59.4 to 0.61.5.
I want to use react-native-web and added react-scripts (3.4.1) and react-dom (16.13.1). After some cleaning up of native modules not supported, running react-scripts start results in failure to compile because of lint errors (no-undef, for example). These are not rules set up in my .eslintrc.js file and seem to come with the new way of running scripts.
Is there a way to ignore the lint errors to try and compile? While I could try and make these changes in my code base, there are some issues in dependencies as well.
Additionally, I updated my babel as per react-native-web
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module-resolver", {
"alias": {
"^react-native$": "react-native-web"
}
}]
]
};
I have read this might be webpack related, but there is currently no webconfig. I tried adding what was on the react-native-web getting starter page, but had no luck there either.
Here is a question.
I'm trying to merge some of my packages into a monorepo. I'm using yarn and it's workspaces-experimental feature. So the repository folder structure looks like:
.
node_modules
packages
myapp1
myapp2
myreactapp1
Now, one of the goals is to simplify testing. I want to run jest in the root dir so that it runs unit tests for all the packages. And it works for myapp1 and myapp2 above which are node.js apps. However, myreactapp1 is build with create-react-app (no eject) and uses ES6 features (like import) and also jsdom rendering. The tests work fine if I run them from myreactapp1 dir with yarn test which pipes the code through babel (if I understand well). But the root jest failes on the first import statement.
How can I do it ?
P.S. I tried to install babel-jest but seems that it cannot be lauched directly from the console (windows).
It seems that CRA does not yet work properly with Yarn Workspaces. A workaround is suggested in the comments.
Anyway, to make jest work, you need to have babel-jest (as you said) and also a .babelrc file in the root folder:
{
"presets": ["es2015", "react"]
}