karma的使用总结

一.karma的安装和运行：

1.安装：

1. 全局安装karma-cli
   • 从而得到全局的karma命令

npm install -g karma-cli
复制代码

2. 在项目中安装karma依赖

npm install -S karma
复制代码

3. 安装插件
   • karma-mocha：若想驱动mocha框架进行测试，就必须安装karma-mocha；其余不一样的单元测试框架分别也有本身对于的插件
   • karma-chrome-launcher：提供了karma与chrome的适配器
     • karma选择什么浏览器进行测试，就须要安装对于的适配器插件

npm install -S karma-mocha karma-chrome-launcher
复制代码

2. karma配置：

• 命令行输入karma init，进行配置选择

1. Which testing framework do you want to use ? (mocha)
2. Do you want to use Require.js ? (no)
3. Do you want to capture any browsers automatically ? (Chrome)
4. What is the location of your source and test files ? (https://cdn.bootcss.com/jquery/2.2.4/jquery.js, node_modules/should/should.js, test/**.js)
5. Should any of the files included by the previous patterns be excluded ? ()
6. Do you want Karma to watch all the files and run the tests on change ? (yes)
复制代码

• 下一步下一步结束后会生成配置文件karma.conf.js
  • 其中重要的几个配置项：
    1. frameworks：使用到的框架
       • 例如，若是要驱动mocha框架进行测试，这里就要使用到mocha
    2. files：能够将待测试代码以及它们须要的依赖加载进来
    3. browsers：须要启动什么浏览器进行测试
    4. autoWatch：是否监听文件变更，若有变更则从新运行单测
    5. singleRun：是否只运行一次测试（设为true的话，浏览器窗口不会一直维持在，打开进行一次测试后就会关闭了）
       • 若是singleRun要配合其余的持续集成工程来使用，必需要设置singleRun=true，由于持续集成时不须要屡次运行测试

// karma.conf.js

module.exports = function(config) {
    config.set({
        // 跟路径，后面配置的基本全部相对路径都会根据这个路径来构造
        basePath: '',
        // 使用到的框架，目前karma支持的框架详见 https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['mocha'],
        // 会在浏览器中执行的代码：
        files: [
            'test/main.js',
            {
                pattern: 'src/**/*.js',
                included: false             // false 表示初始化的时候不会使用 script 标签直接将相关 js 引入到浏览器，须要本身写代码加载
            }
        ],
        // 须要从files中排除掉的文件
        exclude: [],   
        // 须要作预处理的文件，以及这些文件对应的预处理器
        preprocessors: {
            'src/**/*.js': ['babel', 'coverage'],
            'test/**/!(main).js', ['babel', 'coverage'],
            'node_modules/protectobject/src/**/*.js': ['babel']
        },
        // babel预处理器的配置
        babelPreprocessor: {
            options: {
                presets: ['es2015', 'stage-0'],
                plugins: ['transform-decorators-legacy', 'transform-es2015-modules-amd']
            }
        },
        // 覆盖率报告器配置：
        coverageReporter: {
            type: 'html',
            dir: 'coverage'
        },
        // 实际使用什么报告器，全部可用的报告器详见 https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['dots', 'coverage'],
        // 服务器端口号
        port: 9876,
        // 在输出内容（报告器和日志）中启用/禁用颜色
        colors: true,
        // 日志级别，可取值 config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO
        // 启动/禁用监视文件变化从新执行测试的功能
        autoWatch: true,
        // 要测试的目标环境
        bowers: ['Chrome', 'Firefox', 'Safari'],
        // 启动/禁用持续集成模式，启动的话，karma捕获浏览器，运行测试并退出
        singleRun: false,
        // 并发级别，应该同时启动多少个浏览器
        concurrency: Infinity
    })
}
复制代码

3.开始自动化测试：

karma start
复制代码

运行成功：

二.注意点：

1.karma测试时，待测试文件的依赖文件如何引入：

1. 方式1：配置files：
   • 在项目初始化时What is the location of your source and test files ?，即将要测试的文件，及测试文件所需的依赖项写入
   • 这样子，在测试时，测试文件就能直接使用到这些依赖
   • 示例：
     • 测试文件test/main.js须要使用到jquery.js
     • 则在karma.conf.js的files中填入[jquery.js, test/main.js]
     • 这样，在测试时，test/main.js无需手动引入jquery.js也能使用jquery.js了
2. 方式2: 配置使用require.js
   • 配置时开启Do you want to use Require.js ? (yes)
   • 注意：
     • 若测试文件使用的时Node.js 的require()语法来引入依赖，在使用Karma测试时就会报错Uncaught ReferenceError: module is not defined，
     • 这是由于Karma是运行在浏览器端的，不支持Node.js语法