Vue單元測試---Karma+Mocha+Chai實踐

Ververica 發(fā)布于2019-08-21 16:18 / 693人閱讀

摘要：官方推薦使用來進行單元測試。導入和組件，進行測試檢查原始組件選項組件有對于組件需要，編寫單元測試時，通過傳遞該參數(shù)。在狀態(tài)更新后檢查生成的在狀態(tài)改變后和斷言更新前等待一刻執(zhí)行命令運行單元測試。參考單元測試測試框架實例教程

本文基于vue-webpack-boilerplate。官方推薦使用Karma+Mocha+Chai來進行單元測試。

介紹

Karma：一個測試運行器，用于啟動瀏覽器，運行測試案例并將結果報告給我們。該工具的主要作用是將項目運行在各種主流Web瀏覽器進行測試。

Mocha：一個測試框架?？山Y合chai斷言庫使用。

Chai：一個測試斷言庫，提供了更好的斷言語法。所謂斷言，就是對組件做一些操作，并預言產(chǎn)生的結果。如果測試結果與斷言相同則測試通過。Chai斷言庫中，to be been is that which and has have with at of same but does這些語言鏈是沒有意義的，只是便于理解而已。

BDD英文文檔

中文文檔

實踐 組件無依賴，無props

對于無需導入任何依賴，也沒有props的，直接編寫測試案例即可。

MyComponent.vue

MyComponent.spec.js

// 導入 Vue.js 和組件，進行測試
import Vue from "vue"
import MyComponent from "path/to/MyComponent.vue"

describe("MyComponent", () => {
  // 檢查原始組件選項
  it("has a created hook", () => {
    expect(typeof MyComponent.created).to.eql("function")
  })
})

組件有props

對于組件需要props，編寫單元測試時，通過propsData傳遞該參數(shù)。

MyComponent.vue

MyComponent.spec.js

import Vue from "vue"
import MyComponent from "path/to/MyComponent.vue"

function getRenderedText (Component, propsDataMsg) {
  const Ctor = Vue.extend(Component)
  const vm = new Ctor({ propsData: propsDataMsg}).$mount()
  return vm.$el.textContent
}
describe("MyComponent", () => {
  it("renders correctly with different props", () => {
    expect(getRenderedText(MyComponent, {
      msg: "Hello"
    })).to.eql("Hello")
    expect(getRenderedText(MyComponent, {
      msg: "Bye"
    })).to.eql("Bye")
  })
})

組件有依賴

若組件存在依賴，則可通過inject-loader解決。inject-loader可將任意依賴項注入到*.vue組件中。

MyComponent.vue

MyComponent.spec.js

//“!!”表示禁用全局配置的所有l(wèi)oaders?！皏ue-loader?inject!”表示使用vue-loader，傳入inject參數(shù)。
const ExampleInjector = require("!!vue-loader?inject!./example.vue")
//運行ExampleInjector函數(shù)返回一個MyComponent的實例，該實例中MyComponent組件的依賴項已被模擬。
const ExampleWithMocks = ExampleInjector({
  // mock it
  "../service": {
    msg: "Hello from a mocked service!"
  }
})

describe("MyComponent", () => {
  it("should render", () => {
    const vm = new Vue({
      template: "",
      components: {
        "test": ExampleWithMocks
      }
    }).$mount()
    expect(vm.$el.querySelector(".msg").textContent).to.eql("Hello from a mocked service!")
  })
})

異步操作

對于異步操作，it塊執(zhí)行的時候，需要傳入一個回調(diào)函數(shù)，通常該函數(shù)被命名為done。當測試結束的時候，必須顯式調(diào)用這個函數(shù)，告訴Mocha測試結束了。否則，Mocha就無法知道，測試是否結束，會一直等到超時報錯。

// 在狀態(tài)更新后檢查生成的 HTML
it("updates the rendered message when vm.message updates", done => {
  const vm = new Vue(MyComponent).$mount()
  vm.message = "foo"
  // 在狀態(tài)改變后和斷言 DOM 更新前等待一刻
  Vue.nextTick(() => {
    expect(vm.$el.textContent).to.eql("foo")
    done()
  })
})

npm run unit

執(zhí)行 npm run unit 命令運行單元測試。會產(chǎn)生結果列表：

若想看測試覆蓋率等情況，可在test/unit/coverage查看。

注意

測試腳本都放在 test/unit/specs/ 目錄下。

腳本命名方式是[組件名].spec.js。

在karma.conf.js文件里修改karma配置。

單元測試默認測試 src 目錄下除了 main.js 之外的所有文件，可在 test/unit/index.js 文件中修改。

測試腳本里面應該包括一個或多個describe塊，每個describe塊應該包括一個或多個it塊。

describe塊稱為"測試套件"（test suite），表示一組相關的測試。它是一個函數(shù)，第一個參數(shù)是測試套件的名稱（"加法函數(shù)的測試"），第二個參數(shù)是一個實際執(zhí)行的函數(shù)。

it塊稱為"測試用例"（test case），表示一個多帶帶的測試，是測試的最小單位。它也是一個函數(shù)，第一個參數(shù)是測試用例的名稱（"1 加 1 應該等于 2"），第二個參數(shù)是一個實際執(zhí)行的函數(shù)。

Mocha在describe塊之中，提供測試用例的四個鉤子：before()、after()、beforeEach()和afterEach()。它們會在指定時間執(zhí)行。

參考：
單元測試
Testing with Mocks
Unit Testing
測試框架 Mocha 實例教程
Chai

GPU云服務器云服務器單元測試-mocha-jasmine 單元測試最佳實踐單元-mocha-jasmine vue20開發(fā)實踐

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/88388.html

使用karma+mocha+chai+sinon+@vue/test-utils為你的組件庫增加單元

摘要：但是，項目中的一些公共封裝，比如公共的組件公用的功能模塊等是可以使用單元測試的。因此特為組件庫引入單元測試，目的在于能減少組件的，避免重復的發(fā)布不必要的包。項目github地址：https://github.com/yuanalina/installAsRequired這里必須要提前說明，前端項目的單元測試不是必須的，特別是業(yè)務型項目，增加單元測試反而會成為累贅，增加開發(fā)成本且無意義...

happen 2019-08-23 14:53 評論0 收藏0
深入Vue3+TypeScript技術棧-coderwhy大神新課王紅元

摘要：是一個測試框架，在中配合斷言庫實現(xiàn)單元測試。腳本命名方式為組件名。單元測試默認測試目錄下除了之外的所有文件，可在文件中修改?；厥?，一般在每個測試腳本測試完成后執(zhí)行回收。等元素事件名稱配置項觸發(fā)和事件，既觸發(fā)點擊事件。 ??百度網(wǎng)盤??提取碼：u6C4在使用vue-cli創(chuàng)建項目的時候，會提示要不要安裝單元測試和e2e測試。...

番茄西紅柿 2021-11-25 09:43 評論0 收藏2637
Vue單元測試實戰(zhàn)教程(Mocha/Karma + Vue-Test-Utils + Chai)

摘要：在前端進階之路前端架構設計測試核心這邊文章中通過分析了傳統(tǒng)手工測試的局限性去引出了測試驅動開發(fā)的理念并介紹了一些測試工具這篇文章我將通過一個的項目去講解如何使用且結合官方推薦的去進行單元測試的實戰(zhàn)一安裝我為本教程寫一個示例庫您可以直接在《前端進階之路: 前端架構設計(3) - 測試核心》這邊文章中, 通過分析了傳統(tǒng)手工測試的局限性去引出了測試驅動開發(fā)的理念, 并介紹了一些測試工具....

RebeccaZhong 2019-08-21 18:31 評論0 收藏0
前端單元測試

摘要：為保證代碼的質(zhì)量，單元測試必不可少。本文記錄自己在學習單元測試過程中的一些總結。以一個項目為例，代碼結構如下前端測試框架主要是與，這里我們選擇，斷言庫有以及自帶的。為保證代碼的質(zhì)量，單元測試必不可少。本文記錄自己在學習單元測試過程中的一些總結。 TDD與BDD的區(qū)別 TDD屬于測試驅動開發(fā)，BDD屬于行為驅動開發(fā)。個人理解其實就是TDD先寫測試模塊，再寫主功能代碼，然后能讓測試模塊通...

liuyix 2019-08-22 14:58 評論0 收藏0
前端單元測試（未完。。）

摘要：基礎知識作用為提供瀏覽器測試環(huán)境，為真正測試框架，為斷言庫測試用例基礎塊稱為測試套件，表示一組相關的測試。它也是一個函數(shù)，第一個參數(shù)是測試用例的名稱，第二個參數(shù)是一個實際執(zhí)行的函數(shù)。基礎知識 karma作用為提供瀏覽器測試環(huán)境，mocha為真正測試框架，chai為斷言庫測試用例基礎 describe塊稱為測試套件（test suite），表示一組相關的測試。它是一個函數(shù)，第一個...

ACb0y 2019-08-23 15:23 評論0 收藏0