Display karma test results in Jenkins

Introduction
In modern software development it is standard to write unit tests. With unit tests we are able to test our functions. In most professional environments we also use a CI infrastructure to continuously build our software. In our case we use Jenkins.
Jenkins runs our unit tests on each continuous build and all unit tests and integration tests on each nightly build. It is desirable to have a quick overview over our tests like shown below.

With the help of this overview we can easily detect which tests failed and which were successful. On the picture on top we can directly see that all test have successfully past. In this blogpost I describe how you to setup such an overview.
Configuration
First we need to install karma-junit-reporter with the command below:
npm install karma-junit-reporter --save-dev
After we have successfully installed the karma-junit-reporter we need to configure the junit-reporter inside our karma.conf.js.
The properties listed on top have the following meaning:
- outputDir: The directory where the report will be saved
- suite: The suite name
- outputFile: Filename. This is also the name that will be displayed in Jenkins
- useBrowserName: When set to true the browsername is added to the beginning of the filename. This makes sense if you run your tests against multiple browsers and you want to create a file for each browser. In our case we are only running against Chrome and therefore we do not need the browsername.
With this config a report file called unit-test.xml is created. This file has the following structure:
It is important to notice that the structure of this file contains only one level of nesting. Even if you have specs that contain multiple levels of nesting (multiple describes). The reason for this is how Jenkins interprets the generated report.
But to allow our tests to run on Jenkins there is still one more thing we need to do. Jenkins needs a pom.xml as entry point. We need to create a maven execution that then executes our gulp task. In this gulp task we run the unit-tests and build our application.
Even we run our unit-test on Jenkins and have created the correct report, Jenkins is still not able to find our report. We need to tell Jenkins where the report is. Therefore we need to create a configuration inside the properties tag:
It is important to notice that this property is composed by jenkins.executionKey.reportsDirectory.
Finally Jenkins now finds our report and displays the results correctly.
