Nx: Troubles setting up vs code debugger for Jest

[Artvic]

I'm trying to configure the vsCode debugger to debug my jest unit tests. I followed the Nrwl blog post (https://blog.nrwl.io/debugging-nx-in-vs-code-cb1dbe9eeeba) and i can't get it to work.
In fact, after setting up my lunch.json as follows:

{
    "name": "debug-jest",
    "type": "node",
    "request": "launch",
    "program": "${workspaceFolder}/frontends/node_modules/@angular/cli/bin/ng",
    "args": [
        "test",
        "lib-name",
        "--codeCoverage=false",
        "--testNamePattern=test",
        "--testFile=${workspaceFolder}/frontends/libs/test-path"
    ],
    "cwd": "${workspaceFolder}/frontends/",
    "console": "internalConsole"
}

the debugger starts and immediately outputs an error:

Exception has occurred: Error
Error: ENOENT: no such file or directory, access 'C:\frontends\node_modules\@angular\cli\models\commands.json'
    at Object.accessSync (fs.js:193:3)
    at Object.existsSync (fs.js:224:8)
    at Object.findUp (C:\frontends\node_modules\@angular\cli\utilities\find-up.js:21:22)
    at Object.runCommand (C:\frontends\node_modules\@angular\cli\models\command-runner.js:50:42)
    at default_1 (C:\frontends\node_modules\@angular\cli\lib\cli\index.js:32:54)
    at Object.<anonymous> (C:\frontends\node_modules\@angular\cli\lib\init.js:120:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)

Am I doing something wrong?

[FrozenPandaz]

Can you try the following setup?

1. Install https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner
2. Update this setting to yarn test or npm test --
   
3. Update .vscode/launch.json:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "name": "vscode-jest-tests",
      "request": "launch",
      "args": [
        "test",
        "--passWithNoTests",
        "--no-code-coverage",
        "--runInBand",
        "--testFile"
      ],
      "cwd": "${fileDirname}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng"
    }
  ]
}

[Tre665]

Hi @FrozenPandaz,

I have tried your proposed solution since I would like to use the VS Code extension that you mentioned (I think this is far more comfortable than to update the launch.config json file every time I want to select the lib I want to test).

Unfortunately I have some issues when I want to run or debug a test:

`internal/modules/cjs/loader.js:589
throw err;
^

Error: Cannot find module '/Users/USER/repos/PROJECTS/yarn test'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:587:15)
at Function.Module._load (internal/modules/cjs/loader.js:513:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:760:12)
at startup (internal/bootstrap/node.js:308:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:878:3)`

I have used the same launch.json config that you have posted and set the jest path to yarn test (since we use yarn)

In the console the command works with no problems.
Do I miss something?

Another question would be, I am also able to set breakpoints not just in the spec file, but also in the code under test? This was unfortunately not working with the solution from linked blog.

Little Update:

With the "old" way now the breakpoints that are in the code under tests now works for me. Was missing the --no-code-coverage flag. But the VS Code Plugin is unfortunately still not working for me.

Here is my launch config (1st is for vscode plugin, 2nd for the "old" way)

"version": "0.2.0", "configurations": [ { "type": "node", "name": "vscode-jest-tests", "request": "launch", "args": ["test", "--passWithNoTests", "--no-code-coverage", "--runInBand", "--testFile"], "cwd": "${fileDirname}", "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng" }, // replace the 2nd argument with the app/lib you want to debug or remove it to run all tests // this works for me { "type": "node", "name": "vscode-debug-jest-tests", "request": "launch", "program": "${workspaceFolder}/node_modules/.bin/ng", "args": [ "test", "LIB NAME AS IN NX.jSON FILE", "--runInBand", "true", "--no-code-coverage" ], "cwd": "${workspaceFolder}", "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" } ] }

[johannesschobel]

Dear @FrozenPandaz ,

how can i run my tests in @nrwl/nx in debug mode? I followed your instructions and it works (i.e., all tests are executed in debug mode). However, i would like to execute only a specific test (i.e., right-click on a test and select "debug with jest" as provided with this extension you mentioned).

How can i achieve this?
All the best,

[alfaproject]

If it helps anyone, I ended up adding this launch task:

    {
      "type": "node",
      "request": "launch",
      "name": "Debug current file",
      "program": "${workspaceFolder}/node_modules/.bin/ng",
      "args": [
        "test",
        // Get the closest `jest.config.js` parent folder basename (it matches the project name in `angular.json`)
        "$(basename $(dirname $(${workspaceFolder}/node_modules/.bin/find-up --cwd=${fileDirname} jest.config.js)))",
        "--run-in-band",
        "--code-coverage=false",
        "--test-file=${relativeFile}"
      ],
      "smartStep": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }

I'm using macOS but you can replace that command with a node script if you want. The idea is that you get the closest jest.config.js file to the file that you are trying to debug and leave the rest to ng test.

Assuming you are using a standard file structure from nx or ng this all works automagically for any type of project using Jest.

[johannesschobel]

Dear @alfaproject ,
thanks a lot for this snippet. How can i use this in my regular Windows Setup? i.e., conver the

"$(basename $(dirname $(${workspaceFolder}/node_modules/.bin/find-up --cwd=${fileDirname} jest.config.js)))",

to a proper npm script?

Thanks a lot for your time and help!

[alfaproject]

You need to make a script that accepts a file name as input and from that input you need to get the parent folder name that contains the nearest jest.config.js

Basically, that line does this:

1. Given that ${fileDirname} is /home/your-username/your-workspace/your-project/__tests__
2. findup of jest.config.js returns /home/your-username/your-workspace/your-project/jest.config.js
3. dirname of that returns /home/your-username/your-workspace/your-project
4. basename of that returns your-project

Now that you have your-project, that command will be ng test your-project ...

You just need to create a script that does those 4 points. Should be fairly easy (;

[Tre665]

I also had issues to get the debugging working in vscode. The nicest solution that worked for me was the config from @toddwseattle. He shared his config in this gist.

You can also find a discussion in the vscode jest repo here

What this solution makes it super nice is, that it also offers a selection menu for the lib that you want to debug. I think this is pretty handy in a monorepo environment.

[johannesschobel]

Dear @Tre665 and @toddwseattle , thanks a lot (!!!) for this awesome GIST - that is a life-saver! i really (!) like this approach - thank you so much :tada:

[alfaproject]

I've considered doing that but that requires maintaining that list of input values. I have dozens of projects in my monorepo and all I want is to press F5 in a spec file and it just works. If anyone wants the same, feel free to use my solution. (;

[toddwseattle]

It might be possible to generate either an add in or schematic the would dynamically generate the menu from nx.json/angular.json. Or a script.

[johannesschobel]

@toddwseattle , thanks for taking part in this conversation. For now i am quite happy with adding those libs myself. However, if someone will come up with a homebrew solution, i am happy to try it and give feedback!

[FrozenPandaz]

Hi, sorry about this.

This was mislabeled as stale. We are testing ways to mark _not reproducible_ issues as stale so that we can focus on actionable items but our initial experiment was too broad and unintentionally labeled this issue as stale.