Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
justinlevi opened this issue Jan 30, 2018 · 10 comments
Closed

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

justinlevi opened this issue Jan 30, 2018 · 10 comments
Labels

Comments

@justinlevi
Copy link

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

  1. Add the following test to src/App.test.js
it('SIMPLE TEST', () => {
  let x = 1;
  let y = 2;
  expect(1).toEqual(2);
});
  1. 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:

@justinlevi
Copy link
Author

justinlevi commented Jan 30, 2018

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
Copy link
Member

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

@keelzebub
Copy link

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
Copy link

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
Copy link

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
Copy link
Author

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.

screen-recording

@stephtr
Copy link
Member

stephtr commented Feb 22, 2018

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
Copy link
Member

stephtr commented Apr 10, 2018

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

@stephtr stephtr closed this as completed Apr 10, 2018
@t-zander
Copy link

t-zander commented Aug 17, 2019

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
Copy link

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"
    ]
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants