webpack+ES6的单元测试覆盖率统计

发表于:2018-3-29 11:15

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:zchq88    来源:51Testing软件测试网采编

  介绍
  单元测试的代码覆盖率统计,是衡量测试用例好坏的一个的方法,有的公司直接把代码测试覆盖率作为一个硬性要求。尤其在多人合作的情况下。很有可能在后期维护时候牵一发而动全身的代码修改中起到至关重要的检测。不过代码覆盖率也不是唯一标准,测试用例的好坏主要还是看能不能覆盖尽可能多的情况。
  打包编译JS代码覆盖率问题
  之前代码覆盖率在JS代码不需要编译的情况下。直接可以使用KARMA的karma-coverage这个工具就可以直接统计结果。不过由于我的项目用上了WEBPACK的打包和babel的ES6编译。所以单单使用karma-coverage统计的代码覆盖率统计的是,编译打包后的代码,这个覆盖率直接没有了参考价值。一般打包后代码的覆盖率只有可怜的10%-20%因为WEBPACK帮你加入了很多它的代码。而测试要做到这些代码的覆盖是完全没有意义的。所以就需要找一个可以查看编译前代码覆盖率的一个方法。
  需要测试代码navbar.ctrl.js
  let navbar = angular.module('navbar', []);
  navbar.controller('navbarCtrl', ['$scope', function ($scope) {
      $scope.links = ['home', 'about'];
  }]);
  module.exports = navbar;
  //export default navbar;//ES6单元测试支持有问题。所以改用了module.exports = navbar;写法
  测试代码navbar.Spec.js
  import navbar from './navbar.ctrl.js';
  describe('navbar', function () {
      let scope;
      beforeEach(angular.mock.module('navbar'));
      beforeEach(angular.mock.inject(function ($rootScope, $controller) {
          scope = $rootScope.$new();
          $controller('navbarCtrl', {$scope: scope});
      }));
      it('Controller测试', function () {
          expect(scope).to.have.property('links').with.length(2);
      });
  });  
  万能的GITHUB
  然后带着上面的问题去GITHUB找有没有人解决过这样的问题,最后找到了isparta、isparta-instrumenter-loader、istanbul。
  修改KARMA配置
  karma.conf.js
  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: ['mocha', 'chai'],
          // list of files / patterns to load in the browser
          files: ['app/**/*Spec.js'],
          // list of files to exclude
          exclude: [],
          // preprocess matching files before serving them to the browser
          // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
          preprocessors: {
              'app/**/*Spec.js': ['webpack', 'sourcemap'],
              'app/**/*(!Spec).js': ['webpack', 'sourcemap', 'coverage']
          },
          // test results reporter to use
          // possible values: 'dots', 'progress'
          // available reporters: https://npmjs.org/browse/keyword/karma-reporter
          reporters: ['mocha', 'coverage'],
          coverageReporter: {
              reporters: [
                  {type: 'text-summary'},
                  {type: 'html', dir: 'coverage/'}
              ]
          },
          // 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: false,
          // 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: true,
          // Concurrency level
          // how many browser should be started simultaneous
          concurrency: Infinity,
          webpack: {
              devtool: 'inline-source-map',
              module: {
                  preLoaders: [{
                      test: /\.js$/,
                      exclude: [/node_modules/,/\.Spec.js$/],
                      loader: 'isparta-instrumenter'
                  }],
                  loaders: [
                      {test: /\.js$/, exclude: [/node_modules/], loader: 'ng-annotate!babel'},
                      {test: /\.html/, loader: 'raw'},
                      {test: /\.styl$/, loader: 'style!css!stylus'},
                      {test: /\.css$/, loader: 'style!css'}
                  ]
              }
          },
          webpackServer: {
              noInfo: true // prevent console spamming when running in Karma!
          },
          plugins: [
              'karma-chrome-launcher',
              'karma-chai',
              'karma-mocha',
              'karma-webpack',
              'karma-sourcemap-loader',
              'karma-coverage',
              'karma-mocha-reporter'
          ]
      })
  };
  以上完成了编译前代码覆盖率的统计。
  详解参数
  files: ['app/**/*Spec.js'],
  这个主要是导入那些是测试文件。
  preprocessors: {
              'app/**/*Spec.js': ['webpack', 'sourcemap'],
              'app/**/*(!Spec).js': ['webpack', 'sourcemap', 'coverage']
          },
  这个是导入前的预处理,因为没有必要统计测试代码的覆盖率,所以测试代码只需要['webpack', 'sourcemap'],就可以了。而被测试代码需要统计覆盖率,所以需要['webpack', 'sourcemap', 'coverage']。
  webpack: {
              devtool: 'inline-source-map',
              module: {
                  preLoaders: [{
                      test: /\.js$/,
                      exclude: [/node_modules/,/\.Spec.js$/],
                      loader: 'isparta-instrumenter'
                  }],
                  loaders: [
                      {test: /\.js$/, exclude: [/node_modules/], loader: 'ng-annotate!babel'},
                      {test: /\.html/, loader: 'raw'},
                      {test: /\.styl$/, loader: 'style!css!stylus'},
                      {test: /\.css$/, loader: 'style!css'}
                  ]
              }
          },
  这个KARMA中的webpack配置是最关键的。需要在真是WEBPACK打包前用isparta-instrumenter先load一下,记录编译前文件。这里有一个坑。export default navbar;这句话是ES6支持的但是不知道为什么isparta-instrumenter-loader的时候就是编译有问题。所以只能改成module.exports = navbar;这样的写法。



上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号