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?