How can I debug tests in Visual Studio Code?

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?

[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.