Show Vitest coverage on Azure DevOps UI
Asked Answered
C

0

2

I would render my vitest coverage in Azure DevOps UI, I've tried to follow tutorials but it doesn't work:

enter image description here

I tried to setup PublishCodeCoverageResults to publish the cobertura xml file as in below:

      - task: PublishCodeCoverageResults@1
        displayName: 'Publish code coverage results'
        inputs:
          codeCoverageTool: Cobertura
          summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
          reportDirectory: '$(System.DefaultWorkingDirectory)/**/coverage'

I run Vitest with this command vitest --coverage --no-threads and this is my vite.config.ts

import { defineConfig } from 'vitest/config';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [tsconfigPaths()],
  test: {
    coverage: {
      reporter: ['cobertura', 'text'],
    },
    include: ['packages/core/test/*'],
  },
});

This is the output of PublishCodeCoverageResults enter image description here

If I run cat $(System.DefaultWorkingDirectory)/coverage/cobertura-coverage.xml

It show me the cobertura file (this is a part of the entire file):

<?xml version="1.0" ?>
<!DOCTYPE coverage SYSTEM "http://cobertura.sourceforge.net/xml/coverage-04.dtd">
<coverage lines-valid="1502" lines-covered="1240" line-rate="0.8255" branches-valid="29" branches-covered="26" branch-rate="0.8965000000000001" timestamp="1689237532968" complexity="0" version="0.1">
  <sources>
    <source>/home/vsts/work/1/s</source>
  </sources>
  <packages>
    <package name="core.src" line-rate="0.8223999999999999" branch-rate="0.8928">
      <classes>
        <class name="dynamo.ts" filename="packages/core/src/dynamo.ts" line-rate="1" branch-rate="1">
          <methods>
          </methods>
          <lines>
            <line number="1" hits="1" branch="false"/>
            <line number="2" hits="1" branch="false"/>
            <line number="3" hits="1" branch="false"/>
            <line number="4" hits="1" branch="false"/>
            <line number="5" hits="1" branch="false"/>
            <line number="6" hits="1" branch="false"/>
            <line number="7" hits="1" branch="false"/>
            <line number="8" hits="1" branch="false"/>
            <line number="9" hits="1" branch="false"/>
            <line number="10" hits="1" branch="false"/>
          </lines>
        </class>
        <class name="order.ts" filename="packages/core/src/order.ts" line-rate="0.8349" branch-rate="0.8887999999999999">
          <methods>
            <method name="defau

In the artifacts of pipeline I can see this new folder: enter image description here

Cowshed answered 13/7, 2023 at 9:0 Comment(3)
The code coverage tab doesn't show until the pipeline is complete. If you cancel or finish that dev step does it show up? See this Azure DevOps issue.Mozambique
Thank you Steven! Yes I confirm, now I can see Coverage tab when pipeline is complete but I still don't see any information on main tab (the first screenshot on my topic).Cowshed
what rules should I enable in BuildCheckQuality task to show coverage on single stage?Cowshed

© 2022 - 2024 — McMap. All rights reserved.