博客 / 詳情

返回

前端單元測試(未完。。)

基礎知識

  • 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筆記

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.