vue学习—单元测试

参考1111

karma 单元测试

# 1, 初始化时，需要选择打开test功能，然后选择karma测试 vue init webpack testtodo # 2, 运行测试，test目录会出现coverage--icov-report--index.html # 浏览器打开这个index.html，可以查看所有的测试地方 npm run unit # 3, 安装vue.js 官方的单元测试实用工具库 npm install --save-dev @vue/test-utils@1.0.0-beta.12

mocha 是个测试框架，本身不带断言层，所以需要引进Chai 断言库实现单元测试

笔记总结

Util.js 方法包含了大多数Vue组件化的测试需求。

vm.$elvm.$nextTick 和 vm.$ref都是在测试过程中比较常用的一些Vue语法糖。需要注意：vm.$nextTick 方法是异步的，所以需要在里面使用done方法。

异步断言，方法参数需要是 _ 或者 done

大多数时候查询元素通过 querySelector 方法查询class获得 vm.$el.querySelector(’.el-breadcrumb’).innerText

大多数情况下查询是否存在某个Class通过 classList.contains 方法获得，查找的结果为 true 或 false

vm.$el .classList.contains(‘el-button–primary’)

异步测试必须以 done() 方法结尾。setTimeout 和 vm.$nextTick 是常用的异步测试。

由于 Vue 进行异步更新 DOM 的情况，一些依赖 DOM 更新结果的断言必须在 vm.$nextTick() resolve 之后进行：

// 引用vue import Vue from 'vue'; // 引用要测试的组件 import app from '../../src/app.vue'; // 描述要测试的内容 describe('test app.vue', () => { // 异步数据更新 it('数据更新后，视图应该改变', done => { // 这里将app生成vue实例，并使用 $mount() 模拟挂载状态 let vm = new Vue(app).$mount(); // 挂载后改变title vm.title = 'APP'; Vue.nextTick(() => { let title = vm.$el.getElementsByTagName('h1')[0] expect(title.textContent).toEqual('APP') done(); }) }); });

describe 的钩子（生命周期）

describe('hooks', function() { before(function() { // 在本区块的所有测试用例之前执行 }); after(function() { // 在本区块的所有测试用例之后执行 }); beforeEach(function() { // 在本区块的每个测试用例之前执行 }); afterEach(function() { // 在本区块的每个测试用例之后执行 }); // test cases });

官方Demo的HelloWorld.spec.js代码

import Vue from 'vue' // 导入Vue用于生成Vue实例 import Hello from '@/components/Hello' // 导入组件 // 测试脚本里面应该包括一个或多个describe块，称为测试套件（test suite） describe('Hello.vue', () => { // 每个describe块应该包括一个或多个it块，称为测试用例（test case） it('should render correct contents', () => { const Constructor = Vue.extend(Hello) // 获得Hello组件实例 const vm = new Constructor().$mount() // 将组件挂在到DOM上 //断言：DOM中class为hello的元素中的h1元素的文本内容为Welcome to Your Vue.js App expect(vm.$el.querySelector('.hello h1').textContent) .to.equal('Welcome to Your Vue.js App') }) })

单元测试实例Demo代码

学习vue单元测试–视频

<template> <div> <section class="todoapp"> <header class="header"> <h1>todos</h1> <input v-model="newtodo" @keyup.enter="addtodo" class="newtodo" autofocus autocomplete="off" placeholder="what needs to be done?" > </header> <section class="main" > <ul class="todo-list"> <li v-for="todo in todos" :key="todo.id" class="todo" > <div class="view"> <label>{{todo.text}}</label> <button @click="deltodo(todo)" class="destroy">删除</button> </div> <input v-model="todo.text" class="edit" type="text"/> </li> </ul> </section> </section> </div> </template> <script> export default { name: 'todoMVC', data () { return { todos:[ { id:Math.random(), text:"CSS" }, { id:Math.random(), text:"html" } ], newtodo:'' } }, methods:{ addtodo:function(){ this.todos.push( { id: Math.random(), text:this.newtodo } ) this.newtodo='' }, deltodo:function(todo){ let index = this.todos.indexOf(todo); this.todos.splice(index,1) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> html,body{ margin: 0; padding: 0; } button { margin: 10px 30px; padding: 5px; border: 1px; background: rgb(126, 167, 126); font-size: 100%; } body{ line-height: 1.4em; } </style>

todoMVC.spec.js 文件—测试用例

import {mount} from '@vue/test-utils' import todoMVC from '@/components/todoMVC' // 创建测试套件 describe('HelloWorld.vue', () => { // 创建-- 查看 --测试用例 it('测试查看功能', () => { // 通过mount 将组件渲染出来 const wrapper = mount(todoMVC); // 寻找制定的dom元素 console.log(wrapper.find('.todo-list')) // 通过vm查看data中的某个数据 console.log(wrapper.vm.todos) // 断言 expect(wrapper.vm.todos.length).to.be.equal(2) }) // 创建-- 增加 --测试用例 it('测试增加功能', () => { // 通过mount 将组件渲染出来 const wrapper = mount(todoMVC); // 1, 对newtodo进行赋值 wrapper.setData({newtodo: 'test-word'}) // 2，对new-todo触发回车事件 wrapper.find('.newtodo').trigger('keyup.enter') // 3，断言，检查todos中是否有数据增加 expect(wrapper.vm.todos.length).to.be.equal(3) expect(wrapper.vm.todos[2].text).to.be.equal("test-word") console.log(wrapper.vm.todos) }) // 创建-- 删除 --测试用例 it('测试删除功能', () => { // 通过mount 将组件渲染出来 const wrapper = mount(todoMVC); wrapper.find('.destroy').trigger('click') expect(wrapper.vm.todos.length).to.be.equal(1) }) })