Vue的自动化测试

前言

为何咱们须要测试？

让产品能够快速迭代，同时还能保持高质量 -- 阮一峰 持续集成是什么？

对于一些相对稳定的系统级别页面，自动化测试在提升测试的效率的方面起到很是重要的做用。前端的自动化测试主要包括：浏览器测试和单元测试。Vue官方脚手架自带自动化测试配置，并帮助你完成对组件，函数等的自动化测试。

什么是持续集成？它和持续部署有什么区别？

代码集成到主分支须要通过一系列的自动化测试，当测试都经过以后，方可执行自动化部署，不然不能完成集成。这说明了自动化测试的重要性，咱们不能等测试工程师去发现问题。

在Vue脚手架当中，Karma和NightWatch分别对应着单元测试和e2e测试。单元测试更可能是面向JS功能逻辑的检验，而NightWatch更可能是面对业务逻辑的检验。

单元测试

代码的单元测试主要针对某些核心功能的某些函数进行测试。vue官方推荐是使用karma，mocha和chai等。karma并非一个测试框架，也不是一个断言库。它能够运行HTTP Server，运行HTML文件在你喜欢的测试框架上。不单单只是运行测试，还能够计算测试的覆盖率。mocha是测试框架，专门实现各个单元划分测试。chai是典型的断言库。

转发自：https://www.jianshu.com/p/f2e7ad06e84e

 

vue单元测试

npm run unit # 运行单元测试 

Karma

Karma是一个专门的测试运行器（runner），它不是一个测试框架框架，也不是以一个断言库。Karma兼容Jasmine，Mocha和QUnit，能够集成mocha，webpack等功能，成为以Karma为平台的单元测试，官方选择的事mocha的测试框架和chai的断言库。它拥有一些测试插件：

• karma-webpack 用webpack预处理文件
• karma-coverage 测试覆盖率
• karma-mocha 接入mocha测试框架
• karma-spec-reporter 输出报告
• karma-phantomjs-launcher 控制PhantomJS
• karma-phantomjs-shim 给PhantomJS兼容的控制

karma-coverage是基于istanbul。这些插件集成在karma这个runner，把webpack打包的vue项目，测试里组件实现的功能，包括组件库，业务逻辑和请求范围。它的配置文件karma.conf.js里面默认配置了不少插件的内容，基本上不须要调整。

var webpackConfig = require('../../build/webpack.test.conf'); module.exports = function (config) { config.set({ browsers: ['PhantomJS'], // 测试服务浏览器 frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], // 测试框架 reporters: ['spec', 'coverage'], // 报告输出 files: ['./index.js'], // 文件入口，过滤掉index.html preprocessors: { './index.js': ['webpack', 'sourcemap'] // 预处理器 }, webpack: webpackConfig, // 专门测试webpack配置 webpackMiddleware: { noInfo: true, }, coverageReporter: { dir: './coverage', // 覆盖率配置 reporters: [ { type: 'lcov', subdir: '.' }, { type: 'text-summary' }, ] }, }); }; 

Mocha

mocha自己只是一个单元测试框架，能够兼容第三方断言库，包括：

• should.js
• expect.js
• chai
• better-assert
• unexpected

在Vue开发框架中位于specs（specifications）文件底下，能够针对某个组件或者某个js进行测试。

import Vue from 'vue'; import Hello from '@/components/Hello'; describe('Hello.vue', () => { it('should render correct contents', () => { const Constructor = Vue.extend(Hello); const vm = new Constructor().$mount(); expect(vm.$el.querySelector('.hello h1').textContent) .to.equal('Welcome to Your Vue.js App'); }); }); 

其中，describe和it是mocha的语法结构，describe是这对某个组件或者函数的名字描述，测试脚本里面应该包括一个或多个describe块，每一个describe块应该包括一个或多个it块。it是对它须要完成某些功能的描述，它里面是具体的测试用例。在测试框架中，describe,it, expect和sinon都是全局方法。

Chai

Chai也就是一个很是简单的断言库，所谓的断言，就是预期某些执行结果符合你本身的要求。全部的测试用例都应该含有一句或多句的断言。

expect(vm.$el.querySelector('.hello h1').textContent) .to.equal('Welcome to Your Vue.js App'); 

上面这句话的含义，就是在实例化了Hello这个组件以后，针对它某个dom上绑定的文字进行断言，保证了数据绑定后的文字显示。同理，也可使用在某些js实现某个功能，对它进行自动化测试。

vue-test-utils

vuejs/vue-test-utils是官方的辅助测试库。它其实便是将组件实例化的过程进行封装，帮你模拟它组件实例化过程。shallow这个函数把组件List实例化，并传入props等参数，这样，你能够断言数据绑定的结果。

const items = ['', ''] const wrapper = shallow(List, { propsData: { items } }) expect(wrapper.findAll('li').length).to.equal(items.length) 

vue-router和vuex的单元测试问题

项目每每都是使用vuex和vue-router进行异步获取数据，须要外部依赖。这时，咱们须要inject-loader来实现对vue组件对象内部的数据模拟。假设咱们有这么一个组件，它引用了一个服务，能够是同步或异步（promise），这个对象会被总体替换。

<!-- example.vue -->
<template> <div class="msg">{{ msg }}</div> </template> <script> // this dependency needs to be mocked import SomeService from '../service' export default { data () { return { msg: SomeService.msg } } } </script> 

首先你要安装inject-loader，经过行内写法注入该组件。

npm install inject-loader@^2.0.0 --save-dev

const ExampleInjector = require('!!vue-loader?inject!./example.vue')

在对应的spec.js中添加了须要注入的对象。../service是在组件中的依赖对象，它的结果会被替换。

const ExampleWithMocks = ExampleInjector({ // mock it '../service': { msg: 'Hello from a mocked service!' } }) 

端对端测试

单元测试更可能是对某个组件或者js进行功能测试。端对端测试（e2e）用于模拟整个业务流程的进行自动化测试（填报，增删查改等）。vue官方推荐是使用nightwatch，它一样只是个runner，默认配置chromedriver，phantomjs。

NightWatch

NightWatch是一个专门的端对端测试运行器（runner），它的配置文件nightwatch.conf.js会设置对应的命令参数，拼接到nightwatch的命令行操做，详情参考官网。

它依赖于浏览器控制器selenium，而selenium是一个.jar后缀的文件，须要java的运行环境。因此你须要安装java并配置好环境变量。然而，selenium须要对应的driver配合来操控浏览器。

执行测试

default e2e test相似单元测试中的describe和it的测试描述，browser则是传入的浏览器对象，这个对象能够是chrome，也能够是firefox，由selenium控制。url说明的是跳到目标路径，waitForElementVisible说明的是等待5000ms直到id为app的dom出现，而后，assert帮助你进行断言某个dom的内容。

module.exports = { 'default e2e tests': function test(browser) { const devServer = browser.globals.devServerURL; browser .url(devServer) .waitForElementVisible('#app', 5000) .assert.elementPresent('.hello') .assert.containsText('h1', 'Welcome to Your Vue.js App') .assert.elementCount('img', 1) .end(); }, }; 

综上所述，e2e测试的写法很简单，它相较于单元测试得功能检验，更可能是浏览器外的控制，针对某些业务流程进行浏览器的操做验证。之前测试工程师要花十分钟完成的“测试流程”，咱们能够快速得模拟出来。