紐約市運行時覆蓋黃瓜

Question

我試圖覆蓋我用 Cucumber/TS 編寫的 e2e 測試，但我的測試報告永遠無法映射回我的源文件。

該報告只是一個目錄列表，單擊單個 *.ts 文件會產生一個堆棧跟蹤（ *** 'd out my user/repo name）：

Unable to lookup source: /Users/***/dev/git/***/dist/webpack:/src/gql/index.ts(ENOENT: no such file or directory, open '/Users/***/dev/git/***/dist/webpack:/src/gql/index.ts')
Error: Unable to lookup source: /Users/***/dev/git/***/dist/webpack:/src/gql/index.ts(ENOENT: no such file or directory, open '/Users/***/dev/git/***/dist/webpack:/src/gql/index.ts')

我正在嘗試做的事情：

1. 使用 TypeScript 源映射運行檢測的應用程序
2. 針對此應用程序在外部運行我的測試
3. 停止應用程序並生成原始 TS 代碼的覆蓋率報告

我的設置如下，

• 節點： v9.4.0
• 網絡包： ^4.23.0,
• 打字稿： ~3.1.6

配置：

{
    "compilerOptions": {
    "rootDir": "./src",
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true,
    "outDir": "./dist",
    "noEmitOnError": true,
    "declaration": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "lib": ["esnext"],
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "noImplicitAny": true,
    "typeRoots": ["./typings", "./node_modules/@types"],
    "experimentalDecorators": true
  },
  "exclude": ["node_modules", "dist"]
}

webpack.config.js :

module.exports = {
  entry: ['./src/index.ts'],
  target: 'node',
  mode: process.env.NODE_ENV === 'dev' ? 'development' : 'production',
  externals: [nodeExternals()], // in order to ignore all modules in node_modules folder,
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js'
  }
}

package.json （相關部分）：

"scripts": {
    "start-coverage": "NODE_ENV=test nyc node --reporter=lcov dist/index.js",
    ...
}, 
"nyc": {
  "all": true,
  "require": "ts-node/register",
  "instrument": true,
  "report-dir": "./coverage",
  "temp-dir": "./temp",
  "source-map": true,
  "produce-source-map": false
},

問題再次在於上面顯示的堆棧跟蹤無法映射單個文件。 我嘗試了許多配置組合，但總是在這里結束。

• 有誰知道可能有什么問題？
• 我應該為此使用remap-istanbul嗎？

Answer 1

發現問題。 這是 webpack 的一個錯誤，已在https://github.com/SitePen/remap-istanbul/issues/68中修復。

解決方案是在 webpack 中，您需要添加選項： devtoolModuleFilenameTemplate 。 輸出部分如下所示：

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js',
    devtoolModuleFilenameTemplate: '[resource-path]'}

僅使用devtool: 'source-map' ，就是這樣！ 我們甚至不需要package.json的nyc配置，也不需要tsconfig.json任何修改，除了sourceMaps:true 。