Karma

装置 Karma对于 Karma 会是一个系列，探讨在各种环境下，应用 Karma 进行单元测试。初始化 NPM实现初始化 NPM 包治理，创立 package.json 项目管理文件。应用参数 -y 间接依照默认值创立 packgae.json 项目管理文件。PS C:\study\mykarma> npm init -yWrote to C:\study\mykarma\package.json: { "name": "mykarma", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"}, "keywords": [], "author": "", "license": "ISC"} 当初，能够在我的项目文件夹中看到 package.json 文件曾经创立了游戏平台。装置 Karma当初，能够间接应用 NPM 来装置 karma。i 是 install 命令的缩写，-D 是 --save-dev 的缩写。PS C:\study\mykarma> npm i -D karmanpm WARN package.json mykarma@1.0.0 No descriptionnpm WARN package.json mykarma@1.0.0 No repository field.npm WARN package.json mykarma@1.0.0 No README datanpm WARN optional dep failed, continuing fsevents@1.0.7karma@0.13.21 node_modules\karma├── batch@0.5.3├── di@0.0.1├── graceful-fs@4.1.3├── rimraf@2.5.2├── mime@1.3.4├── colors@1.1.2├── source-map@0.5.3├── isbinaryfile@3.0.0├── bluebird@2.10.2├── dom-serialize@2.2.1 (custom-event@1.0.0, void-elements@2.0.1, extend@3.0.0, ent@2.2.0)├── http-proxy@1.13.2 (eventemitter3@1.1.1, requires-port@1.0.0)├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)├── glob@7.0.0 (path-is-absolute@1.0.0, inherits@2.0.1, once@1.3.3, inflight@1.0.4)├── useragent@2.1.8 (lru-cache@2.2.4)├── minimatch@3.0.0 (brace-expansion@1.1.3)├── lodash@3.10.1├── expand-braces@0.1.2 (array-unique@0.2.1, array-slice@0.2.3, braces@0.1.5)├── log4js@0.6.31 (semver@4.3.6, readable-stream@1.0.33)├── connect@3.4.1 (utils-merge@1.0.0, parseurl@1.3.1, debug@2.2.0, finalhandler@0.4.1)├── core-js@2.1.0├── body-parser@1.15.0 (content-type@1.0.1, bytes@2.2.0, depd@1.1.0, raw-body@2.1.5, debug@2.2.0, qs@6.1.0, iconv-lite@0.4.13, http-errors@1.4.0, on-finished@2.3.0, type-is@1.6.11)├── socket.io@1.4.5 (debug@2.2.0, has-binary@0.1.7, socket.io-parser@2.2.6, socket.io-adapter@0.4.0, engine.io@1.6.8, socket.io-client@1.4.5)└── chokidar@1.4.2 (path-is-absolute@1.0.0, inherits@2.0.1, async-each@0.1.6, glob-parent@2.0.0, is-binary-path@1.0.1, is-glob@2.0.1, readdirp@2.0.0, anymatch@1.3.0)PS C:\study\mykarma>当初咱们能够应用 node 来运行 karma  了。 ...

目前开发大型应用，测试是一个非常重要的环节，但是大多数前端开发者对测试相关的知识是比较缺乏的。因为可能项目开发周期短根本没有机会写，所以你没有办法体会到前端自动化测试的重要性。 来说说为什么前端自动化测试如此重要！ 先看看前端常见的问题: 修改某个模块功能时，其它模块也受影响，很难快速定位bug多人开发代码越来越难以维护不方便迭代，代码无法重构代码质量差增加自动化测试后： 我们为核心功能编写测试后可以保障项目的可靠性强迫开发者编写更容易被测试的代码，提高代码质量编写的测试有文档的作用，方便维护1.测试简介1.1 黑盒测试和白盒测试黑盒测试一般也被称为功能测试，黑盒测试要求测试人员将程序看作一个整体，不考虑其内部结构和特性，只是按照期望验证程序是否能正常工作白盒测试是基于代码本身的测试，一般指对代码逻辑结构的测试。1.2 测试分类单元测试(Unit Testing) 单元测试是指对程序中最小可测试单元进行的测试，例如测试一个函数、一个模块、一个组件... 集成测试(Integration Testing) 将已测试过的单元测试函数进行组合集成暴露出的高层函数或类的封装，对这些函数或类进行的测试 端到端测试(E2E Testing)打开应用程序模拟输入，检查功能以及界面是否正确 1.3 TDD & BDDTDD是测试驱动开发(Test-Driven Development) TDD的原理是在开发功能代码之前，先编写单元测试用例代码 BDD是行为驱动开发(Behavior-Driven Development) 系统业务专家、开发者、测试人员一起合作，分析软件的需求，然后将这些需求写成一个个的故事。开发者负责填充这些故事的内容，保证程序实现效果与用户需求一致。 小结： TDD是先写测试再开发 （一般都是单元测试，白盒测试）；而BDD则是按照用户的行为来开发，再根据用户的行为编写测试用例 （一般都是集成测试，黑盒测试）1.4 测试框架Karma：Karma为前端自动化测试提供了跨浏览器测试的能力，可以在浏览器中执行测试用例Mocha：前端自动化测试框架，需要配合其他库一起使用，像chai、sinon...Jest：Jest 是Facebook推出的一款测试框架，集成了 Mocha,chai,jsdom,sinon等功能。...看到这里Facebook 都在推Jest，你还不学吗? Jest也有一些缺陷就是不能像Karma这样直接跑在浏览器上，它采用的是jsdom，优势是简单、0配置！ 后续我们通过Jest来聊聊前端自动化测试。 2.Jest的核心应用在说Jest测试之前，先来看看以前我们是怎样测试的 const parser = (str) =>{ const obj = {}; str.replace(/([^&=]*)=([^&=]*)/g,function(){ obj[arguments[1]] = arguments[2]; }); return obj;}const stringify = (obj) =>{ const arr = []; for(let key in obj){ arr.push(`${key}=${obj[key]}`); } return arr.join('&');}// console.log(parser('name=zf')); // {name:'zf'}// console.log(stringify({name:'zf'})) // name=zf我们每写完一个功能，都先需要手动测试功能是否正常，测试后可能会将测试代码注释起来，这样会产生一系列问题。因为会污染源代码，所有的测试代码和源代码混合在一起。如果删除掉，下次测试还需要重新编写。 ...

安装测试用例基础describe块称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（“加法函数的测试”），第二个参数是一个实际执行的函数。 describe钩子：describe('hooks', function() { before(function() { // 在本区块的所有测试用例之前执行 }); after(function() { // 在本区块的所有测试用例之后执行 }); beforeEach(function() { // 在本区块的每个测试用例之前执行 }); afterEach(function() { // 在本区块的每个测试用例之后执行 }); // test cases});it块称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。它也是一个函数，第一个参数是测试用例的名称，第二个参数是一个实际执行的函数。describe(‘加法函数的测试’, function() { it(‘1 加 1 应该等于 2’, function() { expect(add(1, 1)).to.be.equal(2); });});

项目github地址：https://github.com/yuanalina/installAsRequired这里必须要提前说明，前端项目的单元测试不是必须的，特别是业务型项目，增加单元测试反而会成为累赘，增加开发成本且无意义，业务型的项目需求常常变动，UI也经常更改，增加单元测试，需要在开发过程中不断更新开发测试用例，增加开发成本。但是，项目中的一些公共封装，比如公共的组件、公用的功能模块等是可以使用单元测试的。为什么组件库需要使用单元测试搭建完组件库的环境后，进入开发阶段，当开发完成组件，在说明文档中调试完毕后，到正式在项目中使用组件时，发现没有合适的项目或者说合适的方法去确保组件本身功能是没有问题了，再引用到项目中。毕竟组件是通过发布为npm包的形式为其他项目所使用，如果组件本身就有很多bug，那调试过程将是很繁琐的，需要不断的重复发布npm包，项目更新引用npm包，繁琐的操作浪费本就宝贵的开发时间。因此特为组件库引入单元测试，目的在于能减少组件的bug，避免重复的发布不必要的npm包。技术栈组件库单元测试，使用的各技术为：karma+mocha+chai+sinon+@vue/test-utils。下面做简单介绍，并贴上个人觉得简单有效的学习链接作为参考。karmakarma是一个测试运行器，为开发者提供高效的测试环境，主要作用是将项目运行在各种主流Web浏览器进行测试。关于karma的学习，建议看官方文档。组件库项目是通过vue-cli搭建的，项目生成时karma相关配置就已经设置好了，关于karma，可以先作为了解即可。mochamocha是一个测试框架，兼容多种断言库，mocha的学习可以看阮一峰老师的测试框架 Mocha 实例教程进行了解。chaichai是一个测试断言库，所谓断言，就是对组件做一些操作，并预言产生的结果。如果测试结果与断言相同则测试通过。chai的学习可以参阅Chai.js断言库API中文文档sinonsinon是一个测试工具，可以使用sinon来进行模拟http等异步请求操作，作为间谍监听回调函数调用等功能来帮助我们更轻松实现测试。sinon学习参阅：sinon入门,关于模拟http请求：利用SinonJS测试 AJAX 请求例子@vue/test-utils@vue/test-utils是vue官方推荐的vue测试工具，使用这个工具我们可以让我们更方便的测试vue项目。官方文档：vue-test-utils环境搭建在用vue-cli构建项目时，Set up unit test输入y(yes),Pick a test runner 选择Karma and mocha即可生成单元测试开发环境什么？你的项目生成时Set up unit test输入的是n(no)？别着急，跟着下面步骤来，搭建环境。1、首先安装全部单元测试需要的依赖npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai kbaocunrma-spec-reporter karma-coverage @vue/test-utils2、将vue-cli中关于单元测试的相关文件copy到项目相应位置3、修改package.json,增加单元测试启动命令"unit": “cross-env BABEL_ENV=test karma start test/unit/karma.conf.js –single-run"4、修改、增加chrome运行环境安装chrome相关依赖npm i -D chromedriver karma-chrome-launcher修改karma.conf.js文件到这里环境就搭建完毕了，在src/components目录中增加一个HelloWorld.vue，执行npm run unit命令就可以将单元测试跑起来啦目录结构：运行结果，看见一片飘绿就是成功了测试用例开发示例环境搭建完成就可以进行测试用例的开发了，这里以button组件为例示范测试用例如何开发在test/unit/specs目录中创建一个以.spec.js结尾的文件，在文件中引入需要测试的.vue文件即可运行结果：踩过的坑不得不说，从搭建单元测试到开发环境到完成测试用例开发，真的是踩坑无数。。。这里做一个小小汇总，希望当你开发中遇到类似问题能对你有所帮助，也作为我个人的一个记录1、karma.conf.js中的browsers参数需要改成Chrome,并安装chrome相关依赖;2、要测试的vue组件有依赖其他第三方插件，需要在@vue/test-utils中引入localVue，并将第三方插件注册到localVue中，mount挂载组件生成wrapper时，将localVue作为参数传递；3、要测试的组件引入element-ui，除了要在localVue中注册外，还需引入@vue/test-utils的config,并进行配置： config.stubs.transition = false config.stubs[’transition-group’] = false4、使用了element-ui的按钮等元素，绑定原生事件（比如点击事件）时，加上.native：@click.native=“click"5、有异步的内容，比如延时定时器，不要忘记done()，否则不会被捕获；还有很多不知为何会发生的错误，也许是我的打开方式不对？小伙伴们开发中有好的方法欢迎指正～～本文结束啦～希望对你有所帮助。。学无止境，与诸君共勉～～