搭建 karma + jasmine 测试环境

leocoder

发布于 2024-01-29 08:27:49

740

发布于 2024-01-29 08:27:49

在前端开发的过程中，我们会写很多的功能函数，这样就会涉及到对这些功能函数进行单元测试，而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);
  });
});