Find out and document how to debug unit tests from VSCode

[yurishkuro]

How to run and debug unit tests is rather confusing, we need to document it better.

For example, from the command line it's possible to run a test like this:

$ yarn test packages/jaeger-ui/src/model/transform-trace-data.test.js

However, to run with debugger in VSCode we need a launch configuration, and I had trouble coming up with a generic one.

This one has file name hardcoded:

        {
            "type": "node",
            "request": "launch",
            "name": "Jest: current file",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/packages/jaeger-ui/node_modules/.bin/jest",
            "args": ["src/model/transform-trace-data.test.js"],
            "console": "integratedTerminal",
            "cwd": "${workspaceFolder}/packages/jaeger-ui",
        }

[RISHIKESHk07]

@yurishkuro would like to help

[RISHIKESHk07]

@yurishkuro Does this work ?

{
    "type": "node",
    "request": "launch",
    "name": "Jest: current file",
    "skipFiles": [
        "<node_internals>/**"
    ],
    "program": "${workspaceFolder}/node_modules/.bin/jest",
    "args": [
        "${relativeFile}",
        "--config",
        "jest.config.js" // this would run the jest test for current file when we launch on vscode
    ],
    "console": "integratedTerminal",
    "cwd": "${workspaceFolder}"
}

[yurishkuro]

does it work for you?

[RISHIKESHk07]

i got a dependency conflict on npm i ,

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: jaeger-ui@1.37.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from jaeger-ui@1.37.0
npm ERR!   packages/jaeger-ui
npm ERR!     jaeger-ui@1.37.0
npm ERR!     node_modules/jaeger-ui
npm ERR!       workspace packages/jaeger-ui from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"15.3.0 - 16.x" from react-vis@1.11.12
npm ERR! node_modules/react-vis
npm ERR!   react-vis@"^1.7.2" from jaeger-ui@1.37.0
npm ERR!   packages/jaeger-ui
npm ERR!     jaeger-ui@1.37.0
npm ERR!     node_modules/jaeger-ui
npm ERR!       workspace packages/jaeger-ui from the root project

[RISHIKESHk07]

@yurishkuro should i resolve it directly , or is there any other solution for this ?

[RISHIKESHk07]

i did --force to fix above issue and tried running the run and debug on the .test.js files ,

[yurishkuro]

I was also getting this import error, this is why I opened the ticket.

[RISHIKESHk07]

@yurishkuro I did try various changes but it did not fix it , any suggestion where I should focus , I did see that jest is having a problem with esm modules , but in the docs i found the support for it is experimental,

[RISHIKESHk07]

@yurishkuro does this look fine ?

[yurishkuro]

(a) you have test name hardcoded, instead of using the current test file, (b) can you set breakpoints?

[RISHIKESHk07]

{
    // 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",
            "request": "launch",
            "name": "Jest: current file",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": [
                "${file}"
            ],
            "console": "integratedTerminal",
            "cwd": "${workspaceFolder}/packages/jaeger-ui",
        }
          
    ]
}

a) Can be solved by replacing the hardcoded part with {file}.
For b) this works fine , we can directly set breakpoints in the file , or you have something else in mind on how this should work like giving the breakpoints as input in the launch.json & jest takes these breakpoints

[yurishkuro]

+1 please open a PR

[RISHIKESHk07]

@yurishkuro was wondering where should i keep the launch.json ?

[yurishkuro]

Readme or launch.example.json