Debugging Jest Test Visual studio code

Question

I want to debug tests written in Jest in visual studio code in newly created VueJs projects. Tests are written in typescript. I think that it is not related to the Vue.

I've already tried some samples on stack overflow but nothing worked. I still get this error:

Jest encountered an unexpected token

C:\src\vue-testing-sample\tests\unit\Caculator.spec.ts:1 ({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import { Calculator } from "../../src/Calculator"; SyntaxError: Unexpected token import at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

Here is a test:

import { Calculator } from "../../src/Calculator";

describe("HelloWorld.vue", () => {
    it("adds two number", () => {
        const calculator = new Calculator();
        const result = calculator.add(1, 2);
        expect(result).toBe(3);
    });
});

and my configuration:

 "type": "node",
 "request": "launch",
 "name": "Jest All",
 "program": "${workspaceRoot}/node_modules/jest/bin/jest",
 "args": ["--runInBand"],
 "console": "integratedTerminal",
 "internalConsoleOptions": "neverOpen"

I can add that running tests from console from default Vue Webpack configuration works.

Possible duplicate of stackoverflow.com/questions/47563964/debugging-jest-on-vs-code — Michael Freidgeim

Leigh Mathieson Leigh Mathieson · Accepted Answer · 2019-04-29T12:34:44

This is my config for debugging Jest tests on VSCode, add this to your launch config in settings.json

"launch" : {
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
      "args": [
          "-i"
      ],
       "skipFiles": [
        "<node_internals>/**/*.js", "node_modules",
      ]
    },
  ],
}

Debugging Jest Test Visual studio code

1 Answers