自動化測試分類

單元測試

單元測試（unit testing），是指對軟件中的最小可測試單元進行檢查和驗證。簡單來說，單元就是人為規定的最小的被測功能模塊，可能是一個單一函數或方法、一個完整的組件或類。

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

單元測試側重：檢驗函數的輸出結果

e2e測試

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

e2e測試側重：從用戶視角，對真實系統的訪問行為進行仿真

快照比對測試

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

自動化測試框架

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

名詞類型名詞

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

為什么使用 vue-test-utils

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

為什么選擇jest

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

Vue官方是這樣描述的：

Jest 是功能最全的測試運行器。它所需的配置是最少的，默認安裝了 JSDOM，內置斷言且命令行的用戶體驗非常好。不過你需要一個能夠將單文件組件導入到測試中的預處理器。我們已經創建了 vue-jest 預處理器來處理最常見的單文件組件特性，但仍不是 vue-loader 100% 的功能。

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

安裝

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

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

運行成功之后可以看到

demo介紹

為什么以spec.js命名

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

單元測試的三個步驟

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

行動（Act）：對系統執行操作

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

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) //行動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塊稱為“測試套件”，表示一組相關的測試。它是一個函數，第一個參數是測試套件的名稱，第二個參數是實際執行的函數，分組讓測試用例代碼結構化，易于維護

it塊稱為“測試用例”，表示一個單獨的測試，是測試的最小單位

expect是斷言，它接受一個參數就是運行測試內容的結果，返回一個對象，這個對象來調用匹配器(toBe) ，匹配器的參數就是我們的預期結果，這樣就可以對結果和預期進行對比了，也就可以判斷對不對了，比如expect(1+1).toBe(2)。

Vue 組件單元測試的一般思路：渲染這個組件，然后斷言這些標簽是否匹配組件的狀態。

測試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,{//測試從父組件中接受屬性（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自動化測試框架

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

vue測試指南

Jest單元測試入門

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。