From 77d75fd344b6105b9965f068bb39ee307591bad5 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 22 Jan 2026 10:56:03 +0100
Subject: [PATCH] feat: track and display expectedly failed tests (.fails) in
 UI and CLI (#9476)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sheremet-va <16173870+sheremet-va@users.noreply.github.com>
Co-authored-by: Vladimir <sleuths.slews0s@icloud.com>
---
 .../client/components/dashboard/TestsEntry.vue  | 12 ++++++++++++
 .../ui/client/composables/explorer/collector.ts | 17 ++++++++++++++---
 packages/ui/client/composables/explorer/tree.ts |  1 +
 .../ui/client/composables/explorer/types.ts     |  2 ++
 .../src/node/reporters/renderers/utils.ts       | 16 +++++++++++++++-
 packages/vitest/src/node/reporters/summary.ts   | 12 ++++++++++--
 6 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/packages/ui/client/components/dashboard/TestsEntry.vue b/packages/ui/client/components/dashboard/TestsEntry.vue
index 76825c216..7be0fe7bc 100644
--- a/packages/ui/client/components/dashboard/TestsEntry.vue
+++ b/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
diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
index 086f9ec32..81b7f0fce 100644
--- a/packages/ui/client/composables/explorer/collector.ts
+++ b/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,6 +355,7 @@ function collectData(
       total,
       ignored,
       todo,
+      expectedFail,
     } = collectTests(f)
 
     data.totalTests += total
@@ -360,6 +363,7 @@ function collectData(
     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
 }
diff --git a/packages/ui/client/composables/explorer/tree.ts b/packages/ui/client/composables/explorer/tree.ts
index faa1d698c..30df28b7c 100644
--- a/packages/ui/client/composables/explorer/tree.ts
+++ b/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,
diff --git a/packages/ui/client/composables/explorer/types.ts b/packages/ui/client/composables/explorer/types.ts
index f35a1acde..8b4465bfb 100644
--- a/packages/ui/client/composables/explorer/types.ts
+++ b/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
diff --git a/packages/vitest/src/node/reporters/renderers/utils.ts b/packages/vitest/src/node/reporters/renderers/utils.ts
index ce97d6ff5..fdf7d7c76 100644
--- a/packages/vitest/src/node/reporters/renderers/utils.ts
+++ b/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,
     ]
diff --git a/packages/vitest/src/node/reporters/summary.ts b/packages/vitest/src/node/reporters/summary.ts
index bbbf7860e..736d7812e 100644
--- a/packages/vitest/src/node/reporters/summary.ts
+++ b/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,7 +356,7 @@ 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) {
@@ -357,6 +364,7 @@ function getStateString(entry: Counter) {
     [
       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,
     ]
-- 
2.54.0