前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心！

Vitest 3.2 更新日志

Vitest 3.2 版本著重改進(jìn)了瀏覽器模式和 TypeScript 支持。該版本還引入了一些有用的新方法、配置選項(xiàng)，并廢棄了工作區(qū)配置，改為使用項(xiàng)目配置。

工作區(qū)配置已廢棄

為了簡(jiǎn)化配置，團(tuán)隊(duì)決定廢棄單獨(dú)的 vitest.workspace 文件，推薦只在根配置中使用 projects 選項(xiàng)。這樣也簡(jiǎn)化了全局選項(xiàng)的配置（因?yàn)樵跊]有根配置的情況下，你不需要猜測(cè)如何添加 reporters）。

此外，我們還決定廢棄 workspace 名稱，因?yàn)樗c如 PNPM 等工具提供的通過此選項(xiàng)支持的單體倉庫功能沖突。Vitest 并不會(huì)以獨(dú)立的 CWD 運(yùn)行這些項(xiàng)目，而是將它們視為子 Vitest。這也為我們提供了更多空間來為單體倉庫提供更好的解決方案，而不破壞現(xiàn)有功能。

該選項(xiàng)將在未來的主要版本中完全移除，將由 projects 取代。在此之前，若仍使用工作區(qū)功能，Vitest 會(huì)打印警告。

import { defineConfig } from "vitest/config";
export default defineConfig({
  test: {
    // "test.workspace" 已更名為 "test.projects"
    workspace: [ 
      projects: [ 
        { test: { name: "Unit" } },
        { test: { name: "Integration" } },
      ],
  },
});

注解 API

新的注解 API 允許你為任何測(cè)試添加自定義消息和附件。這些注解在 UI、HTML、Junit、Tap 和 GitHub Actions 報(bào)告器中可見。如果測(cè)試失敗，Vitest 還會(huì)在 CLI 中打印相關(guān)注解。

范圍化 Fixtures

test.extend 中的 fixtures 現(xiàn)在可以指定 scope 選項(xiàng)：file 或 worker。

const test = baseTest.extend({
  db: [
    async ({}, use) => {
      // ...設(shè)置
      await use(db)
      await db.close()
    },
    { scope: 'worker' },
  ],
})

file 級(jí)別的 fixture 類似于在文件頂部使用 beforeAll 和 afterAll，但如果該 fixture 在任何測(cè)試中未被使用，則不會(huì)被調(diào)用。

worker 級(jí)別的 fixture 每個(gè) worker 只會(huì)初始化一次，但需要注意，默認(rèn)情況下，Vitest 會(huì)為每個(gè)測(cè)試創(chuàng)建一個(gè) worker，所以你需要禁用隔離來充分利用這一特性。

自定義項(xiàng)目名稱顏色

你現(xiàn)在可以在使用項(xiàng)目時(shí)設(shè)置自定義顏色。

自定義瀏覽器定位器 API

內(nèi)置的定位器可能不足以滿足你應(yīng)用的需求。為了避免退回到 CSS 并失去 Vitest 通過其定位器 API 提供的重試保護(hù)，我們現(xiàn)在建議使用新的 locators.extend API 擴(kuò)展定位器。

import { locators } from '@vitest/browser/context'

locators.extend({
  getByCommentsCount(count: number) {
    return `.comments :text("${count} comments")`
  },
})

這將返回一個(gè) Playwright 定位器字符串來構(gòu)建新的定位器。如果該方法返回字符串，則返回值將被轉(zhuǎn)換為定位器，因此你可以繼續(xù)鏈?zhǔn)秸{(diào)用：

await expect.element(page.getByCommentsCount(1)).toBeVisible()
await expect.element(
  page.getByRole('article', { name: 'Hello World' })
    .getByCommentsCount(1)
).toBeVisible()

該方法還可以訪問當(dāng)前的定位器上下文，因此你可以在其中鏈?zhǔn)秸{(diào)用所有定位器方法：

import { locators } from '@vitest/browser/context'
import type { Locator } from '@vitest/browser/context'

locators.extend({
  getByCommentsCount(this: Locator, count: number) {
    return this.getByRole('comment')
      .and(this.getByText(`${count} comments`))
  },
})

顯式資源管理在vi.spyOn和vi.fn中的應(yīng)用

在支持顯式資源管理的環(huán)境中，你可以使用 using 代替 const，在包含的代碼塊退出時(shí)自動(dòng)調(diào)用 mockRestore 恢復(fù)任何被模擬的函數(shù)。這對(duì)于被監(jiān)視的方法尤其有用：

it('calls console.log', () => {
  using spy = vi.spyOn(console, 'log').mockImplementation(() => {})
  debug('message')
  expect(spy).toHaveBeenCalled()
})

// console.log 在這里恢復(fù)

測(cè)試信號(hào) API

Vitest 現(xiàn)在向測(cè)試體提供了一個(gè) AbortSignal 對(duì)象。你可以使用它來停止任何支持此 Web API 的資源。

當(dāng)測(cè)試超時(shí)、另一個(gè)測(cè)試失敗并且 --bail 標(biāo)志設(shè)置為非零值，或者用戶在終端按下 Ctrl+C 時(shí)，信號(hào)會(huì)被中止。

例如，您可以在測(cè)試中斷時(shí)停止 fetch 請(qǐng)求：

it('stop request when test times out', async ({ signal }) => {
  await fetch('/heavy-resource', { signal })
}, 2000)

覆蓋 V8 AST-aware remapping

Vitest 現(xiàn)在使用 ast-v8-to-istanbul 包（由 Vitest 的一位維護(hù)者 AriPerkkio 開發(fā)），這將 V8 覆蓋報(bào)告與 Istanbul 對(duì)齊，但性能更優(yōu)！你可以通過設(shè)置 coverage.experimentalAstAwareRemapping 為 true 來啟用此特性。

我們計(jì)劃在下一個(gè)主要版本中將其作為默認(rèn) remapping 模式，并完全移除舊的 v8-to-istanbul。

watchTriggerPatterns 選項(xiàng)

當(dāng)你編輯文件時(shí)，Vitest 會(huì)智能地僅重新運(yùn)行導(dǎo)入該文件的測(cè)試。然而，Vitest 的靜態(tài)分析僅尊重靜態(tài)和動(dòng)態(tài)的導(dǎo)入語句。如果你在讀取文件或啟動(dòng)一個(gè)獨(dú)立的進(jìn)程時(shí)，Vitest 將忽略與該文件相關(guān)的更改。

通過 watchTriggerPatterns 選項(xiàng)，你可以根據(jù)更改的文件配置哪些測(cè)試需要重新運(yùn)行。例如，當(dāng)模板更改時(shí)，始終重新運(yùn)行郵件測(cè)試，可以添加如下觸發(fā)模式：

export default defineConfig({
  test: {
    watchTriggerPatterns: [
      {
        pattern: /^src\/templates\/(.*)\.(ts|html|txt)$/,
        testsToRun: (file, match) => {
          return `api/tests/mailers/${match[2]}.test.ts`
        },
      },
    ],
  },
})

新的多功能匹配器類型

Vitest 現(xiàn)在有一個(gè) Matchers 類型，你可以擴(kuò)展它以在一個(gè)地方為所有自定義匹配器添加類型支持。該類型影響以下所有用法：

• expect().to*
• expect.to*
• expect.extend({ to* })

例如，為了使 toBeFoo 匹配器具有類型安全，你可以編寫如下內(nèi)容：

import { expect } from'vitest'

interface CustomMatchers<R = unknown> {
toBeFoo: (arg: string) => R
}

declare module'vitest' {
  interface Matchers<T = any> extends CustomMatchers<T> {}
}

expect.extend({
  toBeFoo(actual, arg) {
    // ... 實(shí)現(xiàn)
    return {
      pass: true,
      message: () =>'',
    }
  }
})

expect('foo').toBeFoo('foo')
expect.toBeFoo('foo')

sequence.groupOrder

新的 sequence.groupOrder 選項(xiàng)控制在使用多個(gè)項(xiàng)目時(shí)項(xiàng)目運(yùn)行的順序。

具有相同 groupOrder 數(shù)字的項(xiàng)目將一起運(yùn)行，組的順序從最小到最大。如果不設(shè)置此選項(xiàng)，所有項(xiàng)目將并行運(yùn)行。如果多個(gè)項(xiàng)目使用相同的組順序，它們將同時(shí)運(yùn)行。

考慮以下示例：

import { defineConfig } from'vitest/config'

exportdefault defineConfig({
test: {
    projects: [
      {
        test: {
          name: 'slow',
          sequence: {
            groupOrder: 0,
          },
        },
      },
      {
        test: {
          name: 'fast',
          sequence: {
            groupOrder: 0,
          },
        },
      },
      {
        test: {
          name: 'flaky',
          sequence: {
            groupOrder: 1,
          },
        },
      },
    ],
  },
})

這些項(xiàng)目中的測(cè)試將按以下順序運(yùn)行：

0. slow  |
          |> 一起運(yùn)行
 0. fast  |

 1. flaky |> 在 slow 和 fast 后單獨(dú)運(yùn)行

你可以復(fù)制這個(gè) Markdown 格式的內(nèi)容。