Vitest 3.2 正式發布!宣布重大更新!
前言
大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心!
Vitest 3.2 更新日志
Vitest 3.2 版本著重改進了瀏覽器模式和 TypeScript 支持。該版本還引入了一些有用的新方法、配置選項,并廢棄了工作區配置,改為使用項目配置。
工作區配置已廢棄
為了簡化配置,團隊決定廢棄單獨的 vitest.workspace
文件,推薦只在根配置中使用 projects
選項。這樣也簡化了全局選項的配置(因為在沒有根配置的情況下,你不需要猜測如何添加 reporters)。
此外,我們還決定廢棄 workspace
名稱,因為它與如 PNPM 等工具提供的通過此選項支持的單體倉庫功能沖突。Vitest 并不會以獨立的 CWD 運行這些項目,而是將它們視為子 Vitest。這也為我們提供了更多空間來為單體倉庫提供更好的解決方案,而不破壞現有功能。
該選項將在未來的主要版本中完全移除,將由 projects
取代。在此之前,若仍使用工作區功能,Vitest 會打印警告。
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
// "test.workspace" 已更名為 "test.projects"
workspace: [
projects: [
{ test: { name: "Unit" } },
{ test: { name: "Integration" } },
],
},
});
注解 API
新的注解 API 允許你為任何測試添加自定義消息和附件。這些注解在 UI、HTML、Junit、Tap 和 GitHub Actions 報告器中可見。如果測試失敗,Vitest 還會在 CLI 中打印相關注解。
范圍化 Fixtures
test.extend
中的 fixtures 現在可以指定 scope
選項:file
或 worker
。
const test = baseTest.extend({
db: [
async ({}, use) => {
// ...設置
await use(db)
await db.close()
},
{ scope: 'worker' },
],
})
file
級別的 fixture 類似于在文件頂部使用 beforeAll
和 afterAll
,但如果該 fixture 在任何測試中未被使用,則不會被調用。
worker
級別的 fixture 每個 worker 只會初始化一次,但需要注意,默認情況下,Vitest 會為每個測試創建一個 worker,所以你需要禁用隔離來充分利用這一特性。
自定義項目名稱顏色
你現在可以在使用項目時設置自定義顏色。
自定義瀏覽器定位器 API
內置的定位器可能不足以滿足你應用的需求。為了避免退回到 CSS 并失去 Vitest 通過其定位器 API 提供的重試保護,我們現在建議使用新的 locators.extend
API 擴展定位器。
import { locators } from '@vitest/browser/context'
locators.extend({
getByCommentsCount(count: number) {
return `.comments :text("${count} comments")`
},
})
這將返回一個 Playwright 定位器字符串來構建新的定位器。如果該方法返回字符串,則返回值將被轉換為定位器,因此你可以繼續鏈式調用:
await expect.element(page.getByCommentsCount(1)).toBeVisible()
await expect.element(
page.getByRole('article', { name: 'Hello World' })
.getByCommentsCount(1)
).toBeVisible()
該方法還可以訪問當前的定位器上下文,因此你可以在其中鏈式調用所有定位器方法:
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
中的應用
在支持顯式資源管理的環境中,你可以使用 using
代替 const
,在包含的代碼塊退出時自動調用 mockRestore
恢復任何被模擬的函數。這對于被監視的方法尤其有用:
it('calls console.log', () => {
using spy = vi.spyOn(console, 'log').mockImplementation(() => {})
debug('message')
expect(spy).toHaveBeenCalled()
})
// console.log 在這里恢復
測試信號 API
Vitest 現在向測試體提供了一個 AbortSignal
對象。你可以使用它來停止任何支持此 Web API 的資源。
當測試超時、另一個測試失敗并且 --bail
標志設置為非零值,或者用戶在終端按下 Ctrl+C 時,信號會被中止。
例如,您可以在測試中斷時停止 fetch
請求:
it('stop request when test times out', async ({ signal }) => {
await fetch('/heavy-resource', { signal })
}, 2000)
覆蓋 V8 AST-aware remapping
Vitest 現在使用 ast-v8-to-istanbul
包(由 Vitest 的一位維護者 AriPerkkio 開發),這將 V8 覆蓋報告與 Istanbul 對齊,但性能更優!你可以通過設置 coverage.experimentalAstAwareRemapping
為 true
來啟用此特性。
我們計劃在下一個主要版本中將其作為默認 remapping 模式,并完全移除舊的 v8-to-istanbul
。
watchTriggerPatterns 選項
當你編輯文件時,Vitest 會智能地僅重新運行導入該文件的測試。然而,Vitest 的靜態分析僅尊重靜態和動態的導入語句。如果你在讀取文件或啟動一個獨立的進程時,Vitest 將忽略與該文件相關的更改。
通過 watchTriggerPatterns
選項,你可以根據更改的文件配置哪些測試需要重新運行。例如,當模板更改時,始終重新運行郵件測試,可以添加如下觸發模式:
export default defineConfig({
test: {
watchTriggerPatterns: [
{
pattern: /^src\/templates\/(.*)\.(ts|html|txt)$/,
testsToRun: (file, match) => {
return `api/tests/mailers/${match[2]}.test.ts`
},
},
],
},
})
新的多功能匹配器類型
Vitest 現在有一個 Matchers
類型,你可以擴展它以在一個地方為所有自定義匹配器添加類型支持。該類型影響以下所有用法:
expect().to*
expect.to*
expect.extend({ to* })
例如,為了使 toBeFoo
匹配器具有類型安全,你可以編寫如下內容:
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) {
// ... 實現
return {
pass: true,
message: () =>'',
}
}
})
expect('foo').toBeFoo('foo')
expect.toBeFoo('foo')
sequence.groupOrder
新的 sequence.groupOrder
選項控制在使用多個項目時項目運行的順序。
具有相同 groupOrder
數字的項目將一起運行,組的順序從最小到最大。如果不設置此選項,所有項目將并行運行。如果多個項目使用相同的組順序,它們將同時運行。
考慮以下示例:
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,
},
},
},
],
},
})
這些項目中的測試將按以下順序運行:
0. slow |
|> 一起運行
0. fast |
1. flaky |> 在 slow 和 fast 后單獨運行
你可以復制這個 Markdown 格式的內容。