TypeScript＆jestの構成でVSCodeのデバッガを使う

この記事は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