什麼是 Vitest？

嘿，開發者同事！ ？你準備好進入 Vitest 的世界了嗎？如果您是測試新手或一直在使用其他測試框架，請不要擔心。我們將一起探索 Vitest，在本文結束時，您會很高興嘗試！

什麼是維斯特？

Vitest 就像是你的程式碼的超級英雄。這是一個由 Vite 提供支援的超快單元測試框架。但這對你來說意味著什麼？

?️ 速度：Vitest 速度快得令人難以置信，這意味著您可以花更少的時間等待，花更多的時間編碼。
？ 輕鬆設定：它與 Vite 開箱即用，非常容易上手。
？ 觀看模式：當您進行更改時，它可以自動重新執行您的測試。
？ 優秀的開發者體驗：它有一個乾淨、直覺的 API，使用起來很有趣。

讓我們開始吧！

想像一下您正在開發一個新專案。您已經有了一些功能，並且想要確保它們正常工作。進入維斯特！

首先，讓我們安裝Vitest：

npm install -D vitest

現在，假設我們有一個簡單的函數要測試：

// math.js
export function add(a, b) {
  return a + b;
}

我們要如何使用 Vitest 來檢定？這非常簡單！讓我們建立一個測試檔案：

// math.test.js
import { expect, test } from 'vitest'
import { add } from './math'

test('addition works', () => {
  expect(add(2, 2)).toBe(4)
})

哇，這很簡單，對吧？讓我們來分解一下：

1. 我們從 Vitest 導入期望和測試。
2. 我們導入新增函數。
3. 我們使用測試函數建立一個測試。
4. 在測試中，我們使用expect來檢查我們的函數是否正常運作。

運行你的測試

準備好執行測試了嗎？只需將其添加到您的 package.json 中即可：

{
  "scripts": {
    "test": "vitest"
  }
}

現在您可以使用以下命令執行測試：

npm run test

瞧！您將在終端機中看到測試結果。 ？

讓我們來看看：觀看模式

但是等等，還有更多！ Vitest 有一個很棒的觀看模式。這就像有一個私人助理，每次您進行更改時都會檢查您的程式碼。

要使用觀看模式，只要運行：

npm run test -- --watch

現在，每次您儲存檔案時，Vitest 都會自動重新執行您的測試。就像魔法一樣！ ✨

提問時間！

讓我們讓它變得互動。你能猜出這個測驗的作用是什麼嗎？

test('multiply function', () => {
  expect(multiply(3, 4)).toBe(12)
})

花點時間想想...

準備好了嗎？此測試正在檢查乘法函數，以確保它正確地將 3 和 4 相乘得到 12。很酷，對吧？

輪到你了！

現在輪到你寫測驗了！假設我們有這個函數：

export function isEven(number) {
  return number % 2 === 0
}

你能為這個函數寫一個測試嗎？試試吧！

（提示：您需要檢查偶數和奇數）

總結

恭喜！您剛剛邁出了進入 Vitest 世界的第一步。 ？我們已經介紹了基礎知識，但還有更多值得探索的內容：

• 模擬函數與模組
• 測試非同步程式碼
• 將 Vitest 與您最喜歡的框架（如 React 或 Vue）結合使用

請記住，測試不僅僅是發現錯誤。這是關於編寫更好、更可靠的程式碼。有了 Vitest，它實際上會很有趣！

那麼，你準備好在你的下一個專案中嘗試 Vitest 了嗎？相信我，未來的你會感謝你的！ ？

測試愉快！ ?✨

以上是什麼是 Vitest？的詳細內容。更多資訊請關注PHP中文網其他相關文章！