jest-community / vscode-jest

The optimal flow for Jest based testing in VS Code
MIT License
2.82k stars 290 forks source link

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

Open jpierson-at-riis opened 1 year ago

jpierson-at-riis commented 1 year ago

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):
    sample-app@0.1.0 C:\projects\sample-app
    ├─┬ @storybook/preset-create-react-app@4.1.2
    │ └── react-scripts@5.0.1 deduped
    └── react-scripts@5.0.1
  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](https://user-images.githubusercontent.com/77620925/234620308-2e4d4e93-8468-482e-9c9c-e3edb97ec415.png)

[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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 10 months ago

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

jpierson-at-riis commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

@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?