Create-react-app test debug not stopping at breakpoint

Created by: 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}/>);

  });
....