1
私はAngular 4/Materialプロジェクトを持っており、Visual Studioコードを使用しています。プロジェクトはangle/cliを使用して設定されていますVisual Studioコードを使用してAngular 4ユニットテストをデバッグする方法
カルマとジャスミンを使って単体テストを書き始めました。設定はすべて角度/ cliで行います。
今、テストをデバッグしたいと思います。
"ng test"を実行すると、いくつかのエラーが発生します。コードにブレークポイントを設定してこれらのエラーをデバッグしようとすると、結果は得られません。
Googleを使用して、私はカルマとVSCを設定する方法をたくさん見つけましたが、それらのどれも私を助けませんでした。 これはバージョンに依存する問題だと思います。
私のセットアップに基づいて誰も助けてくれますか？私は私の設定ファイルを公開する場合
"dependencies": {
"@angular/animations": "^4.3.6",
"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "^4.3.6",
"@angular/compiler": "^4.3.6",
"@angular/core": "^4.3.6",
"@angular/flex-layout": "^2.0.0-rc.1",
"@angular/forms": "^4.3.6",
"@angular/http": "^4.3.6",
"@angular/material": "^2.0.0-beta.10",
"@angular/platform-browser": "^4.3.6",
"@angular/platform-browser-dynamic": "^4.3.6",
"@angular/router": "^4.3.6",
"core-js": "^2.5.1",
"npm": "^5.4.0",
"rxjs": "^5.4.3",
"uuid": "^3.1.0",
"zone.js": "^0.8.17"
},
"devDependencies": {
"@angular/cli": "1.2.1",
"@angular/compiler-cli": "^4.3.6",
"@angular/language-service": "^4.3.6",
"@types/jasmine": "2.5.53",
"@types/node": "^8.0.26",
"codelyzer": "~3.1.2",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.5.3",
"npm-check-updates": "^2.12.1",
"protractor": "~5.1.2",
"ts-mockito": "^2.1.1",
"ts-node": "~3.2.2",
"tslint": "~5.5.0",
"typescript": "~2.4.0"
}
EDIT
多分誰かがいくつかの問題を見ることができます。
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceRoot": "../src",
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2016",
"dom"
]
}
}tsconfig.spec.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es5",
"baseUrl": "",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}karma.config.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
browsers: ['ChromeDebugging'],
customLaunchers: {
ChromeDebugging: {
base: 'Chrome',
flags: [ '--remote-debugging-port=9333' ]
}
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
singleRun: false
});
};launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"address": "localhost",
"port": 9333,
"pathMapping": {
"/": "${workspaceRoot}",
"/base/": "${workspaceRoot}/"
}
},
{
"name": "Run jasmine",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"skipFiles": [
"node_modules/**/*"
],
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}/*"
}
},
{
"type": "chrome",
"request": "attach",
"name": "Attach Karma Chrome",
"address": "localhost",
"port": 9333,
"sourceMaps": true,
"trace": "verbose",
"pathMapping": {
"/": "${workspaceRoot}/",
"/base/": "${workspaceRoot}/"
}
}
]
}
はブラウザのコンソールが十分ではありませんか？私はあなたがVSCodeのデバッグヘルプを依頼したことを知っていますが、ブラウザコンソールでデバッグを試みたことがあるかどうかを知りたがっています。 – TypeScripter
私は試しましたが、ソースコードにブレークポイントを設定する方法は決して見つけられませんでした。 –
私はクロム、他のブラウザにも同様のデバッグ方法があることを教えてあげましょう。テストを実行すると、ブラウザウィンドウが開いていることがわかります（ヘッドレスではないと仮定して）。そのブラウザウィンドウには、デバッグボタンがあります。その後、デバッグウィンドウでf12を押し、次にソースタブで "Ctrl + o"でスペックファイル（ts）を開きます。ブレークポイントを入れてテストを再実行します（f5）。あなたはブレークポイントを打つことができるはずです – TypeScripter