前端自動化測試
/**
* 1. 測試是什么?
* 保證程序在運行過程中是正確的。
* 核心：輸入 —— 預期輸出 —— 驗證結(jié)果
*
* 2. 種類
* a、手動測試（問題：若程序復雜, 人為測試會遺漏部分邏輯，從而導致發(fā)布線上出現(xiàn)錯誤）
* b、自動化測試
*
* 3. 前端自動化測試是什么?
* 答：測試金字塔型：從下到上依次為，越往上，開發(fā)者越容易獲得成就感，一個系統(tǒng)不僅限于一種測試，根據(jù)不同場景搭配不同的測試
* 5. 測試覆蓋率（行，函數(shù)，分支，語句的覆蓋，分支指的是if, else, 共有幾個條件，哪個條件執(zhí)行了，按照%占比計算，方便觀察覆蓋率情況）
* 4. 快照測試（驗證程序的UI變化）
* 3. 端到端測試（從用戶角度，使用機器在真實瀏覽器環(huán)境驗證應用交互）
* 2. 集成測試 （驗證多個單元協(xié)同工作）
* 1. 單元測試（驗證獨立的單元是否正常，單元代表一個函數(shù)，一個組件）
* 0. 靜態(tài)測試（Eslint，typeScript 驗證代碼質(zhì)量和代碼規(guī)范）
*
* a、單元測試（Jest）
* 優(yōu)點：
* 1. 代碼覆蓋率高
* 2. （寫）代碼質(zhì)量高，bug少
* 3. （測試）快速反饋，減少測試時間
* 4. （維護）更容易維護
* 缺點：
* 1. 僅用于獨立的單元，無法保證多個單元在程序運行期間是正常的
* 適用范圍：
* 1. 函數(shù)，組件
* b、集成測試（Jest）
* 優(yōu)點：
* 1、從用戶角度出發(fā)，編寫測試代碼，更符合軟件程序
* 2、不關(guān)注單元細節(jié)，快速重構(gòu)
* 3、開發(fā)速度較單元測試快
* 缺點：
* 1、測試失敗時，無法快速定位問題
* 2、代碼覆蓋率低
* 3、測試速度比單元測試慢
* 適用范圍：
* 1. 函數(shù)之間，組件之間
* c、端到端測試（cypress）
* 優(yōu)點：
* 1. 在瀏覽器的真實環(huán)境，用機器測試代碼
* 2. 與手動測試相比，機器測試速度更快，更準確，減少人力做回歸測試
* 3、僅用于核心且穩(wěn)定的邏輯做E2E測試
* 缺點：
* 1、運行速度慢（啟動瀏覽器，網(wǎng)絡請求）
* 2、調(diào)試困難（本地調(diào)試，集成服務器調(diào)試）
* 適用范圍：
* 1、登錄，退出登錄，表單（新增, 編輯, 刪除），點贊，收藏，模仿用戶行為
* d、快照測試
* 優(yōu)點：
* 1、新拍攝的截圖與已保存的截圖，對比找不同
* 適用范圍：
* 1、已經(jīng)封裝好的組件，后期在UI上不會更改
*
* 場景：通常用于前端封裝的組件，核心代碼，邏輯極少更改的代碼。
*
* 2. 為什么要用?（方便維護，減少測試時間，方便重構(gòu)）
* a、方便后期需求變更時，代碼更容易維護。
* b、代碼發(fā)生變動, 及時錯誤指出。
* c、減少發(fā)布線上前人為測試時間，回歸測試更省心
* d、促進重構(gòu)
* f、提升程序健壯性，穩(wěn)定性
*
* 3. 怎么用?
* a、vitest 測試庫, vite 支持, 若使用 vite , vitest 與其更搭配？
* b、jest 測試庫，功能較全？
*
* 4. 缺點?
* a、前期需要花費大量的時間編寫測試用例, 測試代碼，耗時，成本高
* b、代碼量大，造成打包緩慢，加載速度慢
* c、邏輯簡單的系統(tǒng)，不建議使用，大材小用
*
*
* 5、測試開發(fā)方式
* a、TDD 測試驅(qū)動開發(fā)（白盒測試）
* 核心：
* 1、先寫測試再寫功能
* 2、編寫獨立的測試用例，如某個功能點，某個函數(shù)
* 優(yōu)點：
* 1、代碼質(zhì)量高
* 2、有利于程序的模塊設計
* 3、測試覆蓋率高
* 缺點：
* 1、代碼量多
* 2、更關(guān)注某個單元，多個單元程序運行無法確保是否正常
* 3、代碼耦合度高，后期需求變更，測試代碼同步更改
* 4、與實際功能需求相差比較大
*
* b、BDD 行為驅(qū)動開發(fā)（黑盒測試）
* 核心：
* 1、先寫功能再寫測試
* 2、從需求出發(fā)，編寫測試代碼
* 優(yōu)點：
* 1、如果要修改邏輯，輸入輸出不變，內(nèi)部邏輯更改，不影響測試流程
* 2、更關(guān)注功能測試，也就是黑盒測試
* 3、通過Cucumber軟件，產(chǎn)品與開發(fā)確認需求，以 Cucumber 文本的格式確認
*
* c、TDD + BDD（推薦使用）
*
* 6、Jest
* 主要特點：零配置、自帶斷言、測試覆蓋率、快照測試、Mock模擬、前端技術(shù)不局限、只執(zhí)行發(fā)生改變文件所對應的測試
*
* 7、Vue Testing Library
* 核心: 測試將不使用渲染的 Vue 組件實例，而是使用實際的 DOM 節(jié)點。
*
* 8、Vue Test Utils（VTU）
* 是什么? 是一組實用程序函數(shù)，在簡化Vue.js組件的測試。它提供了一些以隔離方式掛載 Vue 組件并與之交互的方法。
*
* 9、Vitest
* 特點:
* 1、基于Vite驅(qū)動
* 2、與Jest兼容
* 3、智能且即時的監(jiān)視模式
* 4、ESM，TypeScript，JSX支持
* 5、更快地運行單元測試（默認使用 vite 即時熱模塊重載）
* 6、將開發(fā)、構(gòu)建和測試環(huán)境的配置定義為一個管道，共享相同的插件和 vite.config.js 文件
* 7、Cypress 的測試更加專注于確定瀏覽器中UI元素是否可見，Vitest用于非瀏覽器邏輯的單元測試（瀏覽器APIs代碼進行單元測試），結(jié)合使用端到端和組件測試更合適
*
* 10、Vue Test Utils 和 Vitest 結(jié)合使用
*/
遇到問題：
1. TypeError: Unknown file extension ".scss" for D:\workspace\ai_plat_front\node_modules\element-plus\theme-chalk\src\base.scss
Serialized Error: { code: 'ERR_UNKNOWN_FILE_EXTENSION' }
vite.config.js (藍色部分，為修改內(nèi)容)
/// <reference types="vitest" /> /* eslint-disable */ const timestamp = new Date().getTime() export default defineConfig(({ command, mode, ssrBuild }) => { return { // 其他配置 test: { // 啟用類似 jest 的全局測試 API globals: true, // 使用 happy-dom 模擬 DOM // 這需要你安裝 happy-dom 作為對等依賴（peer dependency） environment: 'happy-dom', server: { deps: { inline: ['element-plus'] } } } } })
浙公網(wǎng)安備 33010602011771號