关于单元测试前端单元测试也可以称为自动化测试，测试驱动开发，单元测试对于前端开发是非常必要的。端模块化，框架，功能库是的，只要做好模块的解耦和功能划分，就可以愉快的进行单元测试。一个好的单元测试（综合功能、错误抛出和边缘覆盖）可以成为项目开发或修改完成后判断项目能否“安全上线”的重要依据之一。引入跨平台测试开发和运行单元测试通常是在开发者的电脑上完成的，任何电脑都可以安装的浏览器远不能满足测试的兼容性要求。如果需要各种平台的电脑，也是一种人力物力的浪费。那么有没有什么工具可以在所有平台上自动运行本地测试代码，跟踪完整的测试过程，并将日志信息反馈到本地呢？是的！那就是云测试工具。目前国内外有很多云测试工具和解决方案，因为云测试的本质是运行远程虚拟机，需要大量的服务器和完整的设备，所以大多是收费的。这里推荐SauceLabs。虽然也是收费的，但是新注册的账号可以免费提供8个并发测试，90小时的自动测试时间，而且操作简单，用户体验非常友好。也有很多著名的前端框架，比如Vue。使用它进行兼容性测试。本文将详细介绍如何使用云测试工具SauceLabs进行跨平台JavaScript单元测试，让你的代码轻松通过所有版本的WindowsIE、MacSafari和各种移动设备浏览器。之后还可以生成浏览器测试状态矩阵：主流的JavaScript测试框架在SauceLabs上都有文档和配置说明，其中Karma是最简单易懂的配置测试框架之一。下面将详细介绍Karma+SauceLabs。平台单元测试的整个过程，以及我在使用中遇到的一些问题和解决方法，如果你不使用Karma，可以在这里找到其他测试框架的配置方法。以下步骤的前提是您已经编写了测试用例。如果你不知道如何编写和组织单元测试，可以参考js-test-workflows的简单示例开始学习JavaScript单元测试。配置步骤1、安装Karma整个SauceLabs测试是基于Karma配置文件karma.sauce.js完成的，通过插件karma-sauce-自动完成连接远程服务器和提交测试代码发射器。如果你的项目已经安装了Karma和断言库，可以忽略这一步。安装测试框架Karmanpmintalkarma-g，安装测试断言库jasmine（也可以选择assert、should等其他库）npmintalkarma-jasmine2。安装karma-sauce-launcher这个工具是连接Karma和SauceLabs的桥梁。它的作用是将本地的测试代码提交到云端测试虚拟机，告诉SauceLabs启动哪个系统、哪个版本的浏览器来运行我们的测试代码，并将测试结果、错误信息和trace堆栈返回到本地终端，一旦测试失败，可以根据返回的信息调试错误码。npmintalkarma-sauce-launcher--save-dev3。注册SauceLabs并获得访问KeySauceLabs免费注册地址：https://saucelabs.com/signup/...注册完成后登录账号，进入Dashboard，点击右下角用户名，选择弹出菜单中的UserSetting进入用户设置：找到USERNAME和AccessKey：在项目目录下创建一个sauce.json文件记录上面的userName和accessKey，这两个字段用于认证连接SauceLabs服务器.{“用户名”：“xxxx”，“accesskey”：“xxx”}4。编写测试配置文件，在项目目录下添加测试配置文件karma.sauce.js。这个文件是整个跨平台测试的主文件，也是Karma的入口文件，配置内容如下：varsauce=require('./sauce.json');//引入userName和key//生成aSauceLabs浏览器配置信息，可以指定运行系统和浏览器版本functioncreateCustomLauncher(browser,platform,version){return{base:'SauceLabs',browserName:browser,platform:platform,version:version};}//定义所有需要上云测试的平台和浏览器//名称定义随意，SauceLabsonly对应的浏览器会根据配置内容启动//所有完整的平台设备列表：https://saucelabs.com/platformsvarcustomLaunchers={//主流浏览器sl_win_chrome:createCustomLauncher('chrome','Windows7'),sl_mac_chrome:createCustomLauncher('chrome','OSX10.10'),sl_win_firefox:createCustomLauncher('firefox','Windows7'),sl_mac_firefox:createCustomLauncher('firefox','OSX10.10'),sl_mac_safari:createCustomLauncher('safari','OSX10.11'),//移动设备浏览器sl_ios_8_safari:createCustomLauncher('iphone',null,'8.4'),sl_ios_9_safari:createCustomLauncher('iphone',null,'9.3'),sl_android_4_2:createCustomLauncher('安卓id',null,'4.2'),sl_android_5_1:createCustomLauncher('android',null,'5.1'),//MicrosoftEdgesl_edge:createCustomLauncher('MicrosoftEdge','Windows10'),//IE浏览器sl_ie_9:createCustomLauncher('internetexplorer','Windows7','9'),sl_ie_10:createCustomLauncher('internetexplorer','Windows8','10'),sl_ie_11:createCustomLauncher('internetexplorer','Windows10','11')};//业力配置parameters//https://karma-runner.github.io/1.0/config/configuration-file.htmlmodule.exports=function(KarmaConfig){//将SauceLabs提供的username和accesskey放入环境变量中if(!process.env.SAUCE_USERNAME||!process.env.SAUCE_ACCESS_KEY){process.env.SAUCE_USERNAME=sauce.username;process.env.SAUCE_ACCESS_KEY=sauce.accesskey;}//设置测试的超时时间varmaxExecuteTime=5*60*1000;KarmaConfig.set({//加载测试文件根目录basePath:'',//使用的断言库框架:['jasmine'],//告诉Karma加载哪些js文件到浏览器运行测试文件：['../src/**/*.js','../test/**/*.js'],//SauceLabs配置，这里只需要配置几个重要的字段，完整的字段可以参考：//https://wiki.saucelabs.com/display/DOCS/Test+Configuration+OptionssauceLabs:{//测试结果是否公开，如果要生成矩阵，必须是publicpublic:'public',//测试时是否录制虚拟机运行视频recordVideo:false,//是否录制测试时虚拟机的镜像recordScreenshots:false,//测试名称testName:'Crossbrowserstest',//测试记录号，可以是任意字符，如果要生成矩阵图，build不能为空build:'build-'+Date.now()},//自定义运行测试的SauceLabs浏览器customLaunchers:customLaunchers,browsers:Object.keys(customLaunchers),//测试处理reporter:['progress','saucelabs'],//***超时captureTimeout:maxExecuteTime,browserNoActivityTimeout:maxExecuteTime});}5.启动SauceLabs测试，在终端输入：karmastartkarma.sauce.js本地测试代码会在SauceLabs云端运行。注意虽然免费用户只有8个并发测试连接数，但并不代表一次只能测试8个浏览器。上面的customLaunchers一共定义了13种不同的浏览器。他们会先执行其中的8个，等空闲的时候再执行剩下的，直到全部运行完。云测试后的信息如下：Chrome54.0.2840(Windows70.0.0):Executed143of143SUCCESS(1.365secs/1.176secs)IE10.0.0(Windows80.0.0):Executed143of143SUCCESS(1.313secs/1.118secs)IE9.0.0(Windows70.0.0）：执行143OF143SUCCESS（1.312SECS/1.113SECS）FIREFOX47.0.0.0（MACOSX10.10.0.0）：执行143of143success（2.016Secs/2.016Secs/2.058Secs/2.058Secs）Chrolter5.248840.24.0.0.2840.2840.11440.54.2840.54.54.54.54.54.540.540.54.540.54.540.54.540.540.540.540.540.540.54.540.540.540.540.5440.540.540.，chr.0.0):Executed143of143SUCCESS(1.365secs/1.176secs)IE10.0.0(Windows80.0.0):Executed143of143SUCCESS(1.313secs/1.118secs)IE9.0.0(Windows70.0.0):Executed143of143SUCCESS(1.XFire103se1.secX47)X10.0）：执行143OF143SUCCESS（2.016Secs/2.058secs）Chrome54.0.2840（MACOSX10.10.5）：Execueted143Of143Of143Success（1.724Secs/1.724secs/1.485secs）Windows70.0.0):Executed143of143SUCCESS(2.3secs/1.25secs)Safari9.1.2(MacOSX10.11.6):Executed143of143SUCCESS(1.164secs/1.173secs)Edge14.14393.0(Windows100.0.0):Executed143of143SUCCESS(1.441secs/1.301secs)ChromeMobile39.0.0(Android5.1.0):Executed143of143SUCCESS(1.815secs/1.52secs)Android4.2.0(Android4.2.0):Executed143of143SUCCESS1Mobile1s.9(seaf1.9)Executed143of143SUCCESS(2.328secs/1.061secs)6.获取测试状态和矩阵图等所有浏览器都运行测试后，SauceLabs会生成状态和矩阵svg，方便查看和发布代码测试状态，以及也可以在https查看状态结果在https://saucelabs.com/u/YOUR_...状态图标
