Track and display expectedly failed tests (.fails) in UI and CLI

packages/ui/client/components/dashboard/TestsEntry.vue

@@ -47,6 +47,18 @@ function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
         {{ explorerTree.summary.testsFailed }}
       </template>
     </DashboardEntry>
+    <DashboardEntry
+      v-if="explorerTree.summary.testsExpectedFail"
+      text-cyan5
+      data-testid="expected-fail-entry"
+    >
+      <template #header>
+        Expected Fail
+      </template>
+      <template #body>
+        {{ explorerTree.summary.testsExpectedFail }}
+      </template>
+    </DashboardEntry>
     <DashboardEntry
       v-if="explorerTree.summary.testsSkipped"
       op50

packages/ui/client/composables/explorer/collector.ts

@@ -293,6 +293,7 @@ export function resetCollectorInfo(summary: CollectorInfo) {
   summary.testsIgnore = 0
   summary.testsSkipped = 0
   summary.testsTodo = 0
+  summary.testsExpectedFail = 0
   summary.totalTests = 0
   summary.failedSnapshotEnabled = false
 }
@@ -319,6 +320,7 @@ function collectData(
     testsIgnore: 0,
     testsSkipped: 0,
     testsTodo: 0,
+    testsExpectedFail: 0,
     totalTests: 0,
     failedSnapshot: false,
     failedSnapshotEnabled: false,
@@ -353,13 +355,15 @@ function collectData(
       total,
       ignored,
       todo,
+      expectedFail,
     } = collectTests(f)
 
     data.totalTests += total
     data.testsFailed += failed
     data.testsSuccess += success
     data.testsSkipped += skipped
     data.testsTodo += todo
+    data.testsExpectedFail += expectedFail
     data.testsIgnore += ignored
   }
 
@@ -373,8 +377,8 @@ function collectData(
   summary.filesTodo = data.filesTodo
   summary.testsFailed = data.testsFailed
   summary.testsSuccess = data.testsSuccess
-  summary.testsFailed = data.testsFailed
   summary.testsTodo = data.testsTodo
+  summary.testsExpectedFail = data.testsExpectedFail
   summary.testsIgnore = data.testsIgnore
   summary.testsSkipped = data.testsSkipped
   summary.totalTests = data.totalTests
@@ -389,6 +393,7 @@ function collectTests(file: File, search = '', filter?: Filter) {
     total: 0,
     ignored: 0,
     todo: 0,
+    expectedFail: 0,
   } satisfies CollectFilteredTests
 
   for (const t of testsCollector(file)) {
@@ -398,7 +403,13 @@ function collectTests(file: File, search = '', filter?: Filter) {
         data.failed++
       }
       else if (t.result?.state === 'pass') {
-        data.success++
+        // Check if this is an expected failure
+        if (t.fails) {
+          data.expectedFail++
+        }
+        else {
+          data.success++
+        }
       }
       else if (t.mode === 'skip') {
         data.ignored++
@@ -411,7 +422,7 @@ function collectTests(file: File, search = '', filter?: Filter) {
     }
   }
 
-  data.running = data.total - data.failed - data.success - data.ignored
+  data.running = data.total - data.failed - data.success - data.ignored - data.expectedFail
 
   return data
 }

packages/ui/client/composables/explorer/tree.ts

@@ -50,6 +50,7 @@ export class ExplorerTree {
       testsIgnore: 0,
       testsSkipped: 0,
       testsTodo: 0,
+      testsExpectedFail: 0,
       totalTests: 0,
       failedSnapshot: false,
       failedSnapshotEnabled: false,

packages/ui/client/composables/explorer/types.ts

@@ -13,6 +13,7 @@ export interface CollectFilteredTests extends FilteredTests {
   total: number
   ignored: number
   todo: number
+  expectedFail: number
 }
 
 export interface TaskTreeNode {
@@ -96,6 +97,7 @@ export interface CollectorInfo {
   testsIgnore: number
   testsSkipped: number
   testsTodo: number
+  testsExpectedFail: number
   totalTests: number
   failedSnapshot: boolean
   failedSnapshotEnabled: boolean

packages/vitest/src/node/reporters/renderers/utils.ts

@@ -149,15 +149,29 @@ export function getStateString(
     return c.dim(`no ${name}`)
   }
 
-  const passed = tasks.reduce((acc, i) => i.result?.state === 'pass' ? acc + 1 : acc, 0)
+  const passed = tasks.reduce((acc, i) => {
+    // Exclude expected failures from passed count
+    if (i.result?.state === 'pass' && i.type === 'test' && i.fails) {
+      return acc
+    }
+    return i.result?.state === 'pass' ? acc + 1 : acc
+  }, 0)
   const failed = tasks.reduce((acc, i) => i.result?.state === 'fail' ? acc + 1 : acc, 0)
   const skipped = tasks.reduce((acc, i) => i.mode === 'skip' ? acc + 1 : acc, 0)
   const todo = tasks.reduce((acc, i) => i.mode === 'todo' ? acc + 1 : acc, 0)
+  const expectedFail = tasks.reduce((acc, i) => {
+    // Count tests that are marked as .fails and passed (which means they failed as expected)
+    if (i.result?.state === 'pass' && i.type === 'test' && i.fails) {
+      return acc + 1
+    }
+    return acc
+  }, 0)
 
   return (
     [
       failed ? c.bold(c.red(`${failed} failed`)) : null,
       passed ? c.bold(c.green(`${passed} passed`)) : null,
+      expectedFail ? c.cyan(`${expectedFail} expected fail`) : null,
       skipped ? c.yellow(`${skipped} skipped`) : null,
       todo ? c.gray(`${todo} todo`) : null,
     ]

packages/vitest/src/node/reporters/summary.ts

@@ -21,6 +21,7 @@ interface Counter {
   failed: number
   skipped: number
   todo: number
+  expectedFail: number
 }
 
 interface SlowTask {
@@ -208,7 +209,13 @@ export class SummaryReporter implements Reporter {
     const result = test.result()
 
     if (result?.state === 'passed') {
-      this.tests.passed++
+      // Check if this is an expected failure (test.fails && passed)
+      if (test.options.fails) {
+        this.tests.expectedFail++
+      }
+      else {
+        this.tests.passed++
+      }
     }
     else if (result?.state === 'failed') {
       this.tests.failed++
@@ -349,14 +356,15 @@ export class SummaryReporter implements Reporter {
 }
 
 function emptyCounters(): Counter {
-  return { completed: 0, passed: 0, failed: 0, skipped: 0, todo: 0, total: 0 }
+  return { completed: 0, passed: 0, failed: 0, skipped: 0, todo: 0, expectedFail: 0, total: 0 }
 }
 
 function getStateString(entry: Counter) {
   return (
     [
       entry.failed ? c.bold(c.red(`${entry.failed} failed`)) : null,
       c.bold(c.green(`${entry.passed} passed`)),
+      entry.expectedFail ? c.cyan(`${entry.expectedFail} expected fail`) : null,
       entry.skipped ? c.yellow(`${entry.skipped} skipped`) : null,
       entry.todo ? c.gray(`${entry.todo} todo`) : null,
     ]