前端单元测试(未完。。)

基础知识

  • karma作用为提供浏览器测试环境,mocha为真正测试框架,chai为断言库

测试用例基础

  • describe块称为"测试套件"(test suite),表示一组相关的测试。它是一个函数,第一个参数是测试套件的名称("加法函数的测试"),第二个参数是一个实际执行的函数。
    describe钩子:

    `describe('hooks', function() {
       
       before(function() {
         // 在本区块的所有测试用例之前执行
       });
       
       after(function() {
         // 在本区块的所有测试用例之后执行
       });
       
       beforeEach(function() {
         // 在本区块的每个测试用例之前执行
       });
       
       afterEach(function() {
         // 在本区块的每个测试用例之后执行
       });
       
       // test cases
    });`
  • it块称为"测试用例"(test case),表示一个单独的测试,是测试的最小单位。它也是一个函数,第一个参数是测试用例的名称,第二个参数是一个实际执行的函数。

    describe('加法函数的测试', function() {
      it('1 加 1 应该等于 2', function() {
        expect(add(1, 1)).to.be.equal(2);
      });
    });

mocha

  • 断言库:should.js - BDD style shown throughout these docs
    expect.js - expect() style assertions
    chai - expect(), assert() and should-style assertions
    better-assert - C-style self-documenting assert()
    unexpected - "the extensible BDD assertion toolkit"

karma环境搭建(karma+mocha+chai+webpack)

  • 依赖模块安装:
npm install karma-cli -g
cnpm install karma karma-chai karma-mocha karma-webpack webpack babel-loader babel-core mocha chai karma-chrome-launcher --save-dev
  • 生成karma.conf.js文件
karma init karma.conf.js
  • 根据项目需求修改karma.conf.js配置
  • 启用karma
karma start karma.conf.js

注意:配置文件:files中设置included:false,需要手动加载测试文件,不会自动加载即不会自动测试
使用coverage时,webpack配置:在webpack中需加:

{
        test: /\.js$/,
        loader: 'babel-loader',
        query:{
          plugins:['istanbul']
        }
      }

mocha

karma

chai文档

karma-coverage文档

karma笔记

mocha笔记

chai笔记

相关推荐