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

Unable to debug in VSCode in CRA sample using node manager (fnm) #1022

Open
jpierson-at-riis opened this issue Apr 26, 2023 · 8 comments
Open

Comments

@jpierson-at-riis
Copy link

Environment

  1. vscode-jest version: v5.2.3
  2. node -v: v18.12.0
  3. npm -v or yarn --version: 8.19.2
  4. npm ls jest or npm ls react-scripts (if you haven’t ejected):
    [email protected] C:\projects\sample-app
    ├─┬ @storybook/[email protected]
    │ └── [email protected] deduped
    └── [email protected]
    
  5. your vscode-jest settings if customized:
    • jest.jestCommandLine? npm test ---
    • jest.autoRun? N/A
    • anything else that you think might be relevant?
       "debug.javascript.defaultRuntimeExecutable": {
       
           "pwa-node": "C:\\Users\\myuser\\AppData\\Roaming\\fnm\\aliases\\default\\node.exe"
       },
    
  6. Operating system:
Edition	Windows 10 Enterprise
Version	21H2
Installed on	‎5/‎9/‎2022
OS build	19044.2728
Experience	Windows Feature Experience Pack 120.2212.4190.0

Prerequisite

  • are you able to run jest test from the command line? yes
  • how do you run your tests from the command line? npm run test

Steps to Reproduce

  1. Install Node through a version manager (ex. fnm on Windows)
  2. Install VSCode
  3. Install vscode-jest extension in VSCode
  4. Start a new create-react-app application
  5. Open the project in VSCode
  6. Set a breakpoint on a line in the default test file
  7. Right click and choose Debug Test from the Testing view

Expected Behavior

VSCode should start the test in debug mode and the breakpoint that had been set on step 6 above should be hit and execution should be paused at that step.

Actual Behavior

image

[Window Title]
Visual Studio Code

[Content]
Can't find Node.js binary "npm": path does not exist. Make sure Node.js is installed and in your PATH, or set the "runtimeExecutable" in your launch.json

[Open 'launch.json'] [Cancel]
@jpierson-at-riis jpierson-at-riis changed the title Unable to debug in VSCode in CRA sample Unable to debug in VSCode in CRA sample using node manager (fnm) Apr 26, 2023
@jpierson-at-riis
Copy link
Author

As a workaround I was able to get a debugger attached just going through VSCode generic debugging support for run test. I would still love to understand how to get the context menu option working properly though through the extension.

image

image

@connectdotz
Copy link
Collaborator

hi @jpierson-at-riis, I tried a fresh cra on MacOS. There didn't seem to be any problem debugging and stopping at the breakpoint at the App.test.js. Looks like this is probably related to your specific env:

You might be able to fix it by customizing the launch.json if the generated debug config is not working due to env related issues. Can you find the generated debug config from the vscode-jest output terminal? When you try to debug the first time, if there is no existing debug config ("vscode-jest-tests.v2", for example), it will auto-generate one and output it in the terminal like this:

[info] auto config debug config:

{
  "type": "node",
  "name": "vscode-jest-tests.v2",
  "request": "launch",
  "args": [
    "test",
    "--",
    "test",
    "--runInBand",
    "--watchAll=false",
    "--testNamePattern",
    "${jest.testNamePattern}",
    "--runTestsByPath",
    "${jest.testFile}"
  ],
  "cwd": "/testing/cra-2023-04-30",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "disableOptimisticBPs": true,
  "runtimeExecutable": "npm",
  "protocol": "inspector"
}

You can copy/paste it to your launch.json and try to use the full path for npm in the "runtimeExecutable".

This workaround is kind of a hack, I'm sure a correctly configured env should be able to find the npm without the full path. But I don't have enough context for your env, so you might want to investigate further in your env for the actual root cause.

Let me know if you have any other questions.

@connectdotz
Copy link
Collaborator

just noticed this one is also related to fnm. Wondering if it has the same root cause as #1028? Can anybody in this thread confirm how they set up their fnm env? In .bashrc? Have any login profiles sourced the .bashrc? (see comment for detail)

@jpierson-at-riis
Copy link
Author

I'm returning to this project so I'll retry this after I've updated everything.

@jpierson-at-riis
Copy link
Author

I've picked this up and tried some of the discussion options and solutions again but I'm still running into the same errors even after VSCode has added support for FNM. I've also tried various configurations of the terminal.integrated.automationProfile.<platform> setting so far with no avail.

Example of specifying powershell with the default profile which includes fnm env --use-on-cd | Out-String | Invoke-Expression:

    "path": "pwsh.exe",
    "args": [
      "-noexit",
      "-file",
      "${env:USERPROFILE}\\Documents\\PowerShell\\profile.ps1"
    ]

Example of specifying fnm directly similar to how I've attempted to set up a launch profile in the past:

  "terminal.integrated.automationProfile.windows": {
    "path": "fnm",
    "args": ["exec", "--using-file", "--", "node"]
  }

In all of cases I've tried so far, attempting to Debug by right clicking the test and choosing the Debug option always seems to result in the same error message.

Can't find Node.js binary "npm": path does not exist.

It seems to me that when invoking the Debug options from this extension that they may not be using the VSCode configured shell's or profiles defined and perhaps are expecting npm to be available on on the path specified when VSCode itself is run. If this is the case then I'm not sure there is any reasonable workaround but I don't know enough about the implementation of the extension at this point to make an intelligent conclusion.

@jpierson-at-riis
Copy link
Author

I've also just discovered the jest.shell setting and gave that a go.

"jest.shell": "powershell"
"jest.shell": "Powershell"
"jest.shell": "pwsh"
"jest.shell": "pwsh.exe"
  "jest.shell": {
    "path": "pwsh.exe",
    "args": [
      "-noexit",
      "-file",
      "${env:USERPROFILE}\\Documents\\PowerShell\\profile.ps1"
    ]
  }

Note that the Run Test option always seems to work for me with no problem. It's only the Debug Test option that seems to fail.

@connectdotz
Copy link
Collaborator

@jpierson-at-riis, the debugger doesn't run in the terminal, so the terminal/shell related setting will not impact it. The control is all in the debug config "vscode-jest-tests.v2"...

can you paste your custom debug config "vscode-jest-tests.v2"? I assumed you have tried the runtimeVersion indicated in the vscode fnm release note?

@jpierson-at-riis
Copy link
Author

@connectdotz, as things go I'm working on another project at the moment which uses vitest instead. As soon as I get a chance I'll try to follow up on your suggestions. Thank you for the input!

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

No branches or pull requests

2 participants