最近闲着没事，开始摸索前端单元测试。一是毫无准备，二是单元测试确实可以用在实际项目中。这样既可以提高开发效率，提高代码质量，又可以独立测试JS，不需要页面，不需要依赖其他第三方。为什么需要单元测试这里首先要知道单元测试的目的和结果：让代码健壮、高质量，兼容各种关键点；减少QA测试报告的反馈，提高自我影响力；以确保代码干净清晰。如果你需要深究为什么需要单元测试，那我们就可以开始说说实际项目开发中遇到的一些问题：QA不断反馈代码有bug（这时候你在投入开发，然后你被打扰了……）；有BUG时，叠加代码修复BUG（代码越来越难维护了。。。）；开发了一个模块，但是没有提供调试测试的页面；你开发的功能每次都有很多小BUG（个人影响力下降。。。）。好了，我罗列了这么多原因，相信你已经开始心虚了，回头继续搬砖，看看代码有没有问题。如果你看起来平静，上帝，请在我的膝盖上休息。总结：单元测试的目的只有一个，就是判断是否适合使用。从字面上看，测试就是检查对象是否符合标准。达标为合格，不达标为不合格。产品有这样的需求，如果结果是3，可以比较target，返回的是有效的数字类型，我们看个栗子：/***得到a除以b的结果*@param{[Number]}a[number]*@param{[Number]}b[number]*@return{[Number]}[resultnumber]*/functiondivision(a,b){returna/b;}//testcodefunctiontest(){varresult=division(6,2);if(result===3){console.log('pass');}else{console.log('失败');}}上面的代码乍一看没有问题，可以满足产品的需求，但是问题来了。如果b为0，则此模块中将存在错误。同时，如果下次需要达到其他值，就通过了，那就要修改测试代码了。这样的测试代码也太不健康了。于是就有了下面的方式：/***得到a除以b的结果*@param{[Number]}a[Number]*@param{[Number]}b[Number]*@return{[Number]}[结果编号]*/functiondivision(a,b){if(b===0){return0;}else{返回a/b;}}functiontest(name,result,expect){if(result===expect){console.log(name+'->pass');}else{console.log(name+'->fail');}}test('正常数',division(6,2),3);test('零',division(6,0),0);如果需要传递期望值10，可以这样做：test('正常数是10',division(20,2),10);单元测试环境搭建及代码示例但是随着前端的快速发展最后，出现了很多测试框架。下面我将演示我在实际项目中使用的测试框架环境配置karma+jasmine。业力和茉莉我就不介绍了。网上搜了很多介绍：安装node环境依赖node作为基础环境。安装完成后，在控制台运行如下命令，查看是否安装成功。node-v新建目录并初始化项目配置package.jsonnpminit在package.jsonscripts中添加如下内容：{}:"test":"karmastartkarma.conf.js"然后安装测试框架npm安装karma-gnpminstalljasmine--save-devnpminstallkarma-jasmine--save-devnpminstallkarma-chrome-launcher--save-devnpminstalljasmine-core--save-dev或者一次性安装npminstallkarma-gnpminstalljasminekarma-jasminekarma-chrome-launcherjasmine-core--save-dev运行以下命令新建一个karma.conf.js（根目录下不需要）karmainit文件内容及说明：/***karma自动化测试参数配置*/module.exports=function(config){config.set({//基本路径，在文件中使用，排除属性basePath:'',//可用测试框架：https://npmjs.org/browse/keyword/karma-adapterframeworks:['jasmine'],//需要加载到浏览器的文件列表files:['./src/**/*.js','./test/unit/specs/*.spec.js'],//排除文件列表exclude:['karma.conf.js'],//在浏览器使用之前处理匹配文件//可用的预处理：https://npmjs.org/浏览/关键字/业力-预处理器预处理器：{}，//使用测试结果报告器//可能的值：“点”、“进度”//可用的报告器：https://npmjs.org/browse/keyword/karma-reporter报告器：['progress'],//Web服务器端口port:9876,//启用或禁用输出报告或日志中的颜色colors:true,/***loglevel*possiblevalues:*config.LOG_DISABLE//nooutputinformation*config.LOG_ERROR//只输出错误信息*config.LOG_WARN//只输出警告信息*config.LOG_INFO//输出所有信息*config.LOG_DEBUG//输出调试信息*///可能的值：config.LOG_DISABLE||配置.LOG_ERROR||配置.LOG_WARN||配置.LOG_INFO||config.LOG_DEBUGlogLevel:config.LOG_INFO,//启用或禁用自动检测文件更改以进行测试autoWatch:true,//用于测试的浏览器//可用浏览器：https://npmjs.org/browse/keyword/karma-launcherbrowsers:['Chrome'],//启用或禁用持续集成模式//设置为true，Karma将打开浏览器，执行测试并最终退出singleRun:false,//并发级别（启动的浏览器数）concurrency:Infinity,//依赖插件plugins:['karma-chrome-launcher','karma-jasmine']})}新建源代码和测试代码目录，目录结构如下：project-node_modules-*(nodemodule)-src-FQA-index.js-test-unit-specs-*.spec.js-karma.conf.js-package.json测试代码index.jssource/**-测试map方法回调和parseInt参数使用-@return{[Array]}[Array]*/functioncheckMap(){varnums=['1','2','3'];returnnums.map(parseInt);}/**-testnullisObject,commonobject相同-@return{[Array]}[Array]*/functiontypeofAndInstanceOf(){varresult=[];result.push(typeofnull);result.push(nullinstanceofObject);returnresult;}/**-检查运算符优先级-@return{[string]}[returnstring]*/functioncheckOperators(){varresult='autoTest';result='Valueis'+(result==='autoTest')?'有事':'无事';返回结果;}fqa.spec.js测试代码码/**-测试index.jscheckMap方法-细节：-parseInt(val,base)，base为2~36，否则value等于NaN。*/describe('testmapandcallbackparseInt',function(){it('数组调用map',function(){varnums=checkMap();console.log(nums);expect([1,NaN,NaN]).toEqual(nums);});});/**-测试index.jstypeofAndInstanceOf方法-详细信息：-typeofnullqeual'object'，但nullinstanceofObject等于false，因为nullConstructor不是Object。*/describe('testnullisobject',function(){it('nullobject',function(){varresult=typeofAndInstanceOf();console.log(result);expect(['object',false]).toEqual(result);});});/**-测试index.jscheckOperators方法-细节：-比较运算符优先级，+gt?。*/describe('testnullisobject',function(){it('testoperatorpreceence',function(){varresult=checkOperators();console.log(resul吨）；期望（'某事'）.toEqual（结果）；});});运行sudonpmruntest执行测试代码"scripts":{"test":"karmastartkarma.conf.js"}结果:Answernpmruntest实际上运行了package.json中配置的命令:"test":"karmastartkarma.conf.js》describe定义了测试模块，它测试一个单元，describe可以同时定义多个，这样就可以做一系列的单元测试，详见官方文档karma.conf.js测试方法。配置文件设置测试时需要加载的文件：['./src/**/*.js','./test/unit/specs/*.spec.js']总结希望看完这篇文章，你也可以入门，开始写一些单元测试代码，提高代码质量，提升你的周边影响力。本文内容描述了在实际项目开发中遇到的问题。我们可以通过单元测试来减少此类问题的发生，提高代码的安全性和代码质量，从而保证产品的稳定性。点击此处查看更多文章。
