搭建 karma + jasmine 测试环境

在前端开发的过程中,我们会写很多的功能函数,这样就会涉及到对这些功能函数进行单元测试,而karma就是一个很好用的可以在浏览器环境中进行测试的集成工具。

1. 什么是 karma

karma 是由Angular团队开发的一款测试工具,帮助开发者更好更快速地在多种环境下执行测试代码,拿到测试结果。在运行的时候,它会自动启动配置好的浏览器,同时也会启动一个 node 服务器,然后在启动好的浏览器中执行测试代码,并将测试代码执行结果传回给 node 服务器,然后 node 服务器在打印出收到的执行结果。

2. 安装 karma

$ npm  install karma -D

这里安装到项目路径下就可以了(-D 是 --save-dev 的简写)。

3. 初始化

$ ./node-modules/.bin/karma init

这里如果不想每次都执行本地路径下的 karma 命令,可以在全局安装 karma-cli

$ npm install karma-cli -g

以后就可以在任何路径执行 karma start 并且运行的 karma 都是在当前项目下安装的版本。

在 init 时会让你选择一些配置项:

test framework ---- 我这里选择的是jasmine,它是一款JavaScript断言测试库
use Require.js ---- 根据个人情况,我选择的是no
capture any browsers automatically ---- 选择浏览器,我选择的是无头浏览器PhantomJS
location of your source files ---- 为空
any of files included by the previous patterns be excluted ---- 为空
karma to watch all files and run the tests on change ---- 是否监测,我选择的是no

在选择完所有配置项后,会自动生成karma.conf.js配置文件。

4. 根据配置项的选择安装插件

(1) 测试框架选择的是jasmine,安装步骤如下:

$ npm install jasmine-core karma-jasmine -D

这里要装两个,一个是jasmine的核心,另一个是karma对jasmine的封装。

(2) 浏览器选择的是PhantomJS,安装步骤如下:

$ npm install karma-phantomjs-launcher -D

(3) 如果涉及到对以ES6编写的代码进行测试,就要安装Babel及其相关插件:

$ npm install babel-cli babel-preset-env babel-plugin-transform-es2015-modules-umd -D
$ npm install karma-babel-preprocessor -D

(4) 安装生成代码覆盖率报告的插件:

$ npm install karma-coverage -D

5. 修改karma配置文件

// karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      './src/**/*.js',
      './test/**/*.spec.js'
    ],
    exclude: [
    ],
    preprocessors: {
      './src/**/*.js': ['babel'],
      './test/**/*.spec.js': ['babel', 'coverage']
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['PhantomJS'],
    singleRun: true,
    concurrency: Infinity
  })
}

修改Babel配置文件:

// .babelrc
{
  "presets": ["env"],
  "plugins": ["transform-es2015-modules-umd"],
  "auxiliaryCommentBefore": "istanbul ignore next"
}

6. 写测试文件

// PraiseButton.spec.js
import PraiseButton from '../src/PraiseButton.js';

describe('测试点赞组件', function () {
  it('addOne() 函数', function () {
    var testPraiseButton = new PraiseButton();
    testPraiseButton.addOne();

    expect(testPraiseButton.countNum).toBe(1);
  });
});

7. 运行测试

$ karma start

8. 结束

按照上述步骤,大家应该可以配置好自己的 karma + jasmine 测试环境,如果遇到问题或者文中有写错的地方,欢迎大家来讨论。文章末尾是需要安装模块的链接,大家可以一键直达。

欢迎关注我的公众号

搭建 karma + jasmine 测试环境

参考链接

karma官网 ---- https://karma-runner.github.i...
karma-cli ---- https://www.npmjs.com/package...
karma-jasmine ---- https://www.npmjs.com/package...
jasmine-core ---- https://www.npmjs.com/package...
karma-coverage ---- https://www.npmjs.com/package...

相关推荐