单元测试角11 + Karma + Pug

Question

我正在为角11应用编写单元测试。在这个项目中，我使用的是.pug而不是.html。

我试过：

• https://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-object
• https://github.com/StoutLLC/karma-pug-preprocessor
• https://www.npmjs.com/package/karma-ng-pug2js-preprocessor/v/1.0.0-beta.0但没有起作用。

测试正在运行，但呈现的pug只是一个文本，而不是适当的html。生成将文件从pug转换为html。在webpack配置中增加了帕格装载机。

"dependencies": {
  "ng-cli-pug-loader": "^0.2.2",
}


"devDependencies": {
  "pug": "^2.0.4",
  "pug-loader": "^2.4.0",
}

karma.conf.js

plugins: [
  require('karma-jasmine'),
  require('karma-chrome-launcher'),
  require('karma-jasmine-html-reporter'),
  require('karma-coverage'),
  require('@angular-devkit/build-angular/plugins/karma'),
  require('karma-pug-preprocessor'),
],
files: [
  'src/**/*.pug',
],
preprocessors: {
  'src/**/*.pug': ['pug']
},

Answer 1

在解决了这个问题一周后，我建议不要使用ng-cli- pug加载程序，因为这个库会更改内部角代码，这在更新角时总是会引起问题，所以要将pug添加到角，请使用以下代码：

• @angular-builders/custom-webpack：https://www.npmjs.com/package/@angular-builders/custom-webpack (此库允许您通过webpack配置文件更改角的生成方式)

请参见此提交以添加pug：https://github.com/vadjs/custom-loaders-bug/commit/24c9ce896578f7a12d79b58ff74b577b8adef339

有了以上所述，您可以运行测试并正常呈现您的组件，但无法调试它们，因为没有加载在业力服务器上的源映射，要添加它，您需要配置"SourceMapDevToolPLugin“，您可以在map (webpack.config.js)上找到它的所有内容

• https://github.com/NOWHEREIS/angular-pug

我希望我帮了你