Vue-jest: Approaches to debugging unit tests

[sarngru]

I bootstrapped a new vue app using vue cli with webpack and Jest (vue-jest). I got unit tests working from command line. How can I debug my Jest Vue unit tests?

I got vscode-chrome-debug to work, and I can debug my js test files. My trouble is when breakpoint is inside a Vue Component script block, the breakpoint hit at wrong location, presumably because of source maps. Do you have a workaround to get this to work?

https://github.com/Microsoft/vscode-chrome-debug

[psychosis448]

@sarngru Did you get it to work.
My jest tests run without any problem.
But trying to debug my tests, my modules (vue-components cannot be loaded)

[psychosis448]

I solved it.
You have to specify your jest.conf.js aswell for your debug command...
Otherwise jest does not know how to resolve your aliased path

"debug": "node --inspect ./node_modules/jest/bin/jest --config test/unit/jest.conf.js"

I'm still looking for a solution to directly debug in VSCode though

[psychosis448]

Once figured above out, the latter one was not so hard :)

    {
      "type": "node",
      "request": "launch",
      "name": "Jest All",
      "program": "${workspaceFolder}/node_modules/jest/bin/jest",
      "args": ["--config=test/unit/jest.conf.js"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Jest Current File",
      "program": "${workspaceFolder}/node_modules/jest/bin/jest",
      "args": ["${relativeFile}","--config=test/unit/jest.conf.js"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }

[jianwu]

I use this configuration but got following error:

FAIL  tests/unit/HelloWorld1.spec.js
  ● Test suite failed to run

    .../tests/unit/HelloWorld1.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.iterator";
                                                                                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected string

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

I added .babelrc with following:

{"env": {
    "development": {
        "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
    }
}}

Got a different error:

.../tests/unit/HelloWorld1.spec.js:3
    import _interopRequireWildcard from "..../node_modules/@babel/runtime/helpers/builtin/es6/interopRequireWildcard";
           ^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

[jamesalways]

Same error!
Thanks!

[barnholdy]

Using vs code launch config from here: https://jestjs.io/docs/en/troubleshooting.html#debugging-in-vs-code (second config) I also got the first error described by @jianwu.
I was able to fix it using the solution described here: https://stackoverflow.com/questions/51365250/run-jest-got-unexpected-string-at-scripttransformer-transformandbuildscript
Hope it helps you as well.

[barakbd-bluevine]

@barnholdy - can you please share your full config files?

[sarngru]

I was able to debug in vscode with following:

// package.json
"scripts": {
    "test:unit": "vue-cli-service test:unit --coverage",
    "test:debug": "node --inspect-brk node_modules/.bin/vue-cli-service test:unit --no-cache --watch --runInBand"
  }

// jest.config.js
module.exports = {
  transformIgnorePatterns: ['/node_modules/(?!@babel)'],
}



md5-dd50c5a9ca073df59bc9df715e56f2de



// .vscode/launch.json
// Debug active spec.js file in vscode
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Unit Tests",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "test:debug",
        "${file}"
      ],
      "port": 9229
    }
  ]
}

[barakbd-bluevine]

I am getting "unverified breakpoint". Am I missing something with sourceMaps?

[sarngru]

I am getting "unverified breakpoint". Am I missing something with sourceMaps?

@barakbd-bluevine can you publish a sample project that recreates issue you are having.

[barakbd-bluevine]

Thanks! Will work on it and publish a link soon.