question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Create-react-app test debug not stopping at breakpoint

See original GitHub issue

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

  });
....

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:6
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
bmihelaccommented, Dec 17, 2018

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.

0reactions
gaearoncommented, Feb 15, 2019

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found