Create-react-app test debug not stopping at breakpoint

[tusharchutani]

I 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}/>);

 });
....

[miraage]

Npm runner "test:debug": "react-scripts --inspect-brk test --runInBand" does not work as you expected. As far as I know the CRA codebase, all flags/arguments before the actual command are ignored. Plus, --runInBand isn't actually passed to the jest runner, but to the react-scripts binary.

I, personally, would like to have an option to debug tests, despite the fact that I need it in very rare cases.

[heyimalex]

@miraage This is what the documentation says to do.

[rsuk]

@heyimalex That is what is being described as not working in the previous comments I think, i.e.

react-scripts --inspect-brk test --runInBand

then attach chrome via chrome:inspect (or about:inspect). The attach works, but no breakpoints are hit and debugger; statements don't break.

[heyimalex]

Yeah, I was agreeing with the issue creator; it sounds like they're doing everything right. Also I can replicate this. With a stock cra install the breakpoint works about half of the time. Really strange.

[bmihelac]

Adding --no-cache parameter seems to help (at least for me).

 "test:debug": "react-scripts --inspect-brk test --no-cache --verbose=false --runInBand",

This parameter is also used in Debugging Tests in Visual Studio Code config, so I guess that can have something with jest cache.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

[gaearon]

This is still an issue.