I was looking for something similar, and found this: https://github.com/usrz/javascript-karma-verbose-reporter. Generates this kind of output:
$ karma start --reporters=verbose
Suites and tests results:
- the app.router.config module :
* contains a router property : ok
* configures the router title : ok
* should have a login route : ok
- the organization module :
* contains a state property : ok
* should have a streams route after configuration : ok
* when activated, should set state based on organization in route : ok
- the streams module :
* points to state : ok
* loads organization streams upon activation : ok
* loads organization streams via API : ok
Browser results:
- PhantomJS 1.9.8 (Mac OS X 0.0.0): 9 tests
- 9 ok
To make this a default option, you can add this to your karma config, e.g.:
reporters: ['verbose', 'junit']
I was looking for something similar, and found this: https://github.com/usrz/javascript-karma-verbose-reporter. Generates this kind of output:
$ karma start --reporters=verbose
Suites and tests results:
- the app.router.config module :
* contains a router property : ok
* configures the router title : ok
* should have a login route : ok
- the organization module :
* contains a state property : ok
* should have a streams route after configuration : ok
* when activated, should set state based on organization in route : ok
- the streams module :
* points to state : ok
* loads organization streams upon activation : ok
* loads organization streams via API : ok
Browser results:
- PhantomJS 1.9.8 (Mac OS X 0.0.0): 9 tests
- 9 ok
To make this a default option, you can add this to your karma config, e.g.:
reporters: ['verbose', 'junit']
Following from @Carles Barrobés's answer. The original question was talking about angular applications. So I thought I would list the steps to get this to work with ng test
Install verbose reporter:
npm install --save-dev karma-verbose-reporter
Update your karma.conf.js file to include the following:
module.exports = function (config) {
config.set({
plugins: [
require('karma-verbose-reporter')
],
reporters: ['verbose']
});
};
Note, I have only included settings relevant to reporting, of course, leave your other settings in the config file as is.
Now you can run ng test to get verbose output
Update for Angular version 9
The source files have been moved but you can still debug this way if you do the following steps
- In devtools, select the sources tab
- Press CTRL + P
- Type in the name of the file you want to debug
Valid for versions below 9
The other answers are completely valid answers but having been using Angular for around 18 months now I tend to do it in the browser - chrome tools!
Run ng test then f12 and find the spec file via the webpack context. Add a breakpoint(s) and refresh and it will hit said breakpoints. As per screenshot
This is what worked for me with:
- Angular 9.0.6 + Visual Studio Code 1.43.2
- Angular 8.2.13 + Visual Studio Code 1.39.2
- Angular 7, Angular CLI 1.0.* and Chrome on Windows 7.
Change configuration files
In your project root directory open karma.conf.js. Right after singleRun: false add , followed by this section:
customLaunchers: {
ChromeDebug: {
base: 'Chrome',
flags: [ '--remote-debugging-port=9333' ]
}
}
Add configuration to .vscode/launch.json.
For versions 8.* - 9.* (note
"pathMappingsection!):{ "type": "chrome", "request": "attach", "name": "Unit tests", "address": "localhost", "port": 9333, "sourceMaps": true, "webRoot": "${workspaceFolder}", "pathMapping": { "/_karma_webpack_": "${workspaceFolder}" } },For version 7.*:
{ "type": "chrome", "request": "attach", "name": "Unit tests", "address": "localhost", "port": 9333, "sourceMaps": true, "webRoot": "${workspaceFolder}" },
Start debugging
Run
ng test --browsers ChromeDebugWait for Chrome browser to start. You will see something like this in command line:
01 06 2017 16:07:29.276:INFO [launcher]: Launching browser ChromeDebug with unlimited concurrencySet the breakpoint in one of your
.spec.tsfiles.In Visual Studio Code choose
Unit testsdebug configuration and hit F5 ("Start Debugging" button).Press
Shift+Ctrl+F5or refresh the Chrome window to rerun the tests and hit the breakpoint.
For convenience
You can also modify your package.json and add a new script:
"test-debug": "ng test --browsers ChromeDebug",
Then next time you want to start ng test with debugging just run:
npm run test-debug
References:
- Debugging Jasmine Unit tests running with Karma runner in VS Code
- Debugging Karma tests with VSCode
- Angular CLI 8.1.3
Debug Unit Testsconfiguration - Unverified breakpoint - microsoft/vscode-recipes - Chrome Debugging with Angular CLI