karma的使用總結

一.karma的安裝和運行：

1.安裝：

1. 全局安裝karma-cli
   • 從而得到全局的karma命令

npm install -g karma-cli
複製代碼

2. 在項目中安裝karma依賴

npm install -S karma
複製代碼

3. 安裝插件
   • karma-mocha：若想驅動mocha框架進行測試，就必須安裝karma-mocha；其餘不一樣的單元測試框架分別也有本身對於的插件
   • karma-chrome-launcher：提供了karma與chrome的適配器
     • karma選擇什麼瀏覽器進行測試，就須要安裝對於的適配器插件

npm install -S karma-mocha karma-chrome-launcher
複製代碼

2. karma配置：

• 命令行輸入karma init，進行配置選擇

1. Which testing framework do you want to use ? (mocha)
2. Do you want to use Require.js ? (no)
3. Do you want to capture any browsers automatically ? (Chrome)
4. What is the location of your source and test files ? (https://cdn.bootcss.com/jquery/2.2.4/jquery.js, node_modules/should/should.js, test/**.js)
5. Should any of the files included by the previous patterns be excluded ? ()
6. Do you want Karma to watch all the files and run the tests on change ? (yes)
複製代碼

• 下一步下一步結束後會生成配置文件karma.conf.js
  • 其中重要的幾個配置項：
    1. frameworks：使用到的框架
       • 例如，若是要驅動mocha框架進行測試，這裏就要使用到mocha
    2. files：能夠將待測試代碼以及它們須要的依賴加載進來
    3. browsers：須要啓動什麼瀏覽器進行測試
    4. autoWatch：是否監聽文件變更，若有變更則從新運行單測
    5. singleRun：是否只運行一次測試（設爲true的話，瀏覽器窗口不會一直維持在，打開進行一次測試後就會關閉了）
       • 若是singleRun要配合其餘的持續集成工程來使用，必需要設置singleRun=true，由於持續集成時不須要屢次運行測試

// karma.conf.js

module.exports = function(config) {
    config.set({
        // 跟路徑，後面配置的基本全部相對路徑都會根據這個路徑來構造
        basePath: '',
        // 使用到的框架，目前karma支持的框架詳見 https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['mocha'],
        // 會在瀏覽器中執行的代碼：
        files: [
            'test/main.js',
            {
                pattern: 'src/**/*.js',
                included: false             // false 表示初始化的時候不會使用 script 標籤直接將相關 js 引入到瀏覽器，須要本身寫代碼加載
            }
        ],
        // 須要從files中排除掉的文件
        exclude: [],   
        // 須要作預處理的文件，以及這些文件對應的預處理器
        preprocessors: {
            'src/**/*.js': ['babel', 'coverage'],
            'test/**/!(main).js', ['babel', 'coverage'],
            'node_modules/protectobject/src/**/*.js': ['babel']
        },
        // babel預處理器的配置
        babelPreprocessor: {
            options: {
                presets: ['es2015', 'stage-0'],
                plugins: ['transform-decorators-legacy', 'transform-es2015-modules-amd']
            }
        },
        // 覆蓋率報告器配置：
        coverageReporter: {
            type: 'html',
            dir: 'coverage'
        },
        // 實際使用什麼報告器，全部可用的報告器詳見 https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['dots', 'coverage'],
        // 服務器端口號
        port: 9876,
        // 在輸出內容（報告器和日誌）中啓用/禁用顏色
        colors: true,
        // 日誌級別，可取值 config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO
        // 啓動/禁用監視文件變化從新執行測試的功能
        autoWatch: true,
        // 要測試的目標環境
        bowers: ['Chrome', 'Firefox', 'Safari'],
        // 啓動/禁用持續集成模式，啓動的話，karma捕獲瀏覽器，運行測試並退出
        singleRun: false,
        // 併發級別，應該同時啓動多少個瀏覽器
        concurrency: Infinity
    })
}
複製代碼

3.開始自動化測試：

karma start
複製代碼

運行成功：

二.注意點：

1.karma測試時，待測試文件的依賴文件如何引入：

1. 方式1：配置files：
   • 在項目初始化時What is the location of your source and test files ?，即將要測試的文件，及測試文件所需的依賴項寫入
   • 這樣子，在測試時，測試文件就能直接使用到這些依賴
   • 示例：
     • 測試文件test/main.js須要使用到jquery.js
     • 則在karma.conf.js的files中填入[jquery.js, test/main.js]
     • 這樣，在測試時，test/main.js無需手動引入jquery.js也能使用jquery.js了
2. 方式2: 配置使用require.js
   • 配置時開啓Do you want to use Require.js ? (yes)
   • 注意：
     • 若測試文件使用的時Node.js 的require()語法來引入依賴，在使用Karma測試時就會報錯Uncaught ReferenceError: module is not defined，
     • 這是由於Karma是運行在瀏覽器端的，不支持Node.js語法