typescript - Felsökning av Angular-tester med Jest i Visual Studio Code

Vårt projekt använder för närvarande jest för Angular-tester. Vi använder jest-preset-angular och det är konfigurerat för att köras i felsökningsläge inom Visual Studio Code. Felsökningen fungerar, förutom att den först konverterar spec.ts-filerna till JavaScript. Detta innebär att brytpunkten vanligtvis inte är där jag vill ha den eftersom filen har omvandlats från TypeScript till JavaScript.

Hur kan jag konfigurera mitt projekt så att jag kan felsöka mina tester som Typescript inom Visual Studio Code?

Jag har försökt köra Karma tillsammans med Jest eftersom Karma-upplevelsen för felsökning i webbläsaren är mycket enklare. Dock finns det så många Jest-beroenden inom testerna att detta också är en utmaning.

launch.json
    {
      "name": "Tests",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/jest-cli/bin/jest.js",
      "stopOnEntry": false,
      "args": ["-i", "-o"],
      "cwd": "${workspaceRoot}",
      "preLaunchTask": null,
      "runtimeExecutable": null,
      "env": {
        "NODE_ENV": "test"
      },
      "console": "integratedTerminal",
      "outFiles": ["${workspaceRoot}/dist/**/*"],
      "sourceMaps": true
    }

package.json

  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setupJest.ts"
    ],
    "moduleDirectories": [
      "node_modules",
      "./"
    ],
    "testResultsProcessor": "jest-teamcity-reporter",
    "testMatch": [
      "**/app/**/*.spec.ts"
    ]

tsconfig.spec.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "types": ["jest", "node"]
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}

Svar #1

Jag stötte äntligen på ett förslag i en artikel av Micha Pierzchala som var länkad på https://jestjs.io/docs/testing-frameworks#angular. Artikeln rekommenderar IDE-integrationer, där den för VS Code är vscode-jest. Detta är precis vad jag letade efter och ger en fantastisk debuggerupplevelse för din TypeScript-kod.

Jag behövde inte ändra något i min jest-konfiguration. Jag lade helt enkelt till denna tillägg i min VS Code-arbetsyta.

Redigera: Jag upptäckte att vscode-jest var ganska buggigt, så jag bytte till vscode-jest-runner. Med denna tillägg startar du testet från en högerklicks-kontextmeny. Det ger samma resultat när det gäller att göra debuggupplevelsen mycket trevligare för din TypeScript-kod.

Relaterade artiklar