TypeScript
jest
VisualStudioCode

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

More than 1 year has passed since last update.

この記事は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 compiletsc が走るようになってます
      .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
          }
        ]
      }
      

その他