Karma+Jasmine+istanbul+webpack 自动化单元测试

Karma+Jasmine+istanbul+webpack 自动化单元测试

1.webpack 可以解决需要使用 require的问题（nodejs: require is not defined)

2.jasmine 异步方法 async/await： 用于http请求并得到返回值（nodejs http 请求返回undefined）
https://jasmine.github.io/tutorials/async

3.webpack 之后覆盖率会有问题 覆盖率不准确，需要引入karma-coverage-istanbul-reporter 并在karma-config配置 webpack

4.it 块之间异步，执行顺序混乱， 如果需要有执行顺序的话， 把先要执行的放在 beforeAll里

dependencies

“dependencies”: {
“jasmine”: “^3.5.0”,
“request”: “^2.88.0”
},
“devDependencies”: {
“istanbul-instrumenter-loader”: “^3.0.1”,
“jasmine-ts-console-reporter”: “^3.1.1”,
“karma”: “^4.4.1”,
“karma-chrome-launcher”: “^3.1.0”,
“karma-coverage”: “^2.0.1”,
“karma-coverage-istanbul-reporter”: “^2.1.1”,
“karma-jasmine”: “^2.0.1”,
“karma-sourcemap-loader”: “^0.3.7”,
“karma-webpack”: “^4.0.2”,
“webpack”: “^4.41.2”
},
“scripts”: {
“test”: “karma start”
},

karma config

https://jasmine.github.io/api/edge/global

// Karma configuration
// Generated on Mon Dec 16 2019 16:12:16 GMT+0800 (China Standard Time)

module.exports = function(config) {
config.set({

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


// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],


// list of files / patterns to load in the browser
files: [
  //
  { pattern: 'test/*_test.js', watched: false }
],


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


// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
  'test/*_test.js': ['webpack','sourcemap','coverage']
},
webpack: {
  // karma watches the test entry points
  // (you don't need to specify the entry option)
  // webpack watches dependencies
  // webpack configuration
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  devtool: 'inline-source-map',
        module: {
            rules: [
                {
                    test: /\.js$/,
                    enforce: 'pre',
                    use: 'istanbul-instrumenter-loader',
                    exclude: /node_modules/
                }
                /* loaders */
            ]
        }
},

webpackMiddleware: {
  // webpack-dev-middleware configuration
  // i. e.
  stats: 'errors-only',
},


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


// 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'],


// 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,
coverageIstanbulReporter: {
  // reports can be any that are listed here: https://github.com/istanbuljs/istanbuljs/tree/aae256fb8b9a3d19414dcf069c592e88712c32c6/packages/istanbul-reports/lib
  reports: ['html', 'lcovonly', 'text-summary'],

  // base output directory. If you include %browser% in the path it will be replaced with the karma browser name
  dir: 'coverage/',

  // Combines coverage information from multiple browsers into one report rather than outputting a report
  // for each browser.
  combineBrowserReports: true,

  // if using webpack and pre-loaders, work around webpack breaking the source path
  fixWebpackSourcePaths: true,

  // Omit files with no statements, no functions and no branches from the report
  skipFilesWithNoCoverage: true,

  // Most reporters accept additional config options. You can pass these through the `report-config` option
  'report-config': {
    // all options available at: https://github.com/istanbuljs/istanbuljs/blob/aae256fb8b9a3d19414dcf069c592e88712c32c6/packages/istanbul-reports/lib/html/index.js#L135-L137
    html: {
      // outputs the report in ./coverage/html
      subdir: 'html'
    }
  }
}

})
}

参考

https://jasmine.github.io/api/edge/global
https://www.cnblogs.com/wushangjue/p/4539189.html
https://blog.zeromake.com/pages/karma-webpack-istanbul/