Debug w/ Create React App does not seem to work.

[justinlevi]

Environment

1. node -v: 8.9.4

2. npm -v: 5.6.0

3. npm ls react-scripts (if you haven’t ejected): [email protected]

4. Operating system: OSX 10.13.2

Steps to Reproduce

1. open vscode and ensure I have the latest vscode-jest installed
2. npx create-react-app my-app
3. cd my-app && yarn add @types/jest
4. Create the .vscode/launch.json file and add the following configuration, from the create-react-app readme.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug CRA Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",      
      "args": [
        "test",
        "--runInBand",
        "--no-cache",
        "--env=jsdom"
      ],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

source: https://github.com/facebook/create-react-app/blob/ed5c48c81b2139b4414810e1efe917e04c96ee8d/packages/react-scripts/template/README.md#debugging-tests-in-visual-studio-code

5. Add the following test to src/App.test.js

it('SIMPLE TEST', () => {
  let x = 1;
  let y = 2;
  expect(1).toEqual(2);
});

6. Add a breakpoint, and Click the Debug lens above the test.

Expected Behavior

The debug overlay to open and the debugger to break.

Actual Behavior

Error: Cannot find jest.js file

---

Note: Following some research elsewhere on this issue queue and elsewhere I've also tried setting my jest.pathToJest in my .vscode/settings.json to a number of different settings with no luck.

Reference:

• create-react-app #113

• out-of-the-box unexpected token with create-react-app #125

• out-of-the-box Visual Studio Code unexpected token when testing facebook/create-react-app#2709

• Document how to debug unit tests  facebook/create-react-app#594

• https://stackoverflow.com/questions/47575916/vscode-says-it-cannot-find-jest-js-file

[justinlevi]

ha - seems that modifying the settings.json file to the following works:

{
  "jest.pathToJest": "node_modules/jest/bin/jest.js"
}

UPDATE: - Unfortunately, import statements now seem to fail in the tests.

[seanpoulter]

Well that's confusing, I was thinking it was the same as #193.

[keelzebub]

Hey! So I was experiencing the exact same problem, and it turned out I needed to add a .babelrc to the root of my project with just the following:

{
  "presets": [
    "react-app"
  ]
}

You may need to restart vscode, but I'm not totally sure.

[alaindresse]

Hi !

I'm having the same issue, even with a .babelrc as described by @beaksandclaws. What is the right config for jest.pathToJest ? Or is this more than just finding the right config ?

Alain

[rrousselGit]

Maybe this extension is running jest directly instead of using react-scripts.

Which causes problems because react-scripts introduce configurations for ES6/jsx syntax. Which is why @justinlevi got a problem with imports.

[justinlevi]

Here's a screen capture video showing the issue plus the "fix" by manually editing the jest.pathToJest to "node_modules/jest/bin/jest.js". Unfortunately I have to switch back this setting as soon as I'm done debugging otherwise I get the module import errors.

[stephtr]

This is the same issue as #193. Directly suppling jest to pathToJest doesn't work (same as simply running jest in a terminal outside of VS Code), since react-scripts adds a pile of configuration for jest.

For your information, #271 should bring support for debugging projects created by create-react-app.

[stephtr]

I'm closing it since it got resolved with today's update.

[t-zander]

Hey! So I was experiencing the exact same problem, and it turned out I needed to add a .babelrc to the root of my project with just the following:

{
  "presets": [
    "react-app"
  ]
}

You may need to restart vscode, but I'm not totally sure.

That's worked for me. Thank you. Seems like it is the easiest solutions.

[fabienjuif]

In same way, and for those who don't like having a lot of configuration file at root of their projects, you can add this to your package.json:

  "babel": {
    "presets": [
      "react-app"
    ]
  }