CODEWITHSUNDEEP
vitevitest
medev21
medev21

Reputation: 3041

Can Vitest UI display coverage report directory?

I have a Vite project, and I would like to include Vitest UI. I have added the configuration, plus the coverage report configuration.

Here is the vite.config:

    test: {
        globals: true,
        environment: "jsdom",
        include: ["**/*.test.{ts,tsx}"],
        setupFiles: ["./src/test/setup.ts"],
        css: true,
        reporters: ['default', 'html'],
        coverage: {
            reportsDirectory: "html/ui",
            include: ["**/*.{ts,tsx}"],
            exclude: ["src/test/**/*.{ts,tsx}"],
            reporter: ['text', ['html', { subdir: 'coverage'}]],
            provider: "v8",
        }
    },

When I run

vitest --ui --coverage.enabled=true

the UI appears (http://localhost:51204/__vitest__/#/?file=) however I don't see the coverage report button:

current view in vitest ui

Expected:

expected view in vitest ui

However, when I run the following command:

npx vite preview --outDir ./html

I do see the coverage report button on the browser, http://localhost:4173/

vite preview image

Is there a way to add the coverage button when running vitest --ui or this is not possible? Is it only available on vite preview? I've read the docs, and it seems to imply you can have the reports button when running vitest --ui. Perhaps I'm missing a configuration somewhere or misunderstanding the docs.

UPDATE: This command seems to be working now "test:ui": "vitest --ui --coverage". There was a patch somewhere that got this fixed.

Upvotes: 4

Views: 5340

Answers (3)

Aabid-Faruk
Aabid-Faruk

Reputation: 11

A better way would be to configure it in the vite.config file

test: {
      globals: true,
      environment: 'jsdom',
      setupFiles: './tests/setup.ts',
      css: true,
      coverage: {
        enabled: true,
        reporter: ['html'],
      },
    },

Upvotes: 0

IT25
IT25

Reputation: 1

I added below line in my package.json and its working.

"test": "vitest --ui --coverage.enabled --coverage.all --coverage.src='./src --coverage.reporter='html'"

With above command ui will open at http://localhost:51204/vitest/#/ and will have a coverage button

Upvotes: 0

Abhimanyu
Abhimanyu

Reputation: 4917

just add

"test:ui": "vitest --ui --coverage",

Upvotes: 7

Related Questions