單元測試

配置和工具

任何兼容基于模塊的構建系統都可以正常使用，但如果你需要一個具體的建議，可以使用?Karma?進行自動化測試。它有很多社區版的插件，包括對?Webpack?和?Browserify?的支持。更多詳細的安裝步驟，請參考各項目的安裝文檔，通過這些 Karma 配置的例子可以快速幫助你上手 (Webpack?配置，Browserify?配置)。

簡單的斷言

你不必為了可測性在組件中做任何特殊的操作，導出原始設置就可以了：

<template><span>{{ message }}</span> </template><script>export default {data () {return {message: 'hello!'}},created () {this.message = 'bye!'}} </script>

然后隨著 Vue 導入組件的選項，你可以使用許多常見的斷言：

// 導入 Vue.js 和組件，進行測試 import Vue from 'vue' import MyComponent from 'path/to/MyComponent.vue'// 這里是一些 Jasmine 2.0 的測試，你也可以使用你喜歡的任何斷言庫或測試工具。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', () => {const vm = new Vue(MyComponent).$mount()expect(vm.message).toBe('bye!')})// 創建一個實例并檢查渲染輸出it('renders the correct message', () => {const Constructor = Vue.extend(MyComponent)const vm = new Constructor().$mount()expect(vm.$el.textContent).toBe('bye!')}) })

編寫可被測試的組件

很多組件的渲染輸出由它的 props 決定。事實上，如果一個組件的渲染輸出完全取決于它的 props，那么它會讓測試變得簡單，就好像斷言不同參數的純函數的返回值。看下面這個例子：

<template><p>{{ msg }}</p> </template><script>export default {props: ['msg']} </script>

你可以在不同的 props 中，通過?propsData?選項斷言它的渲染輸出：

import Vue from 'vue' import MyComponent from './MyComponent.vue'// 掛載元素并返回已渲染的文本的工具函數 function getRenderedText (Component, propsData) {const Constructor = Vue.extend(Component)const vm = new Constructor({ propsData: propsData }).$mount()return vm.$el.textContent }describe('MyComponent', () => {it('renders correctly with different props', () => {expect(getRenderedText(MyComponent, {msg: 'Hello'})).toBe('Hello')expect(getRenderedText(MyComponent, {msg: 'Bye'})).toBe('Bye')}) })

斷言異步更新

由于 Vue 進行?異步更新 DOM?的情況，一些依賴 DOM 更新結果的斷言必須在?Vue.nextTick?回調中進行：

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

我們計劃做一個通用的測試工具集，讓不同策略的渲染輸出 (例如忽略子組件的基本渲染) 和斷言變得更簡單。

關于更深入的 Vue 單元測試的內容，請移步?Vue Test Utils?以及我們關于?Vue 組件的單元測試的 cookbook 文章。

from:?https://cn.vuejs.org/v2/guide/unit-testing.html

總結

以上是生活随笔為你收集整理的Vue.js 单元测试的全部內容，希望文章能夠幫你解決所遇到的問題。

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