单元测试框架karma学习

单元测试框架karma 学习

单元测试的好处:

1、提高代码可靠性，单元测试覆盖越全，说明代码越可靠

2、保证重构质量，有效的单元测试能降低重构的风险

Karma:前端测试运行框架，karma会运行一个web服务器，将js源代码和测试脚本放到 PhantomJs或Chrome上执行。它可以监控文件的

变化，然后自动执行，通过console.log显式测试结果。Karma为前端自动化测试提供了跨浏览器测试的能力，它集成了Jasmine、

PhantomJS 这些测试套件。

Jasmine:一个行为驱动开发测试框架，不依赖浏览器、dom或者其他JS框架。

使用

分组 describe

用于群组相关的测试，接受两个参数:string和function

string是这个测试套件的标题

function 就是用于实现这个测试套件

示例：

describe('a suite', function(){
    //这是一个测试分组
    it('suite', function(){
        expect(true).toBe(true)
    })
})

测试it

it代表具体的测试，当所有的断言都为true时，则该测试通过，否则测试失败

describe("a suit is just a function", function () {
    var a = 10;
    it("and here is a test", function () {
        var a = true;
        expect(a).toBe(true);
    });
});

期望expect

通过链式Matcher方法来比较实际值是否和预期值一致，如果一致就是测试通过。

desribe('the "toBe" matcher compares with "===" ', function () {
    it("positive expect", function () {
        expect(true).toBe(true);
    });

    it("negative expect", function () {
        expect(false).not.toBe(true);
    });
});

Matchers

都是作为期望的链式调用而使用，用于比较期望值和实际值。其中可以使用 not 进行期望结果的否定。

每个匹配方法在期望值和实际值之间执行逻辑比较，它负责告诉 jasmine 断言的真假，从而决定测试的成功或失败。

肯定断言 expect(true).toBe(true);
否定断言 expect(false).not.toBe(true);

编写第一个测试用例

创建一个 src 目录和一个 test 目录，在其中分别创建 index.js 和 index.spec.js 文件。
我要做的测试内容比较简单，对 index.js 中的两个函数（一个加法函数，一个乘法函数）进行测试。
index.js 文件如下：

// 加法函数
function add(x){
    return function(y){
        return x + y;
    }
}

// 乘法函数
function multi(x){
    return function(y){
        return x * y + 1;
    }
}

index.spec.js 文件如下：

describe("运算功能单元测试",function(){
    it("加法函数测试",function(){
        var add5 = add(5)
        expect(add5(5)).toBe(10)
    });

    it("乘法函数测试",function(){
       var multi5 = multi(5)
        expect(multi5(5)).toBe(25)
    })
})

单测的代码写好后，就可以使用 karma start 来运行单元测试。由于我们的乘法代码中有错误，因此测试结果是这样的：

23 07 2018 15:28:06.122:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js".
23 07 2018 15:28:06.334:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js".
23 07 2018 15:28:06.570:INFO [watcher]: Changed file "E:/demo/karma-test/test/index.spec.js".
PhantomJS 2.1.1 (Windows 8 0.0.0) 运算功能单元测试 乘法函数测试 FAILED
        Expected 26 to be 25.
        <Jasmine>
        test/index.spec.js:9:31
        <Jasmine>
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 (1 FAILED) (0.004 secs / 0.003 secs)
TOTAL: 1 FAILED, 1 SUCCESS

将乘法函数的代码改为正常，再次启用 karma start 进行测试：

1
2
3

23 07 2018 15:30:39.779:INFO [watcher]: Changed file "D:/test/karma-test/test/index.spec.js".
PhantomJS 2.1.1 (Windows 8 0.0.0): Executed 2 of 2 SUCCESS (0.005 secs / 0.003 secs)
TOTAL: 2 SUCCESS

测试覆盖率

karma 的插件 karma-coverage 提供了测试代码覆盖率的支持。
首先你需要安装这个 Karma 插件，然后需要在配置文件的三个地方进行配置。

1	$ npm install karma-coverage --save-dev

修改karma.conf.js配置

// Karma configuration

module.exports = function(config) {
  config.set({
    ...
    // 这里配置哪些文件需要统计测试覆盖率，例如，如果你的所有代码文件都在 src文件夹中，你就需要如下配置。
    preprocessors: {
        'src/*.js': 'coverage'
    },
    // 新增 coverageReporter选项
    // 配置覆盖率报告的查看方式,type查看类型，可取值html、text等等，dir输出目录
    coverageReporter: {
        type: 'html',
        dir: 'coverage/'
    },

    // 添加配置报告选择
    reporters: ['progress','coverage'],
    
    ...
  })
}

再次执行karma start，我们能看到生成了coverage目录，在浏览器中打开目录中的index.html我们能看到覆盖率已经生成。

ChenZehong 发布于 2023-10-16