亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue單元測(cè)試---Karma+Mocha+Chai實(shí)踐

Ververica / 730人閱讀

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

本文基于vue-webpack-boilerplate。官方推薦使用Karma+Mocha+Chai來(lái)進(jìn)行單元測(cè)試。

介紹

Karma：一個(gè)測(cè)試運(yùn)行器，用于啟動(dòng)瀏覽器，運(yùn)行測(cè)試案例并將結(jié)果報(bào)告給我們。該工具的主要作用是將項(xiàng)目運(yùn)行在各種主流Web瀏覽器進(jìn)行測(cè)試。

Mocha：一個(gè)測(cè)試框架?？山Y(jié)合chai斷言庫(kù)使用。

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

BDD英文文檔

中文文檔

實(shí)踐 組件無(wú)依賴，無(wú)props

對(duì)于無(wú)需導(dǎo)入任何依賴，也沒有props的，直接編寫測(cè)試案例即可。

MyComponent.vue

MyComponent.spec.js

// 導(dǎo)入 Vue.js 和組件，進(jìn)行測(cè)試
import Vue from "vue"
import MyComponent from "path/to/MyComponent.vue"

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

對(duì)于組件需要props，編寫單元測(cè)試時(shí)，通過(guò)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")
  })
})
組件有依賴

若組件存在依賴，則可通過(guò)inject-loader解決。inject-loader可將任意依賴項(xiàng)注入到*.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")
//運(yùn)行ExampleInjector函數(shù)返回一個(gè)MyComponent的實(shí)例，該實(shí)例中MyComponent組件的依賴項(xiàng)已被模擬。
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!")
  })
})
異步操作

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

// 在狀態(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 命令運(yùn)行單元測(cè)試。會(huì)產(chǎn)生結(jié)果列表：

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

注意

測(cè)試腳本都放在 test/unit/specs/ 目錄下。

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

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

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

測(cè)試腳本里面應(yīng)該包括一個(gè)或多個(gè)describe塊，每個(gè)describe塊應(yīng)該包括一個(gè)或多個(gè)it塊。

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

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

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

參考：
單元測(cè)試
Testing with Mocks
Unit Testing
測(cè)試框架 Mocha 實(shí)例教程
Chai

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/88388.html

相關(guān)文章

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

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

    happen 評(píng)論0 收藏0

  • 深入Vue3+TypeScript技術(shù)棧-coderwhy大神新課 王紅元

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

    番茄西紅柿 評(píng)論0 收藏2637

  • Vue單元測(cè)試實(shí)戰(zhàn)教程(Mocha/Karma + Vue-Test-Utils + Chai)

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

    RebeccaZhong 評(píng)論0 收藏0

  • 前端單元測(cè)試

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

    liuyix 評(píng)論0 收藏0

  • 前端單元測(cè)試（未完。。）

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

    ACb0y 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<