تایپاسکریپت - اشکالزدایی تستهای انگولار با Jest در ویژوال استودیو کد

پروژه ما در حال حاضر از jest برای تستهای Angular استفاده میکند. ما از jest-preset-angular استفاده میکنیم و پیکربندی شده است تا در حالت دیباگ در Visual Studio Code اجرا شود. دیباگ کردن کار میکند، اما مشکل این است که ابتدا فایلهای spec.ts به جاوااسکریپت تبدیل میشوند. این بدان معناست که نقطه توقف (breakpoint) معمولاً در جایی قرار نمیگیرد که من میخواهم، زیرا فایل از TypeScript به JavaScript تبدیل شده است.

چگونه میتوانم پروژه خود را طوری پیکربندی کنم که بتوانم تستهایم را بهعنوان Typescript در Visual Studio Code دیباگ کنم؟

من تلاش کردهام که Karma را همراه با Jest اجرا کنم زیرا تجربهی استفاده از Karma برای اشکالزدایی در مرورگر بسیار راحتتر است. با این حال، تعداد زیادی وابستگی Jest درون تستها وجود دارد که این نیز یک چالش است.

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
    }

پکیج.جیاسان

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

پاسخ شماره ۱

من بالاخره با یک پیشنهاد در مقالهای از میچا پیروزچالا برخورد کردم که در https://jestjs.io/docs/testing-frameworks#angular لینک شده بود. این مقاله ادغامهای IDE را توصیه میکند که یکی از آنها برای VS Code به نام vscode-jest است. این دقیقاً همان چیزی است که به دنبالش بودم و تجربه دیباگ فوقالعادهای برای کد TypeScript شما فراهم میکند.

من مجبور نبودم چیزی در پیکربندی jest خود تغییر دهم. من به سادگی این افزونه را به فضای کاری VS Code خود اضافه کردم.

ویرایش: من متوجه شدم vscode-jest نسبتاً پر از اشکال است، بنابراین به vscode-jest-runner مهاجرت کردم. با این افزونه، شما تست را از منوی زمینهای کلیک راست شروع میکنید. این کار همان نتیجه را دارد و تجربه دیباگ کردن کد TypeScript شما را بسیار دلپذیرتر میکند.