目錄
- Vue 單元測驗
- mocha+jest
- jest
- 實體 mocha expect方法斷言
- 示例代碼
Vue 單元測驗
官網：https://vue-test-utils.vuejs.org/zh
定義：
單元測驗是用來對一個模塊、一個函式或者一個類來進行正確性檢驗的測驗作業，
指令：
package.json檔案
- "test:unit": "vue-cli-service test:unit"
測驗驅動開發（TDD：Test-Driven Development）
mocha+jest
-
測驗框架 mocha
Mocha官網：https://mochajs.org/使用expect斷言陳述句
chia官網：https://www.chaijs.com/
chia部分方法檔案：https://www.chaijs.com/api/assert/
是JavaScript的一種單元測驗框架，
mocha的特點主要有：-
既可以測驗簡單的JavaScript函式，又可以測驗異步代碼，因為異步是JavaScript的特性之一；
-
可以自動運行所有測驗，也可以只運行特定的測驗；
-
可以支持before、after、beforeEach和afterEach來撰寫初始化代碼，
參考
Mocha中文檔案：https://segmentfault.com/a/1190000011362879
-
-
斷言庫 jest
jest
實體 mocha expect方法斷言
-
格式模板
describe 套件
describe('名稱',()=>{ <!-- 用例 --> it('方法描述',()=>{ /* 使用expect 斷言陳述句 */ /* 方法舉例 */ expcect(/* 需要檢測的方法 */).to.be.equal(/* 檢測結果 */) }) }) -
描述
it()
測驗異步代碼 通過將回呼（通常稱為done）添加到it()
.to.be.equal 是否相等
.to.be.deep.equal 是否嚴格相等
示例代碼
tests\unit\parser.spec.ts
-
測驗各類斷言陳述句執行成功或者失敗
/* 撰寫測驗用例 */ import {parser,stringify} from '@/code/parser'; /* 使用mocha(測驗工具) +chai(斷言庫) */ import { expect } from 'chai'; /* 套件 */ describe('mytest1', () => { /* 用例 */ // 常見的關系 相等 大于/小于 包含和不包含 it('測驗parser方法是否可用',()=>{ // deep.equal 表示兩個物件是否完全相等（參考空間無所謂） // .to.be.equal 表示兩個物件相等（參考空間無所謂） expect(parser('name=zfpx')).to.be.deep.equal({name:'zfpx'}) }) it('測驗stringify方法是否可用',()=>{ expect(stringify({name:'3px'})).to.be.equal('name=3px') }) }) /* 斷言陳述句各類 */ describe('測驗方法',()=>{ it('相等關系',()=>{ expect(1+1).to.be.equal(2);//相加的值 expect([1,2,3]).to.be.lengthOf(3);//長度 expect(true).to.be.true;//布林值 }) it('包含',()=>{ expect('zfpx').to.be.contain('zf');//是否包含指定字符 expect('zfpx').to.be.match(/zf/);//是否匹配正則 }) it('大于，小于',()=>{ expect(5).to.be.greaterThan(3) expect(3).to.be.lessThan(6) expect(3).to.be.not.greaterThan(5)//不大于3 }) }) -
測驗模塊是否正確渲染值
src\components\unittest\demo1.vue
<!-- 單元測驗：是否能成功顯示渲染的組件元素 --> <template> <div > <h1>{{ datas }}</h1> </div> </template> <script> export default { name:'demo1', props:['datas'], data () { return { }; } } </script> <style lang='less' scoped> </style>tests\unit\unit1.spec.ts
import unitdemo1 from '@/components/unittest/demo1.vue'; import Vue from 'vue'; import {expect} from 'chai'; import {mount} from '@vue/test-utils'; /* 寫法1 產地屬性后能否正常顯示結果*/ describe('unitdemo1',()=>{ it('1.傳遞屬性后能否正常顯示結果',()=>{ // 原生自己測驗vue // extend 方法可以根據實體創建一個類 let Constructor = Vue.extend(unitdemo1); // 對組件進行掛載 // vm.$el mocha 測驗的時候集成了 jsdom let vm:any = new Constructor({ propsData:{datas:'hello'} }).$mount(); /* 檢測h1標簽內是否包含hello */ expect(vm.$el.querySelector('h1').innerHTML).to.be.contain('hello'); }) }) /* 寫法2 使用mount */ describe('unitdemo1',()=>{ it('2.傳遞屬性后能否正常顯示結果',()=>{ let wrapper = mount(unitdemo1); /* 設定 Wrapper vm 的 prop 并強制更新， https://vue-test-utils.vuejs.org/zh/api/wrapper/setProps.html */ wrapper.setProps({datas:'hello'});//設定傳遞的值為hello expect(wrapper.find('h1').text()).to.be.contain('hello'); }) }) -
測驗模塊內的加法是否執行
src\components\unittest\demo2.vue
<!-- --> <template> <div> <span id="count">{{count}}</span> <button @click = "increment">+</button> </div> </template> <script> //這里可以匯入其他檔案（比如：組件，工具js，第三方插件js，json檔案，圖片檔案等等） //例如：import 《組件名稱》 from '《組件路徑》'; export default { //import引入的組件需要注入到物件中才能使用 components: {}, data() { //這里存放資料 return { count:10 }; }, //監聽屬性 類似于data概念 computed: {}, //監控data中的資料變化 watch: {}, //方法集合 methods: { increment(){ this.count++ } }, //生命周期 - 創建完成（可以訪問當前this實體） created() {}, //生命周期 - 掛載完成（可以訪問DOM元素） mounted() {}, beforeCreate() {}, //生命周期 - 創建之前 beforeMount() {}, //生命周期 - 掛載之前 beforeUpdate() {}, //生命周期 - 更新之前 updated() {}, //生命周期 - 更新之后 beforeDestroy() {}, //生命周期 - 銷毀之前 destroyed() {}, //生命周期 - 銷毀完成 activated() {} //如果頁面有keep-alive快取功能，這個函式會觸發 }; </script> <style lang='lesss' scoped> /* //@import url(); 引入公共css類 */ </style>tests\unit\unit2.spec.ts
import unitdemo2 from '@/components/unittest/demo2.vue'; import Vue from 'vue'; import {expect} from 'chai'; import {mount} from '@vue/test-utils'; /* 寫法2 使用mount */ describe('測驗demo2組件',()=>{ it('單機能否+1',()=>{ let wrapper = mount(unitdemo2); expect(wrapper.find('#count').text()).to.be.equal('10'); wrapper.find('button').trigger('click'); expect(wrapper.find('#count').text()).to.be.equal('11'); }) })測驗代碼執行：npm run test:unit
測驗結果
DONE Compiled successfully in 3577ms
[=========================] 100% (completed)
WEBPACK Compiled successfully in 3577ms
MOCHA Testing...
{ name: 'zfpx' }
name=zfpx
mytest1
√ 測驗parser方法是否可用
√ 測驗stringify方法是否可用
測驗方法
√ 相等關系
√ 包含
√ 大于，小于
unitdemo1
√ 1.傳遞屬性后能否正常顯示結果
unitdemo1
√ 2.傳遞屬性后能否正常顯示結果
測驗demo2組件
√ 單機能否+1
8 passing (111ms)
MOCHA Tests completed successfully
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/178088.html
標籤：JavaScript
下一篇：tree 樹形加載及增刪改