typescript - Visual Studio Code'da Jest ile Angular Testlerini Hata Ayıklama

Projemiz şu anda Angular testleri için jest kullanıyor. Jest-preset-angular kullanıyoruz ve Visual Studio Code içinde debug modunda çalışacak şekilde yapılandırıldı. Hata ayıklama çalışıyor, ancak öncelikle spec.ts dosyalarını JavaScript'e dönüştürüyor. Bu, dosya TypeScript'ten JavaScript'e dönüştürüldüğü için kesme noktasının genellikle istediğim yerde olmadığı anlamına geliyor.

Projemi Visual Studio Code içinde Typescript olarak testlerimi hata ayıklayabilecek şekilde nasıl yapılandırabilirim?

Karma'yı Jest ile birlikte çalıştırmayı denedim çünkü tarayıcıda hata ayıklamak için Karma deneyimi çok daha kolay. Ancak, testlerde o kadar çok Jest bağımlılığı var ki bu da bir zorluk teşkil ediyor.

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"]
}

Cevap #1

Sonunda https://jestjs.io/docs/testing-frameworks#angular adresinde bağlantısı verilen Micha Pierzchala'nın bir makalesinde bir öneriye rastladım. Makale, IDE entegrasyonlarını öneriyor ve VS Code için olanı vscode-jest. Bu tam olarak aradığım şeydi ve TypeScript kodunuz için harika bir hata ayıklama deneyimi sunuyor.

Jest yapılandırmamda herhangi bir şeyi değiştirmeme gerek yoktu. Sadece bu uzantıyı VS Code çalışma alanıma ekledim.

Düzenle: vscode-jest'in oldukça hatalı olduğunu gördüm, bu yüzden vscode-jest-runner'a geçtim. Bu eklenti ile testi sağ tıklama bağlam menüsünden başlatıyorsunuz. TypeScript kodunuz için hata ayıklama deneyimini çok daha keyifli hale getirmede aynı sonucu veriyor.

İlgili makaleler