Allow export of UI including coverage

[jacando-timo-zimmermann]

Clear and concise description of the problem

Running vitest --ui --coverage on my machine correctly opens the Vitest UI including the visual coverage. Running vitest run --coverage runs the tests once and creates the directories /html and /coverage. I want to put the results on a web server that serves static files. I copied the content of the /html folder on the webserver and it works well. However, unlike locally, it does not show the coverage, which makes sense since I didn't do anything with the /coverage folder. Running Vitest UI in watch mode on the server is not possible.

Suggested solution

I would like to see an export function that creates static files of the Vitest UI including the coverage that I can serve with a simple web server.

Alternative

No response

Additional context

Config:

export default defineConfig({
    plugins: [tsconfigPaths(), swc.vite()],
    test: {
        globals: true,
        environment: 'node',
        coverage: {
            provider: 'v8',
            reporter: ['text', 'lcov', 'clover', 'html', 'json'],
            reportsDirectory: 'coverage',
            all: true
        },
        reporters: ['default', 'html']
    },
    resolve: {
        alias: {
            '@': 'src'
        }
    }
});

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[hi-ogawa]

I think this is a same issue as #4149.
I have a quick PR to support this just for a special case when coverage.reportsDirectory: 'html/coverage' #4717

[jacando-timo-zimmermann]

Thank you @hi-ogawa, that's exactly what we need. Do you have a feeling until when we can see it being released?

[jacando-timo-zimmermann]

@hi-ogawa @sheremet-va unfortunately, it still doesn't work with v1.1.0. This is my config:

// eslint-disable-next-line spaced-comment
/// <reference types="vitest" />

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

export default defineConfig({
    plugins: [tsconfigPaths(), swc.vite()],
    test: {
        globals: true,
        environment: 'node',
        coverage: {
            enabled: true,
            provider: 'v8',
            reporter: ['text', 'lcov', 'clover', 'html', 'json'],
            reportsDirectory: 'html/coverage',
            all: true
        },
        reporters: ['default', 'html']
    },
    resolve: {
        alias: {
            '@': 'src'
        }
    }
});

This is the command I run:

"test:cov": "vitest run --coverage"

This correctly creates an html and coverage folder. I then do:

$ cd html
$ npx http-server -g

I was expecting to see the coverage button in the menu in the top left, but it doesn't appear.

[hi-ogawa]

Hmm... not sure what went wrong. I just tested quickly on stackblitz and it seems working fine (except stackblitz initially opens __vitest__ which is 404):

https://stackblitz.com/edit/vitest-dev-vitest-g8ia47?file=vite.config.ts

screenshot

Just in case, could you check @vitest/ui is also upgraded to v1.1.0?

Also asset hash in html/assets should be exactly like this:

$ ls -lh html/assets
total 590.0K
-rw-r--r--  1  staff  staff  534.3K    12    20  07:55  index-O8DR2YZv.js    
-rw-r--r--  1  staff  staff   54.7K    12    20  07:55  index-z19Uws5U.css   

[jacando-timo-zimmermann]

Updating @vitest/ui solved it. Thanks a lot! @hi-ogawa