No coverage for vue.js single file components written in typescript

We have a project set up that includes vuejs, typescript, and jest 24.9 to produce an which is then passed to sonar with a file like…


The vuejs components are like…

<template src="./html.html"></template>
<script src="./typescript.ts" lang="ts"></script>

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…

    <div>{{ a }}</div>
    <button @click="plus()">add 1</button>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      a: 1,

  methods: {
    plus() {

<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 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: [
  coverageReporters: ['lcov'],
  globalSetup: './globalSetup.js',
  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],

Can anyone offer any guidance?

Thanks in advance.

I’m having the same exact problem, however not with typescript, just a plain javascript file referenced in the vue component.

not showing any coverage for the javascript.js file…but tests are passing, coverage file seems correct…