モチベーション
- TypeScript & Jest & VSCode環境でDebuggerを動かしたい。
- ちゃんと設定ファイルを見れていなかったので、これを期に一通り確認したい
動作内容
test以外のコードでも、debuggerは効きます。
設定ファイル一覧
vscodeの設定
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Jest",
"preLaunchTask": "build",
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
"args": [
"${file}",
// 現在のプロセスで逐次テストを実行していく設定.
// この設定をしないと複数のchildプロセスでテストを実行するらしい
// cliのpackage の性質上、子プロセスがテスト画像を変更してしまうリスクがあるし、
// debuggingのために有用とのことだったので、この設定を有効にした
// https://facebook.github.io/jest/docs/en/cli.html#runinband
"--runInBand",
// debugの際はcacheを無効にした。
// cacheを無効にすると、2倍くらい遅くなるらしい。
"--no-cache"
],
"cwd": "${workspaceRoot}",
"console": "integratedTerminal"
}
]
}
tasks.json
https://vscode-doc-jp.github.io/docs/userguide/tasks.html
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "shell",
"command": "yarn build"
}
]
}
とりあえず、テスト前にbuildすれば良いだけの設定。 typeのところには、npm, shell, gulpが使えるようだ。下記資料参照。 https://github.com/Microsoft/vscode/blob/master/.vscode/tasks.json typeのところにyarnが無かったので、shellとおいて commandの部分に yarn buildと書いた。
jest.config.json
https://facebook.github.io/jest/docs/en/configuration.html
module.exports = {
rootDir: "./",
transform: {
"^.+\\.tsx?$": "ts-jest"
},
testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
modulePathIgnorePatterns: [
"<rootDir>/build/"
],
moduleFileExtensions: [
"ts",
"js",
"json"
]
}
transform はソースコードを変換する必要があるものを正規表現で記載するもの。 typescriptなど利用している場合は、ここに記載する必要がある。 typescriptを使う場合、jest本家は下記のようにコンパイルしている。 https://github.com/facebook/jest/blob/master/examples/typescript/package.json#L18
今回は ts-jestを利用しているため、ts-jestのドキュメントが指定する通りにした。 https://github.com/kulshekhar/ts-jest#usage
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"alwaysStrict": true,
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": false,
"noImplicitThis": true,
"noImplicitReturns": true,
"noUnusedParameters": false,
"noUnusedLocals": false,
"outDir": "../build/",
"removeComments": true,
"strictNullChecks": false,
"target": "es5",
"traceResolution": false
},
"include": [
"**/*.ts"
],
"exclude": [
"**/*.spec.ts"
]
}
debugのための設定としては、exclude の部分だけである。 testコードはcompileする必要がないので、excludeに含めた。
