Create-react-app test debug not stopping at breakpoint
See original GitHub issueI am really not sure what I am doing wrong here. I am trying to write unit tests and am using Enzyme and Jest (obviously). Here is what my package.json looks like
{
"name": "balena-io-test",
"version": "0.1.0",
"private": true,
"dependencies": {
....
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"test:debug": "react-scripts --inspect-brk test --runInBand",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
"jest": "^23.6.0",
"jest-mock": "^23.2.0",
"react-scripts": "^2.1.1",
"redux-mock-store": "^1.5.3"
}
}
Now test are running just fine with npm test and I am trying to debug with npm run test:debug.
Initially the react-script breaks at the first line which is what I would be expect but after that jest just runs without stopping at any debugger break points. I also cannot see any of the .test files in chrome. I am not sure if it is my environment which is to blame or something to do with create-react-app.
Here is a test I am trying to debug
describe('<LightingDevices>', ()=> {
let wrapper;
beforeAll(()=>{
debugger; <------ should stop here
const updateDevice = jest.fn();
const setUpAllLights = jest.fn();
wrapper = shallow(<LightingDevices updateDevice={updateDevice} setUpAllLights={setUpAllLights}/>);
});
....
Issue Analytics
- State:
- Created 5 years ago
- Reactions:6
- Comments:9 (4 by maintainers)
Top Results From Across the Web
Chrome breakpoints don't work when using create-react-app
Currently there's a bug in recent versions of create-react-app where debug breakpoints aren't working in Chrome.
Read more >Breakpoints not working debugging React app in Chrome ...
I run the Create React App using npm run start and when I run the Launch Chrome debug config it automatically opens Chrome...
Read more >Chrome debugger breakpoints not working with create- ...
I found an open issue in create-react-app with the Chrome debugger breakpoints https://github.com/facebook/create-react-app/issues/6074.
Read more >How To Debug React Apps With VS Code
Debugging a React app can be a slow and painful process. Adding a console.log() statement here and there until you're finally in the...
Read more >Debugging Tests
After opening that link, the Chrome Developer Tools will be displayed. Select inspect on your process and a breakpoint will be set at...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Adding
--no-cache
parameter seems to help (at least for me).This parameter is also used in Debugging Tests in Visual Studio Code config, so I guess that can have something with jest cache.
--no-cache
helps although this fix makes no sense to me.