We have a project set up that includes vuejs, typescript, and jest 24.9 to produce an lcov.info which is then passed to sonar with a sonar-project.properties file like…
sonar.sources=src
sonar.exclusions=public/**
sonar.javascript.lcov.reportPaths=coverage/lcov.info
The vuejs components are like…
<template src="./html.html"></template>
<script src="./typescript.ts" lang="ts"></script>
<style></style>
that is to say they use a src attribute to include the script.
Components like this display 0 coverage in sonar… however, if the component is written like…
<template>
<div>
<div>{{ a }}</div>
<button @click="plus()">add 1</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
a: 1,
};
},
methods: {
plus() {
this.a++;
},
},
});
</script>
<style scoped></style>
then coverage seems to display correctly in sonar.
The coverage html report that jest creates is correct for both cases.
I thought that perhaps the problem might be that the lcov.info generated by jest had absolute paths to source files in it, so I converted these to relative paths and I could have sworn this fixed it in sonar and I started to see coverage properly. However, then it seemed to stop working to maybe I was just mistaken.
jest config is…
{
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
coverageDirectory: 'coverage',
collectCoverage: true,
collectCoverageFrom: [
'src/**/**/*.vue',
'!src/**/**/*.ts',
'!src/**/main.js',
'!src/**/featureFlagger.ts',
'!src/**/registerServiceWorker.ts',
'!src/**/interfaces/*',
],
coverageReporters: ['lcov'],
globalSetup: './globalSetup.js',
testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
}
Can anyone offer any guidance?
Thanks in advance.