Configure the Angular CLI to use the Karma Mocha test reporter

Instructor: [00:00] When we create a new project with the Angular CLI, it already configures a couple of things for us. One of those things is automated test running. As you can see here, we have a kernel configuration file, which is basically the driver which runs our tests.

[00:14] In the source folder, we have a couple of specs defined which follow the Jasmine approach of defining tests. In the package.json, we have already a test script in place. Therefore, if we open up our terminal, and we run npm test, it will execute our Karma tests.

[00:32] However, the output here is not as nice as it could be. The only thing we see, that there have been executed three tests, and three of three, basically, run successfully. The reason for that is because the default runner is basically the progress runner, which is configured with Karma.

[00:49] If we go into the Karma configuration down here in the reporter section, we see progress. Now, what we can do is to install the Mocha reporter, which is a much nicer way of visualizing the test result. Let's open up our console, and run npm install karma-mocha-reporter, and save it to the dev section.

[01:11] Next, we can go to the Karma config again. At the very top, where the plugin section is, we add our new Mocha reporter. We import it here. Finally, we need to go down here, and we can simply remove that one, and enter here Mocha as the reporter.

[01:27] We save, and we execute again, npm test. We now get a much better and nicer looking overview of which test seeds have been executed, as well as how many tests there are in there, which of them have passed, and which of them have failed.