2017-02-28 53 views
1

我正在建設一個項目,使用mocha-webpack來測試一個Angular 2項目,我試圖使用伊斯坦布爾的命令行(nyc)添加覆蓋項目,但我可以我們不知道如何讓伊斯坦布爾在點擊html報告時正確顯示所涵蓋的來源。我的配置中是否存在某些內容?我是否需要使用Babel/Karma才能正確映射這些?伊斯坦布爾與摩卡webpack丟失源地圖

webpack.js

var webpack = require('webpack'); 
var helpers = require('./helpers'); 

module.exports = { 
    target: "node", 
    devtool: 'inline-source-map', 

    entry: { 
    'test': 'mocha-loader!./config/mocha-test-shim.js' 
    }, 

    resolve: { 
    modules: [helpers.root('app'), "node_modules"], 
    extensions: ['', '.ts', '.js'] 
    }, 

    output: { 
    devtoolModuleFilenameTemplate: '[absolute-resource-path]', 
    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]' 
    }, 

    module: { 
    postLoaders: [{ 
     test: /\.(js|ts)/, 
     exclude: /(node_modules|bower_components)/, 
     include: helpers.root('app'), // instrument only testing sources with Istanbul, after other loaders run 
     loader: 'istanbul-instrumenter-loader' 
    }], 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
     } 
    ] 
    } 
} 

的package.json(件爲簡潔起見省略)

{ 
    "scripts": { 
    "coverage": "nyc --reporter=html mocha-webpack", 
    }, 
    "nyc": { 
    "include": [ 
     "app/**/*.ts", 
     "app/**/*.js" 
    ], 
    "sourceMap": false, 
    "instrument": false 
    } 
} 

摩卡webpack.opts

--webpack-config config/webpack.mocha.js 
--require config/mocha-test-shim.js 
app/**/*.test.ts 

有了這個配置,我得到一個HTML覆蓋報告,但是當我點擊進入其中一個類,我得到以下錯誤:

Unable to lookup source: /<project-path>/node_modules/angular2-template-loader/index.js!/<project-path>/app/customer/customer.ts(ENOENT: no such file or directory, open '/<project-path>/node_modules/angular2-template-loader/index.js!/<project-path>/app/customer/customer.ts') 
Error: Unable to lookup source: /<project-path>/node_modules/angular2-template-loader/index.js!/<project-path>/app/customer/customer.ts(ENOENT: no such file or directory, open '/<project-path>/node_modules/angular2-template-loader/index.js!/<project-path>/app/customer/customer.ts') 
    at Context.defaultSourceLookup [as sourceFinder] (/<project-path>/node_modules/nyc/node_modules/istanbul-lib-report/lib/context.js:15:15) 
    at Context.getSource (/<project-path>/node_modules/nyc/node_modules/istanbul-lib-report/lib/context.js:74:17) 
    at Object.annotateSourceCode (/<project-path>/node_modules/nyc/node_modules/istanbul-reports/lib/html/annotator.js:175:38) 
    at HtmlReport.onDetail (/<project-path>/node_modules/nyc/node_modules/istanbul-reports/lib/html/index.js:217:39) 
    at Visitor.(anonymous function) [as onDetail] (/<project-path>/node_modules/nyc/node_modules/istanbul-lib-report/lib/tree.js:34:30) 
    at ReportNode.Node.visit (/<project-path>/DSW/node_modules/nyc/node_modules/istanbul-lib-report/lib/tree.js:123:17) 
    at /<project-path>/DSW/node_modules/nyc/node_modules/istanbul-lib-report/lib/tree.js:116:23 
    at Array.forEach (native) 
    at visitChildren (/<project-path>/DSW/node_modules/nyc/node_modules/istanbul-lib-report/lib/tree.js:115:32) 
    at ReportNode.Node.visit (/<project-path>/DSW/node_modules/nyc/node_modules/istanbul-lib-report/lib/tree.js:126:5) 

回答

1

我有同樣的問題,我在襯裏源的地圖解決由使用'awesome-typescript-loader'。

這裏是我的conf:

{ 
    test: /\.ts$/, 
    include: helpers.root('src'), 
    exclude: [/\.e2e\.ts$/], 
    loaders: [{ 
     loader: 'awesome-typescript-loader', 
     query: { 
      // use inline sourcemaps for "coverage" reporter 
      sourceMap: false, 
      inlineSourceMap: true, 
      compilerOptions: { 
       // Remove TypeScript helpers to be injected 
       // below by DefinePlugin 
       removeComments: true 
      } 
     } 
    }, 'angular2-template-loader'] 
} 

跳上它可以幫助。

+0

非常感謝,這工作完美! – Skeeterdrums

相關問題