My Jest snapshot tests consistently fail on Travis with the following difference:
- "_instance": Constructor {
+ "_instance": {
Dev dependencies include:
"babel-jest": "^19.0.0",
"jest": "^19.0.2",
"react-addons-test-utils": "^15.4.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"react-test-renderer": "^15.4.2",
"enzyme": "^2.7.1",
"enzyme-to-json": "^1.5.0",
"react": "^15.2.0",
"react-dom": "^15.2.1"
Using Node 7.0.0 locally and on Travis.
Any ideas?
I would make sure that I am using the exact same version on both locally and on CI. Try pinning jest and babel-jest to a specific version:
"babel-jest": "=19.0.0",
"jest": "=19.0.2",
Maybe I would do the same with all the dependencies! Then remove node_modules/ from your machine, run the tests (update snapshots if necessary) and push.
Ps. I would also try to empty the caches on travis: https://travis-ci.com/USERNAME/REPOSITORY_NAME/caches.
In my case, I had a mismatch between the node version in the build system vs local.
Related
I wanted to use the new satisfies operator in my Typescript React app but it doesn't works.
here are the package.json and typescript related package details.
{
"dependencies": {
.
.
.
"babel-plugin-react-require": "^3.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
.
.
.
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/plugin-transform-runtime": "^7.16.10",
"#babel/preset-env": "^7.16.4",
"#babel/preset-react": "^7.16.0",
"#babel/preset-typescript": "^7.18.6",
"#types/react": "^17.0.36",
"#types/react-dom": "^17.0.11",
"#typescript-eslint/eslint-plugin": "^5.45.0",
"#typescript-eslint/parser": "^5.45.0",
"babel-loader": "^8.2.3",
"esbuild-loader": "^2.20.0",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-typescript": "^3.5.2",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-storybook": "^0.6.7",
"typescript": "^4.9.3",
"webpack": "^5.75.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0",
"webpack-merge": "^5.8.0"
}
}
What could be the reason?
I've upgraded all the typescript related packages to latest but issue is not fixed
It seems the problem is caused by the babel version. (But take my answer with a grain of salt, as I am still learning myself)
The satisfies operator was introduced with Typescript 4.9 and babel supports this Typescript version since 7.20.0.
In the release notes babel specifically mentions #babel/plugin-transform-typescript and #babel/preset-typescript working with satisfies. But the newest version for the npm package #babel/preset-typescript is 7.18.6.
So it seems to me, to solve your problem you could:
Manually install a supporting version of #babel/preset-typescript
Switch to #babel/plugin-transform-typescript
Wait for the npm package to be updated
Have same problem, as workaround added plugin #babel/plugin-transform-typescript, not instead of #babel/preset-typescript, but additionally.
And now it works. I doubt this plugin makes something bad, maybe add a few ms to processing time.
Maybe someone has a better solution? If someone want to reproduce, this is a repo where it reproducible https://github.com/sshmyg/frontend. Just install, update babel packages and try to use satisfies in any tsx file.
VSCode uses it's own version of Typescript. So it might use older versions which doesn't understand satisfies keyword.
You can:
Upgrade your VSCode to the latest version
Use your workspace version of typescript by selecting Typescript: Select Typescript version... in command palette.
Also note that you have to restart TS Server. So restart your VSCode to see the effects.
Unit testing is very helpful and usually makes debugging easier, but only if your debugging tools work properly. I have worked in few React project and most of the time the Chrome debugger works well, but sometimes it refuses to stop on a particular breakpoint. Then I manually write debugger; instruction in the source code where I like the execution to stop and it usually works. Sometimes even this solution doesn't work and I'm forced to use old fasioned debugging methods like console.log(). Currently I have all these issues in a React project written in Typescript within Ubuntu 16.04 development environment. They makes debugging very difficult. I start the unit test with yarn test:debug command, where test:debug calls the following line inside package.json:
"scripts": {
"test:debug": "react-scripts --inspect test --runInBand --no-cache"
}
I'm new to Typescript and am working on a legacy project which is not very well maintained. Could it be a matter of wrong configuration. Maybe something to deal with webpack? The debugger's console indicates that a mapping file is missing:
DevTools failed to load source map: Could not load content for
file:///path/to/project/node_modules/typescript/lib/typescript.js.map: System error:
net::ERR_FILE_NOT_FOUND
Could it be that missing file the reason for the issues I experience? How to provice debugger with that missing file?
package.json dependencies:
"#babel/preset-env": "^7.14.4",
"#babel/preset-react": "^7.14.5",
"#capacitor/app": "^1.0.2",
"#types/fs-extra": "^9.0.3",
"#types/jest": "24.0.18",
"#types/node": "12.7.12",
"#types/node-cron": "^2.0.3",
"#types/react": "16.9.5",
"#types/react-dom": "16.9.1",
"#types/styled-components": "^5.1.7",
"#webcomponents/webcomponentsjs": "^2.5.0",
"global": "^4.4.0",
"import": "^0.0.6",
"jetifier": "^1.6.6",
"react": "^16.10.2",
"react-clock": "^3.0.0",
"react-dom": "^16.10.2",
"react-player": "^2.7.2",
"react-qr-code": "^2.0.2",
"react-rating": "^2.0.5",
"react-router-dom": "^5.1.2",
"react-scripts": "^2.1.8",
"react-simple-keyboard": "^2.0.15",
"react-toast-notifications": "^2.2.5",
"ts-node": "^9.0.0",
"typescript": "^4.3.5"
node version
v14.15.0
I wonder if any of you has experiend similar issues in unit testing with Jest and Chrome inspector and if so could you give me any advise how to resolve it? Could it be some sort of libraries incompatibility or any particular configuration in React project?
Might be worth deleting all the saved breakpoints. This worked for me Where does breakpoints stores
This is my first time building an a-frame app with react and when running npm run-script build in my cmd prompt I come across this error.
Failed to compile.
static/js/main.9516bce8.js from UglifyJs
Unexpected token: operator (>) [./~/aframe/dist/aframe-master.js:57303,0][static/js/main.9516bce8.js:80512,32]
"aframe": "^1.0.4"
"webpack": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-2.6.1.tgz",
"integrity": "sha1-LgRX8KuxrF3zqxBsacZy8jZ4Xwc=",
"requires": {
"acorn": "^5.0.0",
"acorn-dynamic-import": "^2.0.0",
"ajv": "^4.7.0",
"ajv-keywords": "^1.1.1",
"async": "^2.1.2",
"enhanced-resolve": "^3.0.0",
"interpret": "^1.0.0",
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"loader-runner": "^2.3.0",
"loader-utils": "^0.2.16",
"memory-fs": "~0.4.1",
"mkdirp": "~0.5.0",
"node-libs-browser": "^2.0.0",
"source-map": "^0.5.3",
"supports-color": "^3.1.0",
"tapable": "~0.2.5",
"uglify-js": "^2.8.27",
"watchpack": "^1.3.1",
"webpack-sources": "^0.2.3",
"yargs": "^6.0.0"
},
based on my research i'm guessing the version of uglify that i'm using doesn't support ES6
but I can't find anything online that can help me update or replace uglify-js to handle ES6
You can update it with
npm update uglify-js
which updates the package to the latest version that satisfies it version tag.
If this new version does not work, you can update it to a specific version
npm update uglify-js#3.0.5
or just update it to the latest one
npm update uglify-js#latest
Be careful because updates might break some existing code
terser-webpack-plugin works for me using webpack v4. it does support ES6+
In my project I config babel:
{
"presets": ["react", "es2015","stage-1", "transform-optional-chaining"],
"plugins": ["transform-runtime"]
}
And this is my devDependencies in package.json:
"devDependencies": {
"babel-cli": "^7.0.0-alpha.19",
"babel-loader": "^7.1.5",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-optional-chaining": "^7.0.0-beta.3",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.14.2",
"react-hot-loader": "^4.3.4",
"style-loader": "^0.22.1",
"url-loader": "^1.1.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
When I run the project I get this error:
Cannot find module 'babel-preset-transform-optional-chaining'
Can anyone explain how to fix this error?
transform-optional-chaining is a plugin (not a preset). Try changing your babel config to:
{
"presets": ["react", "es2015","stage-1"],
"plugins": ["transform-runtime", "transform-optional-chaining"]
}
It seems the bigger issue is you have a mix of versions of babel, all of which are outdated. "transform-optional-chaining" is already included in "stage-1" presets for babel 7 but was not back-ported to babel 6.
However, to make matters more confusing: babel has done away with stage-presets (and es201x presets were deprecated in Babel 6). So in the latest version of babel, you not only do need to list out "transform-optional-chaining", but also every other plugin you're using.
I think the only real option here (if you want to use the latest plugins) is to upgrade to the latest version of Babel 7 - which includes a lot of changes, but you'll have to do it eventually anyway. You can find a migration guide here.
I suppose you could find an alpha version before before stage-presets were removed but that's just giving yourself more work for the future, and there will likely still be changes that have to be made anyhow.
I've been wondering why my npm start loads so slow even though I've only changed file file, it takes about a minute to read the change and takes another minute to load the page. It's making the development really slow because of the issue, I have to restart and run the application again just to gain few seconds faster.
The app folder is only 167kb in total, but my node_modules is big, not sure if these dependencies are all for angular but it seems like the whole npm library has been installed in my node_modules folder.
Edit: Looks like its maxing out my CPU while its reloading the files which is strange.
while my package.json dev dependencies are very little and the rest are the angular dependencies from angular installation.
"devDependencies": {
"body-parser": "^1.15.2",
"concurrently": "^2.0.0",
"cors": "^2.7.1",
"express": "^4.14.0",
"file-system": "^2.2.1",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.12",
"gulp-less": "^3.1.0",
"gulp-rename": "^1.2.2",
"gulp-useref": "^3.1.0",
"gulp-watch": "^4.3.8",
"jquery": "^3.1.0",
"lite-server": "^2.2.0",
"merge-stream": "^1.0.0",
"momentjs": "^1.1.12",
"ng2-bootstrap": "^1.0.24",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}