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