vue中關於測試的知識介紹

bug收集發表於2020-10-09
Vue

文章目錄

前言

Vue-Cli 推薦兩種測試分別是：端到端的測試（E2E） 和 單元測試(Unit Test)

一、端到端（E2E）

端(消費端)到端(產品端)的測試（E2E (End-to-End)）, 它用來測試一個應用從頭到尾的流程是否和設計時候所想的一樣。簡而言之，它從一個使用者的角度出發，認為整個系統都是黑箱，只有UI會暴露給使用者

二、單元測試（Unit Test）

測試驅動開發（TDD: Test-Driven Development）, 單元測試是用來對一個模組、一個函式或者一個類來進行正確性檢驗的測試工作。

Vue中的單元測試中主要使用兩個工具分別是( Jest +Karma+ Mocha(Chai) )

Karma

Karma是一 個基於Node.js的JavaScript測試執行過程管理工具( Test Runner)。該工具在Vue中的主要作用是將專案執行在各種主流Web瀏覽器進行測試。

換句話說，它是一個測試工具,能讓你的程式碼在瀏覽器環境下測試。

需要它的原因在於,你的程式碼可能是設計在瀏覽器端執行的,在node環境下測試可能有些bug暴露不出來;另外,瀏覽器有相容問題, karma提供了手段讓你的程式碼自動在多個瀏覽器( chrome，firefox ，ie等)環境下執行。

如果你的程式碼只會執行在node端，那麼你不需要用karma 。

Mocha

mocha(摩卡)是一個測試框架，在vue-cli中配合。 mocha本身不帶斷言卡，所以必須先引入斷言庫，Chai斷言庫實現單元測試。

Mocha的常用命令和用法不算太多,而Chai斷言庫可以看Chai.js斷言庫API中文文件,很簡單,多查多用就能很快掌
握。

斷言庫

所謂“斷言” ,就是判斷原始碼的實際執行結果與預期結果是否-致,如果不一致就丟擲一個錯誤。下面這句斷言的意思是,呼叫add(1, 1) ,結果應該等於2.

var expect = require('chai).expect;
expect(1 + 1)).to.be.equal(2);
Chai是一種斷言庫(http://chaijs.com/)

所有的測試用例( it塊)都應該含有一句或多句的斷言。 它是編寫測試
用例的關鍵。斷言功能由斷言庫來實現。

常用的關鍵字如下，具體意義及使用方法，可參考：https://www.jianshu.com/p/f200a75a15d2/

  • to
  • be
  • been
  • is
  • that
  • which
  • and
  • has
  • have
  • with
  • at
  • of
  • same

Jest （一般使用這個，請仔細閱讀）

官方提供的單元測試的模組@vue/test-utils，它使用的是Jest風格的expect斷言。

具體示例如下：

// 掛載這個元件
const wrapper = shallowMount(MyComponent)
// 這裡是一些 Jest 的測試，你也可以使用你喜歡的任何斷言庫或測試
describe('MyComponent', () => {
  // 檢查原始元件選項
  it('has a created hook', () => {
    expect(typeof MyComponent.created).toBe('function')
  })
  // 評估原始元件選項中的函式的結果
  it('sets the correct default data', () => {
    expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })
  // 檢查 mount 中的元件例項
  it('correctly sets the message when created', () => {
    expect(wrapper.vm.$data.message).toBe('bye!')
  })
  // 建立一個例項並檢查渲染輸出
  it('renders the correct message', () => {
    expect(wrapper.text()).toBe('bye!')
  })
})

注：

  1. 一個it就相當於一個測試用例
  2. 一個元件一般就對應一個測試檔案,檔案後以為spec.js結尾
    目錄結構如下：

目錄結構

  1. jest使用api,可參考官方檔案https://vue-test-utils.vuejs.org/api/
  2. 寫好後，使用npm run unit指令執行，進行測試
最後，本文關於vue中的測試介紹，就到這。還有不清楚的，可以本文留言，一起討論

作者：doubleyong

公眾號：bug收集

部落格：bugshouji.com (專門解決與收集bug的網站)

相關文章