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[bot]]

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[bot]]

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.

[gaearon]

--no-cache helps although this fix makes no sense to me.