Vitest

英文

简体中文

英文

简体中文

外觀

功能 ​

透過影片學習撰寫第一個測試

測試、開發和建置之間的共用設定 ​

Vite 的設定、轉換器、解析器和外掛程式。使用與應用程式相同的設定來執行測試。

在 設定 Vitest 中深入了解。

監控模式 ​

bash
$ vitest

當您修改原始碼或測試檔案時，Vitest 會智慧地搜尋模組圖形，並只重新執行相關測試，就像 Vite 中的 HMR 的運作方式一樣！

vitest 在 開發環境中預設以監控模式啟動，而在 CI 環境中（當 process.env.CI 存在時）則智慧地以 執行模式啟動。您可以使用 vitest watch 或 vitest run 明確指定所需的模式。

開箱即用的常見 Web 慣用語 ​

開箱即用的 ES 模組 / TypeScript / JSX 支援 / PostCSS

執行緒 ​

預設情況下，Vitest 使用 node:worker_threads 透過 Tinypool（Piscina 的輕量級分支）在多個執行緒中執行測試檔案，允許測試同時執行。如果您的測試正在執行與多執行緒不相容的程式碼，您可以切換到 --pool=forks，它使用 node:child_process 透過 Tinypool 在多個程序中執行測試。

若要在單一執行緒或程序中執行測試，請參閱 poolOptions。

Vitest 也會隔離每個檔案的環境，因此一個檔案中的環境變異不會影響其他檔案。可以透過傳遞 --no-isolate 給 CLI 來停用隔離（以執行效能換取正確性）。

測試篩選 ​

Vitest 提供許多方法來縮小要在執行中執行的測試範圍，以便加快測試速度，讓您可以專注於開發。

進一步了解 測試篩選。

並行執行測試 ​

在連續測試中使用 .concurrent 以並行執行它們。

ts
import { ,  } from 'vitest'

// The two tests marked with concurrent will be run in parallel
('suite', () => {
  ('serial test', async () => { /* ... */ })
  .('concurrent test 1', async ({  }) => { /* ... */ })
  .('concurrent test 2', async ({  }) => { /* ... */ })
})

如果您在套件中使用 .concurrent，套件中的每個測試都將並行執行。

ts
import { ,  } from 'vitest'

// All tests within this suite will be run in parallel
.('suite', () => {
  ('concurrent test 1', async ({  }) => { /* ... */ })
  ('concurrent test 2', async ({  }) => { /* ... */ })
  .('concurrent test 3', async ({  }) => { /* ... */ })
})

您還可以在並行套件和測試中使用 .skip、.only 和 .todo。在 API 參考 中閱讀更多資訊。

警告

在執行並行測試時，快照和斷言必須使用來自本地 測試內容 的 expect，以確保偵測到正確的測試。

快照 ​

與 Jest 相容 的快照支援。

ts
import { expect, it } from 'vitest'

it('renders correctly', () => {
  const result = render()
  expect(result).toMatchSnapshot()
})

在 快照 中進一步了解。

Chai 和 Jest expect 相容性 ​

Chai 內建用於斷言，以及 與 Jest expect 相容 的 API。

請注意，如果您正在使用新增比對器的第三方程式庫，將 test.globals 設定為 true 將提供更好的相容性。

模擬 ​

Tinyspy 內建用於模擬，並在 vi 物件上提供與 jest 相容的 API。

ts
import { ,  } from 'vitest'

const  = .()

('hello', 1)

(.()).(true)
(..[0]).(['hello', 1])

.( => )

('world', 2)

(..[1].).('world')

Vitest 支援 happy-dom 或 jsdom 來模擬 DOM 和瀏覽器 API。它們不包含在 Vitest 中，您可能需要安裝它們

bash
$ npm i -D happy-dom
# or
$ npm i -D jsdom

然後，變更設定檔中的 environment 選項

ts
// vitest.config.ts
import {  } from 'vitest/config'

export default ({
  : {
    : 'happy-dom', // or 'jsdom', 'node'
  },
})

在 模擬 中進一步了解。

涵蓋範圍 ​

Vitest 支援透過 v8 的原生程式碼涵蓋範圍，以及透過 istanbul 的工具程式碼涵蓋範圍。

json
{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

在 涵蓋範圍 中了解更多。

原始碼測試 ​

Vitest 也提供一種方法，可以在原始碼中執行測試，與實作一起，類似於 Rust 的模組測試。

這使得測試與實作共用相同的封閉，並能夠在未匯出的情況下針對私有狀態進行測試。同時，它也讓開發的回饋迴路更接近。

ts
// src/index.ts

// the implementation
export function add(...args: number[]) {
  return args.reduce((a, b) => a + b, 0)
}

// in-source test suites
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest
  it('add', () => {
    expect(add()).toBe(0)
    expect(add(1)).toBe(1)
    expect(add(1, 2, 3)).toBe(6)
  })
}

在 原始碼測試 中了解更多。

效能測試 實驗性質 ​

從 Vitest 0.23.0 開始，你可以透過 bench 函式使用 Tinybench 來執行效能測試，以比較效能結果。

ts
import { ,  } from 'vitest'

('sort', () => {
  ('normal', () => {
    const  = [1, 5, 4, 2, 3]
    .((, ) => {
      return  - 
    })
  })

  ('reverse', () => {
    const  = [1, 5, 4, 2, 3]
    .().((, ) => {
      return  - 
    })
  })
})
Benchmark reportBenchmark report

類型測試 實驗性質 ​

從 Vitest 0.25.0 開始，你可以 撰寫測試 來捕捉類型回歸。Vitest 附帶 expect-type 套件，為你提供類似且容易理解的 API。

ts
import { assertType, expectTypeOf } from 'vitest'
import { mount } from './mount.js'

test('my types work properly', () => {
  expectTypeOf(mount).toBeFunction()
  expectTypeOf(mount).parameter(0).toMatchTypeOf<{ name: string }>()

  // @ts-expect-error name is a string
  assertType(mount({ name: 42 }))
})