この記事はTypeScript Advent Calendar 2017の22日目の記事です。
空いていたので小ネタを。

やりたかったこと

TypeScript と Jest 使う
Jest でカバレッジ出す
VSCode のデバッガをストレスなく使う
- 特にブレークポイントとか

問題

カバレッジ出そうとしたらブレークポイント止まらない
ts-jest 使うとブレークポイント止まらない

解決策

Jest の設定を2つ用意

package.json 内にデフォルト設定

カバレッジ出す
ts-jest 使う

package.json

{
  "scripts": {
    "test": "jest --coverage"
  },
  ...
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(\\.|/)(test|spec)\\.tsx?$",
    "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
    "coverageDirectory": "coverage",
    "collectCoverageFrom": ["src/**/*.ts", "!src/**/*.spec.ts", "!src/**/*.d.ts"],
    "mapCoverage": true
  }
}

デバッガ起動時の設定

カバレッジ出さない
ts-jest 使わず preLaunchTask で事前にコンパイル
- 設定自体は残さないと、なぜかブレークポイントで止めた際にコンパイル後のJSコード側に飛ぶ。。
- npm run compile で tsc が走るようになってます

.vscode/jest.json

{
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(\\.|/)(test|spec)\\.jsx?$",
  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
  "rootDir": "../"
}

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "test",
      "type": "node",
      "request": "launch",
      "preLaunchTask": "compile",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest",
      "args": ["--config", "${workspaceRoot}/.vscode/jest.json", "--runInBand", "--no-cache"],
      "sourceMaps": true,
      "outFiles": ["${workspaceRoot}/out/**/*"]
    }
  ]
}

.vscode/tasks.json

{
  "version": "0.1.0",
  "command": "npm",
  "isShellCommand": true,
  "showOutput": "always",
  "suppressTaskName": true,
  "tasks": [
    {
      "taskName": "compile",
      "args": ["run", "compile"],
      "isBuildCommand": true
    }
  ]
}

その他

SourceMap 吐いてないと正しい位置で止まらないとかあった
上記構成を以下のリポジトリでお試しできます。ぜひぜひ。

https://github.com/benishouga/typescript-basic