Merge branch 'main' into copilot/add-known-failing-tests-support

Author: sheremet-va

docs/.vitepress/components/ListItem.vue

@@ -19,10 +19,10 @@ function reset() {
 const color = computed(() => {
   return {
     '--vp-c-brand-1': state.value === 1
-      ? '#66ba1c'
+      ? 'var(--color-brand)'
       : state.value === 2
-        ? 'rgba(248, 113, 113)'
-        : 'rgba(250, 204, 21)',
+        ? 'var(--vp-c-red-1)'
+        : 'var(--vp-c-yellow-1)',
   } as any
 })
 
@@ -42,7 +42,9 @@ onMounted(async () => {
   <li :style="color">
     <div ref="el" class="icon-container">
       <div class="icon-wrapper" :class="state ? 'flip' : ''">
-        <Icon icon="carbon:circle-dash" class="icon-spinner" width="1.2em" height="1.2em" />
+        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 32 32" class="icon-spinner">
+          <circle cx="16" cy="16" r="13" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="8 4" />
+        </svg>
       </div>
       <div class="icon-wrapper" :class="state === 2 ? '' : 'flip'">
         <Icon icon="carbon:close-outline" class="icon-error" width="1.2em" height="1.2em" />
@@ -79,15 +81,15 @@ onMounted(async () => {
 
 .icon-spinner {
   animation: spin 1s linear infinite;
-  color: rgb(250, 204, 21);
+  color: var(--vp-c-yellow-1);
 }
 
 .icon-error {
-  color: rgb(248, 113, 113);
+  color: var(--vp-c-red-1);
 }
 
 .icon-success {
-  color: var(--vp-c-brand-1);
+  color: var(--color-brand);
 }
 
 @keyframes spin {

docs/.vitepress/config.ts

@@ -6,7 +6,6 @@ import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import {
   groupIconMdPlugin,
   groupIconVitePlugin,
-  localIconLoader,
 } from 'vitepress-plugin-group-icons'
 import llmstxt from 'vitepress-plugin-llms'
 import { version } from '../../package.json'
@@ -80,17 +79,11 @@ export default ({ mode }: { mode: string }) => {
         groupIconVitePlugin({
           customIcon: {
             'CLI': 'vscode-icons:file-type-shell',
-            'vitest.shims': localIconLoader(import.meta.url, '../public/logo-without-border.svg'),
-            'vitest.config': localIconLoader(import.meta.url, '../public/logo-without-border.svg'),
-            'vitest.workspace': localIconLoader(import.meta.url, '../public/logo-without-border.svg'),
             '.spec.ts': 'vscode-icons:file-type-testts',
             '.test.ts': 'vscode-icons:file-type-testts',
             '.spec.js': 'vscode-icons:file-type-testjs',
             '.test.js': 'vscode-icons:file-type-testjs',
-            'marko': 'vscode-icons:file-type-marko',
-            'qwik': 'logos:qwik-icon',
             'next': '',
-            'vite.config': localIconLoader(import.meta.url, '../public/logo-without-border-vite.svg'),
           },
         }),
         llmstxt(),

docs/.vitepress/theme/styles.css

@@ -5,15 +5,24 @@
 /* Vitest */
 :root[data-variant="vitest"] {
   --color-brand: #008039;
+  /* TODO: home page wcag-aa color contrast (remove this once fixed at void0 theme):
+   * - why vitest section and texts
+   * - vitest, resources, versions and social
+   * - footer
+   */
+  --color-grey: #867e8e;
 }
 
 :root.dark:not([data-theme])[data-variant="vitest"],
 :root[data-theme="dark"][data-variant="vitest"] {
   --color-brand: var(--color-zest);
 }
 
+:root[data-variant="vitest"]:not(.dark):not([data-theme="light"]),
 :root[data-theme="light"][data-variant="vitest"] {
   --color-brand: #008039;
+  /* TODO: code block (remove this once fixed at void0 theme) */
+  --vp-code-color: #007d38;
 }
 
 
@@ -48,4 +57,4 @@ html:not(.dark) .VPContent kbd {
   padding: 2px 5px;
   position: relative;
   top: -1px;
-}
+}

docs/api/browser/context.md

@@ -231,3 +231,71 @@ export const utils: {
   getElementError(selector: string, container?: Element): Error
 }
 ```
+
+### configurePrettyDOM <Version>4.0.0</Version> {#configureprettydom}
+
+The `configurePrettyDOM` function allows you to configure default options for the `prettyDOM` and `debug` functions. This is useful for customizing how HTML is formatted in test failure messages.
+
+```ts
+import { utils } from 'vitest/browser'
+
+utils.configurePrettyDOM({
+  maxDepth: 3,
+  filterNode: 'script, style, [data-test-hide]'
+})
+```
+
+#### Options
+
+- **`maxDepth`** - Maximum depth to print nested elements (default: `Infinity`)
+- **`maxLength`** - Maximum length of the output string (default: `7000`)
+- **`filterNode`** - A CSS selector string or function to filter out nodes from the output. When a string is provided, elements matching the selector will be excluded. When a function is provided, it should return `false` to exclude a node.
+- **`highlight`** - Enable syntax highlighting (default: `true`)
+- And other options from [`pretty-format`](https://www.npmjs.com/package/@vitest/pretty-format)
+
+#### Filtering with CSS Selectors <Version>4.1.0</Version> {#filtering-with-css-selectors}
+
+The `filterNode` option allows you to hide irrelevant markup (like scripts, styles, or hidden elements) from test failure messages, making it easier to identify the actual cause of failures.
+
+```ts
+import { utils } from 'vitest/browser'
+
+// Filter out common noise elements
+utils.configurePrettyDOM({
+  filterNode: 'script, style, [data-test-hide]'
+})
+
+// Or use directly with prettyDOM
+const html = utils.prettyDOM(element, undefined, {
+  filterNode: 'script, style'
+})
+```
+
+**Common Patterns:**
+
+Filter out scripts and styles:
+```ts
+utils.configurePrettyDOM({ filterNode: 'script, style' })
+```
+
+Hide specific elements with data attributes:
+```ts
+utils.configurePrettyDOM({ filterNode: '[data-test-hide]' })
+```
+
+Hide nested content within an element:
+```ts
+// Hides all children of elements with data-test-hide-content
+utils.configurePrettyDOM({ filterNode: '[data-test-hide-content] *' })
+```
+
+Combine multiple selectors:
+```ts
+utils.configurePrettyDOM({
+  filterNode: 'script, style, [data-test-hide], svg'
+})
+```
+
+::: tip
+This feature is inspired by Testing Library's [`defaultIgnore`](https://testing-library.com/docs/dom-testing-library/api-configuration/#defaultignore) configuration.
+:::

docs/api/vi.md

@@ -37,6 +37,8 @@ function mock<T>(
 
 Substitutes all imported modules from provided `path` with another module. You can use configured Vite aliases inside a path. The call to `vi.mock` is hoisted, so it doesn't matter where you call it. It will always be executed before all imports. If you need to reference some variables outside of its scope, you can define them inside [`vi.hoisted`](#vi-hoisted) and reference them inside `vi.mock`.
 
+It is recommended to use `vi.mock` or `vi.hoisted` only inside test files. If Vite's [module runner](/config/experimental#experimental-vitemodulerunner) is disabled, they will not be hoisted. This is a performance optimisation to avoid ready unnecessary files.
+
 ::: warning
 `vi.mock` works only for modules that were imported with the `import` keyword. It doesn't work with `require`.
 

docs/config/browser/playwright.md

@@ -104,3 +104,35 @@ await userEvent.click(page.getByRole('button'), {
   timeout: 1_000,
 })
 ```
+
+## `persistentContext` <Version>4.1.0</Version> {#persistentcontext}
+
+- **Type:** `boolean | string`
+- **Default:** `false`
+
+When enabled, Vitest uses Playwright's [persistent context](https://playwright.dev/docs/api/class-browsertype#browser-type-launch-persistent-context) instead of a regular browser context. This allows browser state (cookies, localStorage, DevTools settings, etc.) to persist between test runs.
+
+::: warning
+This option is ignored when running tests in parallel (e.g. when headless with [`fileParallelism`](/config/fileparallelism) enalbed) since persistent context cannot be shared across parallel sessions.
+:::
+
+- When set to `true`, the user data is stored in `./node_modules/.cache/vitest-playwright-user-data`
+- When set to a string, the value is used as the path to the user data directory
+
+```ts [vitest.config.js]
+import { playwright } from '@vitest/browser-playwright'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    browser: {
+      provider: playwright({
+        persistentContext: true,
+        // or specify a custom directory:
+        // persistentContext: './my-browser-data',
+      }),
+      instances: [{ browser: 'chromium' }],
+    },
+  },
+})
+```