自動(dòng)化測(cè)試分類

單元測(cè)試

單元測(cè)試（unit testing），是指對(duì)軟件中的最小可測(cè)試單元進(jìn)行檢查和驗(yàn)證。簡單來說，單元就是人為規(guī)定的最小的被測(cè)功能模塊，可能是一個(gè)單一函數(shù)或方法、一個(gè)完整的組件或類。

單元測(cè)試是最小巧也是最簡單的測(cè)試——它們通過隔離單個(gè)組件的每一個(gè)部分，來在最小工作單元上進(jìn)行斷言。

單元測(cè)試側(cè)重：檢驗(yàn)函數(shù)的輸出結(jié)果

e2e測(cè)試

e2e (端到端) 測(cè)試，致力于確保組件的一系列交互是正確的。它們是更高級(jí)別的測(cè)試，例如可能會(huì)測(cè)試用戶是否注冊(cè)、登錄以及更新他們的用戶名。這種測(cè)試運(yùn)行起來會(huì)比單元測(cè)試和快照比對(duì)測(cè)試慢一些。

e2e測(cè)試側(cè)重：從用戶視角，對(duì)真實(shí)系統(tǒng)的訪問行為進(jìn)行仿真

快照比對(duì)測(cè)試

快照比對(duì)測(cè)試（snapshot testing）會(huì)保存你的 Vue 組件的標(biāo)記，然后比較每次新生成的測(cè)試運(yùn)行結(jié)果。如果有些東西改變了，開發(fā)者就會(huì)得到通知，并決定這個(gè)改變是刻意為之 (組件更新時(shí)) 還是意外發(fā)生的 (組件行為不正確)。

自動(dòng)化測(cè)試框架

Jest、Mocha、Jasmine、sinon、chai、Karma、vue-test-utils都是什么？

名詞類型名詞

Jest	測(cè)試框架	Jest由Facebook開發(fā)，用于測(cè)試JavaScript代碼（尤其是使用React JS開發(fā)的應(yīng)用程序 集成了斷言、JSDom、覆蓋率報(bào)告等，是一款幾乎零配置的測(cè)試框架 提供snapshot功能
Mocha	測(cè)試框架	基于JavaScript的自動(dòng)化測(cè)試框架，用于測(cè)試使用Node.js運(yùn)行的應(yīng)用程序 比較年老的測(cè)試框架，在JavaScript界使用更廣泛，可參考文獻(xiàn)更多
Jasmine	測(cè)試框架	主要用于異步測(cè)試，是一個(gè)功能豐富的JavaScript自動(dòng)化測(cè)試框架 Jasmine需要很多配置
sinon	測(cè)試框架	用于 JavaScript 的測(cè)試監(jiān)視(spy)、樁(stub)和仿制(mock)功能。不依賴其他類庫，兼容任何單元測(cè)試框架
chai	斷言庫	一套TDD(測(cè)試驅(qū)動(dòng)開發(fā))/BDD(行為驅(qū)動(dòng)開發(fā))的斷言庫 expect/should庫
Karma	運(yùn)行器	不是測(cè)試框架，也不是斷言庫，是允許你的JavaScript代碼在復(fù)雜的瀏覽器運(yùn)行的工具（抹平瀏覽器障礙）
vue-test-utils	單元測(cè)試工具庫	vue官方提供的，專門為測(cè)試單文件組件而開發(fā)

為什么使用 vue-test-utils

vue-test-utils是vue官方的單元測(cè)試框架，提供了一系列非常方便的工具，使我們更輕松地為vue構(gòu)建的應(yīng)用來編寫單元測(cè)試。主流的JavaScript測(cè)試運(yùn)行器有很多，但vue-test-utils都能支持。它是測(cè)試運(yùn)行器無關(guān)的。

為什么選擇jest

因?yàn)?jest 包含了 karma + mocha + chai + sinon 的所有常用功能，零配置開箱即用

Vue官方是這樣描述的：

Jest 是功能最全的測(cè)試運(yùn)行器。它所需的配置是最少的，默認(rèn)安裝了 JSDOM，內(nèi)置斷言且命令行的用戶體驗(yàn)非常好。不過你需要一個(gè)能夠?qū)挝募M件導(dǎo)入到測(cè)試中的預(yù)處理器。我們已經(jīng)創(chuàng)建了 vue-jest 預(yù)處理器來處理最常見的單文件組件特性，但仍不是 vue-loader 100% 的功能。

vue-test-utils在Vue和Jest之間提供了一個(gè)橋梁，暴露出一些接口，讓我們更加方便地通過Jest為Vue應(yīng)用編寫單元測(cè)試

安裝

通過vue-cli創(chuàng)建模板腳手架時(shí)，可以選擇是否啟用單元測(cè)試，并且選擇單元測(cè)試框架，這樣Vue就幫助我們自動(dòng)配置好了Jest

#1.運(yùn)行命令，創(chuàng)建vue項(xiàng)目 vue create [project-name]#2.選擇"Manually select features" 和 "Unit Testing"，以及 "Jest" 作為測(cè)試運(yùn)行器。#3. 安裝完成，cd 進(jìn)入項(xiàng)目目錄中并運(yùn)行 npm run test:unit

運(yùn)行成功之后可以看到

demo介紹

為什么以spec.js命名

spec是specification（基準(zhǔn)）的縮寫，vue-test-uitls會(huì)默認(rèn)找tests/unit下面的所有以spec后綴命名的js文件，跑文件里的測(cè)試腳本

單元測(cè)試的三個(gè)步驟

安排（Arrange）：為測(cè)試做好設(shè)置。在我們的用例中，是渲染了組件

行動(dòng)（Act）：對(duì)系統(tǒng)執(zhí)行操作

斷言（Assert）：確保真實(shí)的結(jié)果匹配你的期望，我們需要斷言以確保組件運(yùn)行正確（斷言就是比較，判斷正不正確，1+1是不是等于2，就是一個(gè)最簡單的斷言）

import { shallowMount } from "@vue/test-utils" import FormSubmitter from "@/components/FormSubmitter.vue"describe("FormSubmitter", () => {it("reveals a notification when submitted", async () => {//安排const wrapper = shallowMount(FormSubmitter) //行動(dòng)wrapper.find("[data-username]").setValue("alice")wrapper.find("form").trigger("submit.prevent")await wrapper.vm.$nextTick()//斷言expect(wrapper.find(".message").text()).toBe("Thank you for your submission, alice.")}) })

上面代碼中的describe塊稱為“測(cè)試套件”，表示一組相關(guān)的測(cè)試。它是一個(gè)函數(shù)，第一個(gè)參數(shù)是測(cè)試套件的名稱，第二個(gè)參數(shù)是實(shí)際執(zhí)行的函數(shù)，分組讓測(cè)試用例代碼結(jié)構(gòu)化，易于維護(hù)

it塊稱為“測(cè)試用例”，表示一個(gè)單獨(dú)的測(cè)試，是測(cè)試的最小單位

expect是斷言，它接受一個(gè)參數(shù)就是運(yùn)行測(cè)試內(nèi)容的結(jié)果，返回一個(gè)對(duì)象，這個(gè)對(duì)象來調(diào)用匹配器(toBe) ，匹配器的參數(shù)就是我們的預(yù)期結(jié)果，這樣就可以對(duì)結(jié)果和預(yù)期進(jìn)行對(duì)比了，也就可以判斷對(duì)不對(duì)了，比如expect(1+1).toBe(2)。

Vue 組件單元測(cè)試的一般思路：渲染這個(gè)組件，然后斷言這些標(biāo)簽是否匹配組件的狀態(tài)。

測(cè)試Props

//SubmitButton.vue <template><div><span v-if="isAdmin">Admin Privileges</span><span v-else>Not Authorized</span><button>{{ msg }}</button></div> </template><script>export default {name: "SubmitButton",props: {msg: {type: String,required: true},isAdmin: {type: Boolean,default: false}}} </script><style scoped> </style>//SubmitButton.spec.js import SubmitButton from "../../src/components/SubmitButton"; import {shallowMount} from "@vue/test-utils";const msg = 'submit'; const factory = (propsData)=>{return shallowMount(SubmitButton,{//測(cè)試從父組件中接受屬性（props）的組件propsData:{msg,...propsData}}) }describe('does not have admin privileges', () => {it('renders a message', () => {const wrapper = factory()expect(wrapper.find("span").text()).toBe('Not Authorized')expect(wrapper.find("button").text()).toBe('submit')}) })describe('has admin privileges', () => {it('renders a message', () => {const wrapper = factory({isAdmin: true})expect(wrapper.find("span").text()).toBe('Admin Privileges')expect(wrapper.find("button").text()).toBe('submit')}) })

參考

2019年最流行的五大JavaScript自動(dòng)化測(cè)試框架

https://vue-test-utils.vuejs.org/zh/

vue測(cè)試指南

Jest單元測(cè)試入門

總結(jié)

以上是生活随笔為你收集整理的前端自动化测试——vue单元测试vue-test-utils的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。