Webpack Karma Istanbul Remapping cho TypeScript

Question

Tôi đang phát triển một ứng dụng phía máy khách và tôi gặp sự cố khi tạo cấu hình Karma đúng. Ngay bây giờ, tôi đã thiết lập của tôi như sau:

Webpack: Sử dụng ts-loader, biên dịch nguyên cảo, tài sản, vv

Karma: Sử dụng các plugin webpack, tải cấu hình Webpack (trong đó sử dụng ts-loader), sau đó chạy tất cả các bài kiểm tra đơn vị với Jasmine + PhantomJS

Bài kiểm tra đơn vị tất cả đều chạy tốt, nhưng tôi chưa tìm ra cách xử lý việc lặp lại webpack istanbul. Karma-webpacks dường như không tạo ra các bản đồ nguồn để cho phép việc tái diễn xảy ra. Bất kỳ con trỏ sẽ được đánh giá cao!

Karma Config:

var webpackConfig = require("./webpack.config.js"); 
delete webpackConfig.entry; 

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: [ 
      // Non-automatically bundled libraries 
      'app/client/js/lib/easeljs.min.js', 
      'app/client/js/lib/tweenjs.min.js', 
      // Entry File 
      'app/client/js/index.ts', 
      'app/client/html/**/*.html', 

      // Test files and dependencies 
      'node_modules/angular-mocks/angular-mocks.js', 
      'test/client/**/*.spec.js' 
     ], 

     // preprocess matching files before serving them to the browser 
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 
     preprocessors: { 
      '**/*.html': ['ng-html2js'], 
      'app/client/js/index.ts': ['webpack', 'sourcemap', 'coverage'] 
     }, 

     ngHtml2JsPreprocessor: { 
      cacheIdFromPath: function (filepath) { 
       // Remaps the path for Karma webpack 
       return '/_karma_webpack_//' + filepath.replace(/^.*[\\\/]/, ''); 
      }, 
      moduleName: 'templates' 
     }, 

     webpack: webpackConfig, 

     webpackMiddleware: { 
      noInfo: true 
     }, 

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

     coverageReporter: { 
      dir: 'build/client/test/coverage/', 
      reporters: [ 
       { 
        type: 'json', 
        subdir: '.' 
       } 
      ] 
     }, 

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

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

Answer 1

Hiện nay Karma Remap Istanbul là gói chỉ có khả năng tạo ra vùng phủ sóng nguyên cảo inline. Nó cũng rõ ràng có thể được quản lý bằng cách chỉ cần gọi remap-istanbul trên coverage.json được tạo của bạn.

Gói này sẽ giúp bạn đánh máy tóm tắt sản lượng vùng phủ sóng trên console giả sử bạn thiết lập cấu hình đầu ra để text: undefined

Thêm nó vào công việc hiện tại của bạn là đủ đơn giản, các tài liệu hướng dẫn về cách chính xác để làm như vậy trong các gói github README.md.

Answer 2

Install karma-typescript:

npm install karma-typescript --save-dev 

Đặt này trong karma.conf.js của bạn:

frameworks: ["jasmine", "karma-typescript"], 

files: [ 
    { pattern: "src/**/*.ts" } 
], 

preprocessors: { 
    "**/*.ts": ["karma-typescript"] 
}, 

reporters: ["progress", "karma-typescript"], 

browsers: ["Chrome"] 

này sẽ chạy thử nghiệm đơn vị đánh máy của bạn một cách nhanh chóng và tạo Istanbul bảo hiểm html trông như thế này :

Thi s loại bỏ sự cần thiết phải sử dụng Karma và webpack với nhau, Karma được sử dụng để chạy thử nghiệm và tạo vùng phủ sóng, webpack được sử dụng để đóng gói.