#單元測試#以karma+mocha+chai 爲測試框架的Vue webpack項目（一）

時間 2019-11-17

標籤單元測試 karma+mocha+chai karma mocha chai 框架 vue webpack 項目简体版

原文原文鏈接

目標：javascript

爲已有的vue項目搭建 karma+mocha+chai 測試框架
編寫組件測試腳本
測試運行經過
抽出共通

1、初始化項目html

新建項目文件夾並克隆要測試的已有項目 webAdmin-webvue

轉到項目根目錄，安裝項目依賴：java

#npm install

　誰安裝失敗就單獨再安裝它（如：chromedriver安裝失敗，#npm install chromedriver）　webpack

2、搭建karma+mocha+chai測試環境git

一、安裝插件github

#npm install karma --save-dev
#npm install -g karma-cli
#npm install --save-dev mocha
#npm install --save-dev karma-mocha
#npm install --save-dev chai                      // 斷言庫
#npm install --save-dev karma-chai
#npm install --save-dev sinon-chai
#npm install --save-dev sinon
#npm install --save-dev karma-sinon-chai
#npm install --save-dev karma-webpack
#npm install --save-dev karma-coverage
#npm install --save-dev karma-spec-reporter
#npm install --save-dev karma-sourcemap-loader
#npm install --save-dev nib
#npm install --save-dev opn
#npm install --save-dev karma-chrome-launcher

二、生成配置文件 karma.conf.jsweb

以前全局安裝了karma-cli，便於引導咱們生成karma.conf.js配置文件。chrome

 #karma init

　　　配置文件已經自動生成，位置就在文件根目錄。若用命令【#karma init 自定義配置名.conf.js】，則生成的配置文件名稱就是「自定義配置名.conf.js」。npm

三、在項目根目錄下運行karma

#karma start karma.conf.js

運行結果：

目前/test/unit/下尚未*specs.js文件，故而顯示的結果是執行0錯誤0。

四、編寫簡單的測試case 【正確順序：先修改karma配置文件（轉至本文 5），再編寫測試腳本，進行karma測試】

在/src 下新建測試代碼文件夾 testSrc，新建測試文件add.js，文件結構以下：

/src/testSrc/add.js 內容以下：

　　/** 　　 * 加法 　　* @param x 參數1 　　* @param y 參數2 　　*/ 　　export function add (x, y) { 　　return x + y 　　}

編寫對應的測試腳本 /test/unit/specs/add.specs.js :

　　import {add} from '@/testSrc/add.js'
　　var expect = require('chai').expect

　　describe('加法函數的測試', function() {
  　　it('1 加 1 應該等於 2', function() {
   　　 expect(add(1,1)).to.be.equal(2)
  　　})
　　})

測試運行：#karma start
測試結果：報錯 —— import declarations may only appear at top level of a module

緣由分析：測試腳本沒有被webpack打包，也能夠說是karma沒有配置webpack配置信息，因此karma start的時候不能直接用 import語法。
解決方法：修改karma配置文件 karma.conf.js【轉至本文 五、修改karma配置文件】
修改配置文件後，再次運行 #karma start

終端運行過程：

[user1@localhost webAdmin-web]$ karma start
webpack: wait until bundle finished:                            // 等待webpack打包綁定完成
Hash: f11981cb4ab6cc3cc7ca
Version: webpack 2.7.0
Time: 11959ms
                       Asset     Size  Chunks                    Chunk Names
  static/img/401.089007e.gif   164 kB          [emitted]         
  static/img/404.a57b6f3.png  98.1 kB          [emitted]         
                 0.bundle.js  93.8 kB       0  [emitted]         
                         app  5.46 MB       1  [emitted]  [big]  app
test/unit/specs/add.specs.js   216 kB       2  [emitted]         test/unit/specs/add.specs.js

..... //很是長的一段文件解析過程

ERROR in ./test/unit/specs/add.specs.js // 錯誤信息

✘ http://eslint.org/docs/rules/no-undef 'describe' is not defined
test/unit/specs/add.specs.js:4:1
describe('加法函數的測試', function() {
^

✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses
test/unit/specs/add.specs.js:4:29
describe('加法函數的測試', function() {
^

✘ http://eslint.org/docs/rules/no-undef 'it' is not defined
test/unit/specs/add.specs.js:5:3
it('1 加 1 應該等於 2', function() {
^

✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses
test/unit/specs/add.specs.js:5:30
it('1 加 1 應該等於 2', function() {
^

✘ http://eslint.org/docs/rules/comma-spacing A space is required after ','
test/unit/specs/add.specs.js:6:17
expect(add(1,1)).to.be.equal(2)
^

✘ http://eslint.org/docs/rules/eol-last Newline required at end of file but not found
test/unit/specs/add.specs.js:8:3
})
^

✘ 6 problems (6 errors, 0 warnings)

webpack: Failed to compile. // webpack：編譯失敗

// 接下來是karma測試的結果，見下面的截圖

查看覆蓋率報告文件 /test/unit/coverage/

找到對應的報告文件，複製文件路徑，在瀏覽器打開查看：

　瀏覽器中：

修改錯誤：詳見 解決未安裝unit測試和jest的Vue項目運行karma start時的錯誤

五、修改karma配置文件

主要是在 karma.conf.js 中引入webpack配置、修改框架frameworks信息、預處理器、新增插件、修改reporters、新增coverageReporter（karma測試結果覆蓋率報告文件）。修改後的配置文件以下：

// Karma configuration
// Generated on Mon Jan 15 2018 20:50:28 GMT+0800 (CST)

// 引入webpack配置
const webpackConfig = require('./build/webpack.base.conf');

module.exports = function(config) {
  config.set({
    // 引入webpack
     webpack: webpackConfig,

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use -- 修改，增長'sinon-chai'
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'sinon-chai'],


    // 測試入口文件--測試腳本
    // list of files / patterns to load in the browser
    files: [
      'test/unit/**/*.specs.js'
    ],


    // list of files / patterns to exclude
    exclude: [
    ],


    // 預處理器--增長webpack、sourcemap、coverage
    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/unit/**/*.specs.js': ['webpack', 'sourcemap', 'coverage']
    },


    // 新增插件
    plugins: [
      'karma-webpack',
      'karma-sourcemap-loader',
      'karma-mocha',
      'karma-chai',
      'karma-sinon-chai',
      'karma-firefox-launcher',
      'karma-chrome-launcher',
      'karma-spec-reporter',
      'karma-coverage'
    ],

    // test results reporter to use
    // possible values: 'dots', 'progress'--新增spec、coverage
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['spec', 'coverage', 'progress'],

    // 新增覆蓋率報告
    coverageReporter: {
      // dir: './coverage',
      dir: './test/unit/coverage',
      reporters: [
        { type: 'html', subdir: 'report-html' },
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    },

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome', 'Firefox'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

六、抽出共通

--- 下一篇學習對組件進行測試。

資料：

一、karma官網/intro/installation【安裝】

二、karma官網/intro/Configuration 【配置】

三、Vue.js 項目使用 Karma 作自動化UI測試小結 #58

四、測試框架 Mocha 實例教程