Vitest 3.2 正式發(fā)布！宣布重大更新！
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識(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)樵跊](méi)有根配置的情況下，你不需要猜測(cè)如何添加 reporters）。
此外，我們還決定廢棄 workspace 名稱，因?yàn)樗c如 PNPM 等工具提供的通過(guò)此選項(xiàng)支持的單體倉(cāng)庫(kù)功能沖突。Vitest 并不會(huì)以獨(dú)立的 CWD 運(yùn)行這些項(xiàng)目，而是將它們視為子 Vitest。這也為我們提供了更多空間來(lái)為單體倉(cāng)庫(kù)提供更好的解決方案，而不破壞現(xiàn)有功能。
該選項(xiàng)將在未來(lái)的主要版本中完全移除，將由 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)告器中可見(jiàn)。如果測(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，所以你需要禁用隔離來(lái)充分利用這一特性。
自定義項(xiàng)目名稱顏色
你現(xiàn)在可以在使用項(xiàng)目時(shí)設(shè)置自定義顏色。
自定義瀏覽器定位器 API
內(nèi)置的定位器可能不足以滿足你應(yīng)用的需求。為了避免退回到 CSS 并失去 Vitest 通過(guò)其定位器 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 定位器字符串來(lái)構(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()該方法還可以訪問(wèn)當(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ì)象。你可以使用它來(lái)停止任何支持此 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 開(kāi)發(fā)），這將 V8 覆蓋報(bào)告與 Istanbul 對(duì)齊，但性能更優(yōu)！你可以通過(guò)設(shè)置 coverage.experimentalAstAwareRemapping 為 true 來(lái)啟用此特性。
我們計(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)入語(yǔ)句。如果你在讀取文件或啟動(dòng)一個(gè)獨(dú)立的進(jìn)程時(shí)，Vitest 將忽略與該文件相關(guān)的更改。
通過(guò) 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 匹配器具有類型安全，你可以編寫(xiě)如下內(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)容。
