Breakpoints not working for ECMAScript module package with default debug config

[rickstaa]

Problem description

The jest.jestCommandLine setting is not used in the debugger. As a result, the --experimental-vm-modules is not passed to the debugger, and I cannot debug ECMAScript packages (see video below). I can solve this by creating a new debug configuration within launch.json while adding the "NODE_OPTIONS": "--experimental-vm-modules" item as an environmental variable. I, however, wanted to report it since I could not find documentation on where the jest.jestCommandLine is used and not used. Maybe we should update the documentation to make people aware of this behaviour.

jest_test.mp4

Environment

1. vscode-jest version: v4.6.0.
2. node -v: v18.9.1.
3. npm -v or yarn --version: 8.19.1
4. npm ls jest or npm ls react-scripts (if you haven’t ejected): npm ls jest.
5. your vscode-jest settings if customized:
   • jest.jestCommandLine?: I tried both `` and node --experimental-vm-modules node_modules/jest/bin/jest.js.
   • jest.autoRun? Yes
6. Operating system: Ubuntu 20.04.

Prerequisite

• are you able to run jest test from the command line?: Yes.
• how do you run your tests from the command line? (for example: npm run test or node_modules/.bin/jest): npm run test, npm test and jest.

Steps to Reproduce

1. Clone this example repository.
2. Add "jest.jestCommandLine": "node --experimental-vm-modules node_modules/jest/bin/jest.js" to your settings.json file.
3. See that the tests show up in the test adapter.
4. See that you can run the tests using the adapter.
5. Set a breakpoint.
6. Try to debug a test using the debug symbol in the test explorer without creating a new launch.json item.
7. See that the debugger does not stop at the breakpoints.
8. Check the vscode-jest-test.v2 terminal and see the following error code:

cd /home/ricks/Development/personal/es6-jest-example ; /usr/bin/env 'NODE_OPTIONS=--require /usr/share/code/resources/app/extensions/ms-vscode.js-debug/src/bootloader.bundle.js --inspect-publish-uid=http' 'VSCODE_INSPECTOR_OPTIONS={"inspectorIpc":"/tmp/node-cdp.36779-2.sock","deferredMode":false,"waitForDebugger":"","execPath":"/home/ricks/.nvm/versions/node/v18.9.1/bin/node","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"/tmp/node-debug-callback-004632c914d232bf"}' /home/ricks/.nvm/versions/node/v18.9.1/bin/node ./node_modules/.bin/jest --runInBand --watchAll=false --testNamePattern examples\ of\ some\ things --runTestsByPath /home/ricks/Development/personal/es6-jest-example/__tests__/filterByTerm.spec.js 
Debugger attached.
 FAIL  __tests__/filterByTerm.spec.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/ricks/Development/personal/es6-jest-example/__tests__/filterByTerm.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import {
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1678:14)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.919 s, estimated 1 s
Ran all test suites within paths "/home/ricks/Development/personal/es6-jest-example/__tests__/filterByTerm.spec.js".

Expected Behavior

It should run with the --experimental-vm-modules flag and should therefore successfully stop at the breakpoint.

Actual Behavior

Instead, the jest.jestCommandLine doesn't seem to be applied when using the debugger.

Current fix

I was able to fix this behaviour by creating a new test configuration in the launch.json file while adding the "NODE_OPTIONS": "--experimental-vm-modules" item to the environmental variables.

{
    "type": "node",
    "name": "vscode-jest-tests.v22",
    "request": "launch",
    "args": [
      "--runInBand",
      "--watchAll=false",
      "--testNamePattern",
      "${jest.testNamePattern}",
      "--runTestsByPath",
      "${jest.testFile}"
    ],
    "env": {
      "NODE_OPTIONS": "--experimental-vm-modules"
    },
    "cwd": "${workspaceFolder}",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
    "program": "${workspaceFolder}/node_modules/.bin/jest",
    "windows": {
      "program": "${workspaceFolder}/node_modules/jest/bin/jest"
    }
}

I can also specify another config using the following debug config:

{
    "type": "node",
    "name": "vscode-jest-tests.v2",
    "request": "launch",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
    "program": "${workspaceFolder}/node_modules/.bin/jest",
    "cwd": "${workspaceFolder}",
    "args": [
        "node_modules/jest/bin/jest.js",
        "--config",
        "jest.e2e.config.js",
        "--runInBand",
        "--watchAll=false",
        "--testNamePattern",
        "${jest.testNamePattern}",
        "--runTestsByPath",
        "${jest.testFile}"
    ],
    "env": {
        "NODE_OPTIONS": "--experimental-vm-modules"
    },
}

[connectdotz]

@rickstaa you are right that the debugger doesn't use jest.jestCommandLine by default. vscode debug scheme is through the launch.json, which is different from the regular jest test runs that we control the jest process command. Therefore, we are experimenting with a setup wizard to bridge the gap: take the user's jest.jestCommandLine and generate a launch.json entry accordingly. But given the wide variety of user environments, it might not cover all cases, thus always encourage users to experiment and fix what is not working, and feel free to let us know so we can improve the wizard for future usage.

Looks like you have already figured out a working launch.json, that is great! 👍 If you don't mind trying the setup wizard and let us know if it works that will be really helpful. Thanks.

[rickstaa]

@connectdotz Thanks for your answer and the explanation! Maybe it is an idea to document that behaviour in the README?

The setup wizard was the one that guided me to the right config 🚀. The only thing that it had wrong was the program which I had to set to ${workspaceFolder}/node_modules/.bin/jest instead of jest, and the --experimental-vm-modules which it placed in the args parameter instead of under env.

[rickstaa]

Here is the minimum needed configuration on Linux:

{
    "type": "node",
    "name": "vscode-jest-tests.v2",
    "request": "launch",
    "args": [
        "--config",
        "jest.config.js",
    ],
    "env": {
        "NODE_OPTIONS": "--experimental-vm-modules"
    },
    "cwd": "${workspaceFolder}",
    "program": "${workspaceFolder}/node_modules/.bin/jest"
}

[rickstaa]

And on Windows:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "name": "vscode-jest-tests.v2",
            "request": "launch",
            "args": [
                "--config",
                "jest.config.js",
            ],
            "env": {
                "NODE_OPTIONS": "--experimental-vm-modules"
            },
            "cwd": "${workspaceFolder}",
            "program": "${workspaceFolder}/node_modules/jest/bin/jest.js"
        }
    ]
}