How can I debug tests in Visual Studio Code?

[groffcole]

I'm trying to debug tests in Visual Studio Code, but I always receive an error like the following:

import * as GalleriesHttpPort from "./GalleriesHttpPort";
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

How can I properly debug in Visual Studio Code?

[jayair]

Hmmm I don't have experience with VS Code. But are you setting the test script in your package.json?

"scripts": {
  "test": "serverless-bundle test"
}

[groffcole]

Yes, this is my scripts section:

  "scripts": {
    "test": "serverless-bundle test"
  }

What IDE do you use for developing Serverless Framework applications? Are you able to debug tests wit it?

[jeff-kilbride]

What do you have in your launch configuration? It looks like you're pointing VS Code at the normal javascript files, rather than the webpack generated files / maps. Node doesn't recognize import statements outside of ECMAScript modules -- and only recognizes modules in v12.x with an experimental command line flag.

[groffcole]

In the root of my project I have this launch.json file:

{
  // 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": [
        "--runInBand"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "program": "${workspaceFolder}/node_modules/jest/bin/jest"
    }
  ]
}

In my Serverless Framework project at {root}/application, I have this 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": [
        "--runInBand"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "program": "${workspaceFolder}/node_modules/jest/bin/jest"
    }
  ]
}

This is a "monorepo" project, and the code is here: https://github.com/groffcole/art-center-service. You can see how I have three separate Serverless Framework services. The one that includes unit tests is application.

[jeff-kilbride]

@groffcole @jayair

I can get it to run a test, but I can't get it to hit the breakpoints. They are greyed out, which means it can't make the connection between the original files and the webpack generated ones. Here's what I have, so maybe someone else can chime in:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest Current File",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/node_modules/.bin/serverless-bundle",
      "args": [
        "test",
        "${workspaceFolder}/**/**/${fileBasenameNoExtension}.test.js"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "runtimeExecutable": "/Users/jeff/.nvm/versions/node/v12.16.0/bin/node",
      "runtimeArgs": ["--nolazy"],
      "smartStep": true,
      "outFiles": ["${workspaceFolder/.webpack/**/*.js"],
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceRoot}/node_modules/*",
        "webpack:///./*": "${workspaceRoot}/*",
        "webpack:///*": "*"
      }
    }
  ]
}

Couple of things:

• This is meant to be run from the source file you want to test / debug. It will only run the test for that file. This is only for convenience, since I typically debug one file at a time. You can make a launch config to run all tests by simply removing the second string from the args array.
• For whatever reason, serverless-bundle / vscode doesn't recognize my nvm node installation even though it does exist on my PATH.
• I've tried running this several different ways using jest directly, rather than serverless-bundle, but I always wind up with the import SyntaxError.
• The outFiles, sourceMaps, and sourceMapPathOverrides don't seem to do anything. I get the same results with or without them. Maybe the same options are being set by serverless-bundle?
• Without better access to the underlying jest config -- and possibly serverless-webpack -- I'm not sure this can be done with VS Code, especially if you want to debug the actual test file and not your source code. I've had no luck trying to debug a test file. I can't even see the current jest config, because there's no way to pass the --verbose flag through serverless-bundle.

Debugging in VS Code with jest and webpack does work. I've found several examples of people who have been able to do it and there are instructions on the jest site for setting it up. But, even the jest guys say it presents unique challenges. Again, I think it may be impossible without the ability to tweak the various configs.

Anyone else?? Bueller? Anyone? 😉

[jayair]

Yeah this needs some investigation. Can you share the guide from the jest site? We need to build this into serverless-bundle

[groffcole]

Is there another IDE that currently allows debugging?

[jeff-kilbride]

@jayair Here is the jest guide for webpack.

@groffcole It's not VSCode. I believe the problem is, we need to be able to pass command line arguments through serverless-bundle to jest (and possibly webpack) in order for it to work correctly. For example, here is a starter project for debugging jest tests with VSCode and babel-jest:

https://github.com/hamzahamidi/jest-starter

I cloned this, upgraded to the latest jest and babel-jest packages, and tested it -- and it works. I can set breakpoints in both the tests and the source, and they are hit correctly. The differences are that webpack is not involved and the --runInBand option is being passed to jest through the VSCode launch config.

@jayair This might be a good starting place for figuring out how to get this to work. The above repo is dead simple.

[jayair]

@jeff-kilbride Thanks for the repo!

I haven't found time to look into this yet. If anybody wants to take this on, we need to figure out which options need to be passed in to serverless-bundle to make the debugging work. Alternatively, if we can look at https://github.com/hamzahamidi/jest-starter to see how it would work with Webpack.

[zlanich]

I've also been trying tirelessly to get this working. Here are my finds so far:

Running serverless-bundle test --some-arg=foo does in fact pass the arg to jest. I tested this both by logging the argv in the serverless-bundle scripts that get passed to jest, as well as by trying to pass an unsupported arg to jest, upon which it threw an error:

Unrecognized CLI Parameter: 

Unrecognized option "P". Did you mean "$0"?

CLI Options Documentation:
  https://jestjs.io/docs/en/cli.html

I'm not sure however, how you would pass specific arguments to webpack or else-wise.

I was able to get VSCode Debugging w/ Breakpoints working in JS & Typescript files, though. Here's my launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Serverless - Example Service",
      "cwd": "${workspaceRoot}/services/example-service",
      "runtimeExecutable": "node",
      "runtimeArgs": ["--lazy"],
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceRoot}/services/example-service/node_modules/.bin/serverless",
      "args": [
        "offline",
        "--stage=dev",
        "--noTimeout",
        "--dontPrintOutput",
        "-P",
        "4000",
      ],
      "sourceMaps": true,
      "smartStep": false,
      "stopOnEntry": false,
      "outFiles": [
        "${cwd}/.webpack/**/*"
      ],
      "protocol": "inspector",
      "env": {
        "NODE_ENV": "development",
        "SLS_DEBUG": "*",
      },
      "autoAttachChildProcesses": true,
      "windows": {
          "cwd": "${workspaceRoot}\\services\\example-service",
          "program": "${workspaceRoot}\\services\\example-service\\node_modules\\.bin\\serverless"
      }
    }
  ]
}

I also have a custom directive in serverless.yml, though I'm not 100% certain it's needed anymore:

custom:
  serverless-offline:
    port: 4000 # This has to be the same as the launch.json port for debug

For now, I just have it running this one service, but I intend to make it more universal. I can successfully hit http://localhost:4000/someserverlessfunc and it hits breakpoints in all file types. It's fickle sometimes and requires me to run it twice, and the dots are always grey because VSCode can't make the connection between src/dist files in this case for some reason, but it works.

In serverless-bundle test, I'm unable to get VSCode to hit breakpoints in plain JS test files, JS src files, webpack-generated files or anything; not even with a debugger; statement. I've looked at the jest-starter above, but didn't find it to be terribly helpful yet, and I've experimented with a LOT of launch.json params, based on my working debug config and possible changes I've found on the web. So far no luck.

My experience with webpack, etc isn't terribly deep, so I'm not 100% certain where to go from here. Does anyone at least have an idea of where to go from here, or at least some knowledge of how the VSCode -> Jest/Babel relationship works for debug that might help me tinker more?

Thanks!

[girdharsoni]

@zlanich i have tried your solution in windows, but didn't work for me, is your solutions work for windows or other oprating system.

Anyone got any solution regarding it.