目錄

測試框架 vitest 介紹

測試文件的寫法

文件取名：文件名中要有 test，即??xxx.test.ts?

引入庫：

test 測試：

測試運行：?npx test 文件名?，每次保存后會重新運行。

★ expect 方法：

vi 模擬相關的方法

第三方庫的測試實現

目的：測試 request 函數，模擬 get 請求的對應返回，期待返回的數據能夠正常出現。

?問題：在測試文件中，引入 request，模擬 vi.mock('axios')? 發現?axios.get 方法上 只有幾個方法——》即 axios 會缺失對應的方法

?解決：使用斷言 const mockedAxios = axios as Mocked （注：mockedAxios 可以獲取一個對應的類型，Mocked 是 vitest 上的）

寫測試用例

mount?將組件掛載

★ mount 方法：?

報錯：ReferenceError: document is not defined.

??解決：需要自己配置，讓其支持dom環境。

測試事件：

---

測試框架 vitest 介紹

網址：Vitest | Next Generation testing framework

特點：①支持vite的生態系統，②兼容jest語法 ③HMR測試（速度快） ④ ESM（js的原生支持）

安裝 Vitest：?npm install -D vitest?

斷言：查看框架是否符合預期的結果。chaijs、should、expect、assert

---

測試文件的寫法

文件取名：文件名中要有 test，即??xxx.test.ts?

??每個 case 測試一個功能點

引入庫：

expect 斷言庫、test 測試用例：?import { export, test } from 'vitest'?

describe分組：?import { describe } from 'vitest'?

vi 模擬：?import { describe } from 'vitest'?

Mocked +斷言--》可以獲取一個對應的類型：?import { Mocked } from 'vitest'?

test 測試：

test('測試名', () => {

??expect().toBe() ...

})

測試運行：?npx test 文件名?，每次保存后會重新運行。

★ expect 方法：

????expect().toBe()：兩個嚴格相等（相當于===）

????.toEqual()：比里頭的值是否相等（相當于==）

????.toBeTruthy() 是真，.toBeFalsy() 是假

????expect(a).toBeGreaterThan(b)：a比b大

????.toBeLessThan()：比小

調用情況：

expect().toHaveBeenCalled() ，被調用過的

expect().toHaveBeenCalledWith(參數)，期待被調用成xx參數

expect().toHaveBeenCalledTimes(次數)，調用了幾次

expect().toHaveProperty('')??是否有xx屬性

expect().toBeDefined()? 是否存在

vi 模擬相關的方法

vi.fn() 回調函數

vi.synOn(對象, '方法名')，

vi.mock('模擬的第三方庫同名')，

---

第三方庫的測試實現

目的：測試 request 函數，模擬 get 請求的對應返回，期待返回的數據能夠正常出現。

?寫被測試的對象：發送一個請求，傳入一個假的 url 。模擬get的實現，確定一個返回值 data，

?問題：在測試文件中，引入 request，模擬 vi.mock('axios')? 發現?axios.get 方法上 只有幾個方法——》即 axios 會缺失對應的方法

?

?解決：使用斷言 const mockedAxios = axios as Mocked<typeof axios> （注：mockedAxios 可以獲取一個對應的類型，Mocked 是 vitest 上的）

此時，在?.上面就不是原來的方法，而是?mockedAxios?之后得到的功能。一系列的方法，可完成對應的實現。?

?mockImplementation 手動寫其實現。

快捷方法—— .get.mockResolveValue({data: 123})

.get.mockImplementation( () => Primise.resolve( {data: 123} )

??等價于

?? .get.mockResolveValue({data: 123})

---

寫測試用例

目的： 將組件掛載到一個地方，測試它長啥樣，是否符合我們傳入的屬性。

mount?將組件掛載

??引入：import { mount } from '@vue/test-utils'，

??語法：mount(?組件，{ 要傳入的具體內容 }?)

★ mount 方法：?

mount().classes()??獲取dom節點上的class

如何遍歷：① mount().get('') 找不到，會測試中斷； ②mount().find??找不到 不會中斷。

取信息：① mount().get().html() 返 html結構; ② mount().get().text()返文本結構

mount().get().trigger('觸發的事件名') 觸發xx

mount().emitted()??顯示當前所有觸發的事件名稱。

mount().attributes('屬性')? 對應節點的屬性

mount().find('').element() 獲取真正的dom節點

mount().find('').element().屬性 獲取真正的dom節點的某一個屬性

.html()，供測試使用。

例子：

---

報錯：ReferenceError: document is not defined.

?問題：需要掛載節點，就需要一個dom環境，vitest 默認環境在 node下，而node 環境沒有對應的 dom 環境。

??解決：需要自己配置，讓其支持dom環境。

????如何配置?vitest。默認會讀取 vite.config.ts，需要重載，即?新建一個 vitest.config.ts?文件

首行添加：???????///<reference types="vitest" /> 定義重載

???????將對應的配置文件 vite.config.ts 拷貝到vitest.config.ts。將不必要的刪掉，如 刪掉 eslint()、resolve的路徑問題。

??????test 里頭添加:

????????全局打開??globals: true

????????環境??environment:'jsdom'?，打開dom環境

??????運行 npx vitest Button，（其中 Button 為文件名）查看結果?

測試事件：

?觸發 click，MouseEvent 原生的事件

?測試disabled：以及其點擊事件出發情況。

---