Edited at

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






その他