详解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' } ] } }) }
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:详解Vue单元测试Karma+Mocha学习笔记-创新互联
网站URL:http://scyanting.com/article/diohoi.html