6月iOS設(shè)備性能榜：M2穩(wěn)居榜首 A系列只能等一手3nm來(lái)救
沒有新品發(fā)布，自然iOS設(shè)備性能榜的上榜設(shè)備就沒有什么更替，僅僅只有跑分變化而產(chǎn)生的排名變動(dòng)，畢竟蘋果新品的發(fā)布節(jié)奏就是這樣的，一年下來(lái)也就幾個(gè)移動(dòng)端新品，不會(huì)像安卓廠商，一
12 月 5 日，由 Vue 團(tuán)隊(duì)打造的下一代測(cè)試框架 Vitest 正式推出 1.0 版本！
Vitest 于 2021 年 12 月推出，至今已經(jīng)過(guò)去了兩年的時(shí)間，其發(fā)展速度可謂是非常迅速，目前在 npm 下載量已經(jīng)達(dá)到了每周 250w，并且還在呈現(xiàn)快速增長(zhǎng)的趨勢(shì)，Github Star 數(shù)量達(dá)到了 10.7k。
Vitest 是一個(gè)原生支持 Vite 的測(cè)試框架。Vitest 以其快速、簡(jiǎn)潔的測(cè)試解決方案脫穎而出，需要最少的配置。Vitest 與廣泛采用的JavaScript測(cè)試框架 Jest 完美契合，并能無(wú)縫集成到 Vue 應(yīng)用中。雖然它專為與 Vite 一起使用而設(shè)計(jì)，但Vitest也可以獨(dú)立運(yùn)行，在應(yīng)用中提供了靈活性。由于 Vitest 和 Vite 使用相同的配置文件，因此將 Vitest 集成到 Vue 應(yīng)用中很簡(jiǎn)單。
Vitest 的主要功能如下：
要想在 Vue 項(xiàng)目中運(yùn)行自動(dòng)化組件測(cè)試，首先要使用以下命令初始化一個(gè) Vue 應(yīng)用：
npm create vite@latest vue-app --template vuecd vue-appnpm install項(xiàng)目安裝完成后，運(yùn)行以下命令啟動(dòng)應(yīng)用：
npm run dev在瀏覽器中打開 http://127.0.0.1:5173/，即可看到應(yīng)用程序成功運(yùn)行。
接下來(lái)，使用以下命令來(lái)安裝 Vitest：
npm install -D vitest安裝完成后，我們需要將 Vitest 添加到 package.json 文件中。在 package.json 文件中添加測(cè)試腳本：
"scripts": { // ... "test": "vitest", },接下來(lái)，打開 vitest.config.js 文件并添加以下代碼：
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], test:{ globals:true, }})將 globals 屬性設(shè)置為 true 將允許在測(cè)試文件中訪問 Vitest API，而無(wú)需導(dǎo)入它們。
Test Utils 是一個(gè) Vue 測(cè)試庫(kù)，提供了安裝 Vue 組件并與之交互的方法。使用以下命令安裝測(cè)試實(shí)用程序：
npm install --save-dev @vue/test-utils我們應(yīng)該能夠在組件測(cè)試中模擬 DOM API。Vitest 目前支持happy-dom和jsdom。這里我們將使用 happy-dom。運(yùn)行下面的命令來(lái)安裝happy-dom：
npm install happy-dom@6.0.4安裝完成后，在 package.json 文件中的測(cè)試腳本中添加--dom：
"scripts": { // … "test": "vitest --dom", },另外，我們需要將 happy-dom 添加到 vite.config.js 文件中，以使其在測(cè)試文件中全局可用：
test:{ // … environment: 'happy-dom', }接下來(lái)，創(chuàng)建一個(gè)名為 GuessAge.vue 的簡(jiǎn)單組件，該組件使用戶能夠輸入自己的姓名，并使用 Agify.io API 根據(jù)輸入的姓名猜測(cè)用戶的年齡。
在 src/components 文件夾中，創(chuàng)建一個(gè) GuessAge.vue 文件并添加以下代碼：
<template> <h1>{{ title }}</h1> <div class="card"> <div style="width:400px;height:130px;margin-top:20px;border-style: dotted;" > <br> <span>名字: {{firstname}}</span> <br> <span>年齡: {{age}}</span> <br> </div><br><br> <label> 輸入名字 </label><br> <input type="text" v-model="search" style="font-size:20px;border-radius:10px;" placeholder=" Name ..."> <br> <br> <button type="button" @click="getAge">猜年齡</button> <br> <br> <br> <input type="radio" value="pop"> <label>保存</label> </div></template><script setup>import { ref } from 'vue'defineProps({ title: String})</script><script>export default { data() { return { search:"", firstname:"", age:"", } }, computed: { getAge() { fetch('https://api.agify.io/?name='+ this.search) .then(response => response.json()) .then(data => { this.age = data.age this.firstname = data.name this.search="" }) } }}</script>現(xiàn)在，我們需要為組件創(chuàng)建一個(gè)測(cè)試文件。根據(jù)命名約定，測(cè)試文件名必須以組件名稱開頭，以 .spec.js 或 .test.js 結(jié)尾。當(dāng)測(cè)試多個(gè)組件時(shí)，每個(gè)組件都應(yīng)該有一個(gè)測(cè)試文件。
在 Components 文件夾中創(chuàng)建一個(gè)名為 GuessAge.spec.js 的測(cè)試文件。該文件將包含 GuessAge 組件的簡(jiǎn)單測(cè)試腳本。讓我們測(cè)試 GuessAge 組件，看看它在安裝時(shí)是否接收到正確的 props。可以通過(guò)將以下代碼添加到 GuessAge.spec.js 文件來(lái)測(cè)試掛載時(shí) title 屬性的值：
import {mount} from "@vue/test-utils";import GuessAge from "../components/GuessAge.vue";// import { expect, test } from "vitest";const wrapper = mount(GuessAge);it("testing GuessAge component props", async () => { expect(GuessAge.props.title).toContain("Guess User Age App");});從 @vue/test-utils 導(dǎo)入 mount，允許將組件包裝到一個(gè)名為 Wrapper 的特殊對(duì)象中，它提供了各種測(cè)試選項(xiàng)。
注意：如果在 Vite 的配置文件中將globals的值設(shè)置為false，那么在測(cè)試文件中就應(yīng)該添加 import { expect, test } from "vitest"。
運(yùn)行以下命令以在監(jiān)聽模式下測(cè)試組件：
npm run test
我們還可以使用 toBe('function') 斷言方法來(lái)檢查應(yīng)用中是否存在函數(shù)，如下所示：
it("Test if data is a function", () => { expect(typeof GuessAge.data).toBe("function");});可以在終端中看到以下內(nèi)容：
快照用于跟蹤用戶界面的變化。典型的快照測(cè)試用例會(huì)渲染一個(gè)UI組件，獲取一個(gè)快照，并將其與測(cè)試文件旁邊的參考快照文件進(jìn)行比較。它將當(dāng)前的UI狀態(tài)與已建立的快照進(jìn)行比較。如果當(dāng)前狀態(tài)與已建立狀態(tài)不匹配，測(cè)試將失敗。
要運(yùn)行快照測(cè)試并跟蹤UI的變化，需要在GuessAge.spec.js測(cè)試文件中添加以下代碼：
test('snapshot UI testing', () => { const wrapper = mount(GuessAge,{}); expect(wrapper.text()).toMatchSnapshot()})由于Vitest支持熱模塊重載，每次修改測(cè)試文件時(shí)都不必運(yùn)行測(cè)試命令。可以在終端中看到以下內(nèi)容：
在使用HTTP請(qǐng)求測(cè)試Vue組件時(shí)，我們首先需要模擬網(wǎng)絡(luò)請(qǐng)求；否則，測(cè)試將失敗。使用 Mock Service Worker (MSW) 進(jìn)行模擬可以輕松地通過(guò)攔截測(cè)試中的請(qǐng)求來(lái)測(cè)試 HTTP 請(qǐng)求，而不需要更改任何應(yīng)用程序代碼。
使用以下命令來(lái)安裝 MSW：
npm install msw --save-dev我們需要在 GuessAge.spec.js 測(cè)試文件中導(dǎo)入以下兩個(gè)依賴項(xiàng)才能使用 MSW：
import { setupServer } from 'msw/node'import { rest } from 'msw'通過(guò)在GuessAge.spec.js測(cè)試文件中添加以下代碼來(lái)創(chuàng)建攔截HTTP請(qǐng)求的模擬服務(wù)器實(shí)例：
export const restHandlers = [ rest.get('https://api.agify.io/', (req, res, ctx) => { return res(ctx.status(200), ctx.json([ { age: 55, name: "tope" } ])) }),]const server = setupServer(...restHandlers)// 在所有測(cè)試之前啟動(dòng)服務(wù)beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))// 在所有測(cè)試之后關(guān)閉服務(wù)afterAll(() => server.close())// 在每個(gè)測(cè)試后重置處理程序，對(duì)于測(cè)試隔離很重要afterEach(() => server.resetHandlers())接下來(lái)檢查應(yīng)用中是否存在按鈕，以及單擊“猜年齡”按鈕是否會(huì)在獲取用戶年齡后清除輸入標(biāo)簽
test("有按鈕", () => { expect(wrapper.find("button").exists()).toBe(true);});test("Button clicked", async () => { const ac = await wrapper.get("button").trigger("click") expect(wrapper.vm.search).toEqual("")})可以在終端中看到以下內(nèi)容：
為了評(píng)估代碼的效果和質(zhì)量，Vitest支持通過(guò)c8和Istanbul實(shí)現(xiàn)本地代碼覆蓋率，從而對(duì)代碼性能進(jìn)行報(bào)告和分析。
為了配置和運(yùn)行覆蓋率測(cè)試，我們需要在vite.configure.js文件中添加以下內(nèi)容：
export default defineConfig({ plugins: [vue()], test:{ globals:true, coverage: { provider: 'istanbul' }, environment: 'happy-dom', }})此外，我們還需要在package.json文件中的腳本部分添加coverage，如下所示：
"scripts": { // ... "coverage": "vitest run --coverage" },配置完成之后 ，接下來(lái)就使用以下命令安裝 Istanbul：
npm i -D @vitest/coverage-istanbul當(dāng)執(zhí)行以下命令時(shí)，測(cè)試文件將會(huì)運(yùn)行，Vitest 將在終端上顯示覆蓋率報(bào)告：
npm run coverage
在運(yùn)行測(cè)試時(shí)，確保測(cè)試在合理的時(shí)間內(nèi)完成非常重要。有時(shí)，一個(gè)測(cè)試可能需要太長(zhǎng)時(shí)間才能完成，這可能會(huì)導(dǎo)致問題并延遲測(cè)試套件的運(yùn)行。為了解決這個(gè)問題，Vitest提供了一個(gè)test-timeout選項(xiàng)，允許為測(cè)試設(shè)置超時(shí)時(shí)間。該選項(xiàng)指定了測(cè)試在超過(guò)最大時(shí)間限制之前可以完成的最長(zhǎng)時(shí)間，否則將失敗并顯示超時(shí)錯(cuò)誤。
可以使用以下命令為所有測(cè)試設(shè)置超時(shí)時(shí)間并替換默認(rèn)時(shí)間：
npx vitest run --test-timeout=50000該命令會(huì)將 Vitest 測(cè)試框架中測(cè)試的超時(shí)值設(shè)置為 50 秒，可以根據(jù)測(cè)試要求將此值替換為不同的時(shí)間值。
將應(yīng)用的測(cè)試從 Jest 遷移到 itest 非常簡(jiǎn)單。兩個(gè)測(cè)試框架使用類似的API，因此在遷移到 Vitest 時(shí)，可能不需要對(duì)現(xiàn)有的代碼進(jìn)行重大更改。下面就來(lái)看看如何從 Jest 遷移到 Vitest。
首先，我們需要從項(xiàng)目中刪除 Jest，并通過(guò)運(yùn)行以下命令安裝 Vitest 以及所有必要的依賴項(xiàng)：
npm uninstall jest --save-devnpm install vitest --save-devnpm install --save-dev @vue/test-utils接下來(lái)，我們需要在package.json文件中更新測(cè)試腳本，以使用Vitest而不是Jest。可以通過(guò)將測(cè)試腳本更改為Vitest來(lái)實(shí)現(xiàn)：
"scripts": { "test": "vitest",}現(xiàn)在，運(yùn)行以下命令來(lái)測(cè)試應(yīng)用：
npm run test如果在 Jest 測(cè)試代碼中使用了模塊模擬，需要將其更新為以下 Vitest 測(cè)試代碼：
// Jestjest.mock('./module-path', () => 'hello')// Vitestvi.mock('./module-path', () => ({ default: 'hello'}))本文鏈接：http://www.www897cc.com/showinfo-26-38497-0.htmlVitest 1.0 正式發(fā)布：Vue 團(tuán)隊(duì)打造的下一代測(cè)試框架！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)