Angular 单元测试角度11+；因果报应+；帕格

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

我试过：

• 但这一切都不管用

测试正在运行，但呈现的哈巴狗只是一个文本，而不是正确的html。 Build将文件从pug转换为html。 在网页包配置中添加了pug加载器

"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']
},

---

一周后，我终于解决了这个问题，我不建议使用ng cli pug loader，因为此库会更改内部Angular代码，这在更新Angular时总是会导致问题，所以要将pug添加到Angular，请使用以下命令：

• @角度构建器/自定义网页包：（此库允许您通过网页包配置文件更改角度构建的方式）

请参阅此提交以添加pug：

通过上面提到的，您可以运行测试并正常呈现您的组件，但您无法调试它们，因为karma server上没有加载源映射，要添加它，您需要“SourceMapDevToolPLugin”的配置，您可以在my repo（webpack.config.js）上找到它

---

我希望我已经帮了你

不幸的是，自定义网页包无法与karma一起工作。我复制了你的自定义加载程序bug repo和app.component.spec.ts以失败告终。在我的项目中有一个错误：错误：在JIT编译SharedPackageComponent的模板时出错：意外的字符“EOF”（模板中是否有一个未转义的“{”字符？使用“{{{}}”）来转义它。）-所以说.pug文件没有被解析为html。