The level of logging by karma can be changed in the karma.conf.js file.
Go to karma.conf.js and add/change the property logLevel to config.LOG_DISABLE if you don't want to see any logs or config.LOG_ERROR if you want to only see the errors. Like this:
module.exports = function (config) {
config.set({
...,
logLevel: config.LOG_ERROR,
...,
})
}
If you are running karma from the command line you can append --log-level debug to the command for the same effect.
[Documentation Request] ng test --log-level options
angular - Debug Tests in NG Test - Stack Overflow
angular - NG Test show names in console - Stack Overflow
Generate Unit test reports for an Angular Project
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
You need to use Karma Spec Reporter.
Usage:
- To use in your own Node.js project, just execute
npm install karma-spec-reporter --save-dev
- Then add 'spec' to reporters in
karma.conf.js
// karma.conf.js
... config.set({ ... reporters: ["spec"], specReporter: { maxLogLines: 5, // limit number of lines logged per test suppressErrorSummary: true, // do not print error summary suppressFailed: false, // do not print information about failed tests suppressPassed: false, // do not print information about passed tests suppressSkipped: true, // do not print information about skipped tests showSpecTiming: false // print the time elapsed for each spec }, plugins: ["karma-spec-reporter"], ...
When some unit test fails, it shows describe and it message as test case name.
For example:
describe('TestComponent', () => {
it('should pass test', () => {
expect(false).toBeTruthy();
});
});
Then, the above failed unit test will be shown as TestComponent should pass test FAILED
Expected false to be truthy
in the console.
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