xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > 前端单元测试入门04,利用Karma进行前端单元测试

前端单元测试入门04,利用Karma进行前端单元测试

发布时间:2019-05-24 06:44编辑:计算机尝试浏览(132)

    Karma

    合法介绍

    A simple tool that allows you to execute JavaScript code in multiple real browsers.

    前端单元测试入门04,利用Karma进行前端单元测试。即三个允许你在四个实际浏览器中施行js代码的粗略工具。
    采取了karma之后,大家事先为了Enzyme的mount而要求的条件就没有须要用jsdom去模拟了,因为karma正是将测试js在真正浏览器中施行的。

    安装:

    npm i --save-dev karma karma-chai karma-webpack karma-mocha karma-chrome-launcher
    npm i karma -g
    npm install -g karma-cli //window命令行运行,如果显示不能发现webpack那么需要安装这个
    

    接下来配置karma:

    karma init
    

    以下为自己的配置:

    // Karma configuration
    // Generated on Fri Feb 02 2018 10:07:20 GMT 0800 (中国标准时间)
    
    module.exports = function (config) {
    config.set({
    
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',
    
    
        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['mocha','chai'],
    
    
        // list of files / patterns to load in the browser
        files: [
          'src/**/*.js',
          'src/**/*.jsx',//不知道为什么,karma无法识别jsx
          'test/*.test.js'
        ],
    
    
        // list of files / patterns to exclude
        exclude: [],
    
    
        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
          'src/**/*.js': ['webpack'],
          //'src/**/*.jsx':['webpack'],//不知道为什么,karma无法识别jsx
          'test/*.test.js': ['webpack']
        },
    
    
        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress'],
    
        // web server port
        port: 9876,
    
    
        // enable / disable colors in the output (reporters and logs)
        colors: true,
    
    
        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN ||           config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,
    
    
        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,
    
    
        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['Chrome'],
    
    
        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false,
    
        // Concurrency level
        // how many browser should be started simultaneous
        concurrency: Infinity,
        webpack: {
          module: {
            rules: [{
                test: /.jsx?$/,
                exclude: /(node_modules)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['env', 'react']
                  }
                }
              },
              {
                test: /.(gif|png|jpe?g|svg)$/i,
                use: [{
                  loader: 'file-loader',
                  options: {
                      name: '[name].[ext]',
                      outputPath: 'images/'
                  }
                }]
              },
              {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
              },
              {
                test: /.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
              }
            ]
          }
        }
        })
    }
    

    有个别小嫌疑,在用kamar的时候正则表明式匹配不到jsx文件,于是将品种里面包车型地铁jsx文件都改为js就好了。

    因为更欣赏jest的格局,所以对karma这种使用到浏览器的未有做越来越深远的钻研,只是有所了然就够了。

    使用Karma实行前端单元测试

    单元测试在程序支付进度中,起到很关键的效率。一般的话,单元测试的功用有:

    • 56net必赢手机游戏版,使代码能够放心修改和重构;
    • 迫使技术员从调用者而不是达成者的角度设计软件模块;
    • 迫使程序员将软件模块写得轻易测试和调用,从而利于解耦;
    • 测试本人可用作被测代码的用法说明,从而代替了一片段文书档案功效。

    在前端开采中,测试平常是被忽略。但随着前端工程化的拓宽,单元测试也更是受到推崇了。

    前者测试存在的标题

    在讲Sinon从前,我们得先讲一下在就学了Mocha、chai以及enzyme之后,大家的前端测试还存在的部分题目。
    诸如前台测试要求与后台交互,获取后台数据后再依赖对应数据开始展览测试。
    又举个例子2个函数测试正视另三个函数,大家能够根据测试的目标去模拟另2个函数,讲两个的测试分开,从而达到测试中也能解耦的目标。

    Karma简介

    Karma是由谷歌共青团和少先队支付的壹套前端测试运维框架。它差别于测试框架(Mocha,Jasmine,QUnit等),运维在那一个测试框架之上。Karma是直接作为一个Test Runner而留存的。该工具可用于测试全数主流Web浏览器,也可集成到 CI (Continuous integration)工具,也可和别的代码编辑器一齐行使。

    Karma 可以在分裂的桌面或位移道具浏览器上,或在频频集成的服务器上测试 JavaScript 代码。Karma 支持 Chrome、ChromeCanary、 Safari、Firefox、 IE、Opera、 PhantomJS,知道什么捕获浏览器正利用的暗中认可路线,这么些路子大概在运营器配置文件被忽视(overridden)。Karma 正是三个足以和体系测试框架合营的测试实践进度管理工科具,它有针对性Jasmine、 Mocha 和AngularJS 的适配器,它也足以与 Jenkins 或 Travis 整合,用于施行不断集成测试。

    测试帮助工具Sinon

    Sinon是用来救助我们开始展览前端测试的,在我们的代码供给与别的系统也许函数对接时,它能够一成不改变那几个境况,从而使我们测试的时候不再依附那么些场景。
    Sinon有至关心重视要有四个方法帮忙大家实行测试:spy,stub,mock。

    什么样时候利用Karma

    • 在实际浏览器里测试
    • 在三种浏览器里开展测试(包蕴桌面、移动)
    • 在地方开采情形进行测试
    • 想在不断集成CI内运转测试
    • 想在每趟保存代码时,自动试行测试
    • 热衷于terminal小黑屏
    • 不想陷入令人发指痛恨的测试生活
    • 想选用Istanbul自动生成coverage报告
    • 想在源码中应用RequireJS

    Sinon的安装

    在教学用法前,先看一下大家的测试项目结构:
    56net必赢手机游戏版 1

    下一场这里的测试例子用的是官网络的例子,once.js的剧情是:

    export default function once(fn) {
        var returnValue, called = false;
        return function () {
            if (!called) {
                called = true;
                returnValue = fn.apply(this, arguments);
            }
            return returnValue;
        };
    }
    

    once.test.js的开始和结果为空。
    那么随着安装Sinon

    npm install --save-dev sinon
    

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:前端单元测试入门04,利用Karma进行前端单元测试

    关键词: web前端之路 前端开发 前端小咖

上一篇:MySQL慢查询日志总结

下一篇:没有了