详解Vue单元测试Karma+Mocha学习笔记

在使用vue-cli创建项目的时候，会提示要不要安装单元测试和e2e测试。既然官方推荐我们使用这两个测试框架，那么我们就动手去学习实践一下他们吧。

简介

Karma

Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。

换句话说，它是一个测试工具，能让你的代码在浏览器环境下测试。需要它的原因在于，你的代码可能是设计在浏览器端执行的，在node环境下测试可能有些bug暴露不出来；另外，浏览器有兼容问题，karma提供了手段让你的代码自动在多个浏览器（chrome，firefox，ie等）环境下运行。如果你的代码只会运行在node端，那么你不需要用karma。

Mocha

Mocha是一个测试框架，在vue-cli中配合chai断言库实现单元测试。

而Chai断言库可以看Chai.js断言库API中文文档，很简单，多查多用就能很快掌握。

我对测试框架的理解

npm run unit 执行过程

执行 npm run unit 命令 开启Karma运行环境 使用Mocha去逐个测试用Chai断言写的测试用例 在终端显示测试结果 如果测试成功，karma-coverage 会在 ./test/unit/coverage 文件夹中生成测试覆盖率结果的网页。

Karma

对于Karma，我只是了解了一下它的配置选项。

下面是Vue的karma配置，简单注释了下：

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'],  // 预处理器 karma-webpack  preprocessors: {   './index.js': ['webpack', 'sourcemap']  },  // Webpack配置  webpack: webpackConfig,  // Webpack中间件  webpackMiddleware: {   noInfo: true  },  // 测试覆盖率报告  // https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md  coverageReporter: {   dir: './coverage',   reporters: [    { type: 'lcov', subdir: '.' },    { type: 'text-summary' }   ]  } })}

Mocha和chai

我们看下官方的例子（都用注释来解释代码意思了）：

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')  })})