i want my test coverage to fail if the thresholds are not met

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "happy-dom",
    exclude: [...configDefaults.exclude, "**/tests/e2e/*"],
    coverage: {
      reporter: ['text', 'json', 'html'],
      lines: 80,
      functions: 80,
      branches: 80,
      statements: 80,
    }
  },

even though i get the error message, it still shows pass

File                    | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------------|---------|----------|---------|---------|-------------------
All files               |     100 |    33.33 |     100 |     100 |                   
 components/base/button |     100 |    33.33 |     100 |     100 |                   
  Button.vue            |     100 |    33.33 |     100 |     100 | 36-53             
 config                 |     100 |      100 |     100 |     100 |                   
  index.ts              |     100 |      100 |     100 |     100 |                   
------------------------|---------|----------|---------|---------|-------------------
ERROR: Coverage for branches (33.33%) does not meet global threshold (80%)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

any help?

i want my test coverage to fail if the thresholds are not met

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "happy-dom",
    exclude: [...configDefaults.exclude, "**/tests/e2e/*"],
    coverage: {
      reporter: ['text', 'json', 'html'],
      lines: 80,
      functions: 80,
      branches: 80,
      statements: 80,
    }
  },

even though i get the error message, it still shows pass

File                    | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------------------|---------|----------|---------|---------|-------------------
All files               |     100 |    33.33 |     100 |     100 |                   
 components/base/button |     100 |    33.33 |     100 |     100 |                   
  Button.vue            |     100 |    33.33 |     100 |     100 | 36-53             
 config                 |     100 |      100 |     100 |     100 |                   
  index.ts              |     100 |      100 |     100 |     100 |                   
------------------------|---------|----------|---------|---------|-------------------
ERROR: Coverage for branches (33.33%) does not meet global threshold (80%)

 PASS  Waiting for file changes...
       press h to show help, press q to quit

any help?

• javascript
• typescript
• vuejs3
• vite
• vitest

3 Answers 3

If you are seeing this in 2024 and using [email protected] the previous solution won't work for you.thresholds should be an object instead.
See code below:

{
  test: {
    ...your other configurations
    coverage: {
      ...your other configurations
      thresholds: {
        lines: 80,
        functions: 80,
        branches: 80,
        statements: 80
      }
    }
  }
}

See documentation here: coverage.thresholds[glob-pattern]

I think mine works, I'm sharing my vite config file, hope it helps you:

/// <reference types="vitest" />
import { fileURLToPath, URL } from 'url';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import type { UserConfig as VitestUserConfigInterface } from 'vitest/config';

const vitestConfig: VitestUserConfigInterface = {
  test: {
    watch: false,
    include: ['**/tests/unit/**/*.spec.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    globals: true,
    environment: 'jsdom',
    reporters: ['verbose'],
    coverage: {
      include: ['src/**/*'],
      exclude: [
        'src/main.ts',
        'src/plugins/',
        'src/App.vue',
        'src/shims-vue.d.ts',
        'src/router/*',
        'src/stores/*',
        'src/types/*',
        'src/components/icons/*'
      ],
      reporter: ['text', 'json', 'html'],
      all: true,
      lines: 80,
      functions: 80,
      branches: 80,
      statements: 80
    }
  }
};

export default defineConfig(({ mode }) => {
  // https://github.com/vitejs/vite/issues/1149#issuecomment-857686209
  const env = loadEnv(mode, process.cwd());
  const envWithProcessPrefix = Object.entries(env).reduce(
    (prev, [key, val]) => {
      const [, keyNoVite] = key.split('VITE_');
      return {
        ...prev,
        ['process.env.' + key]: `"${val}"`,
        ['process.env.' + keyNoVite]: `"${val}"`
      };
    },
    {}
  );

  return {
    define: envWithProcessPrefix,
    test: vitestConfig.test,
    resolve: {
      alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }
    },
    plugins: [vue()]
  };
});

You are running tests in watch mode (Waiting for file changes...)

Use this command to run without watch mode: vitest run

Or if you want to run with watch mode ON use: vitest watch