单元测试 Angular 11 + Karma + Pug

Question

我正在为 angular 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但没有一个有效。

测试正在运行，但渲染的哈巴狗只是一个不正确的文本 html。 Build 将文件从 pug 转换为 html。 在 webpack 配置中添加了哈巴狗装载机。

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


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

业力.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-loader，因为这个库改变了内部Angular代码，这总是在更新Angular时出现问题，所以添加哈巴狗到ZC31C335EF37283DE1Z5 ， 用这个：

• @angular-builders/custom-webpack: https://www.npmjs.com/package/@angular-builders/custom-webpack （这个库允许您更改 angular 的构建方式，通过 Z424516CA53B4AD4BEF37ED0A 文件）

请参阅此提交以添加哈巴狗： https://github.com/vadjs/custom-loaders-bug/commit/24c9ce896578f7a12d79b58ff74b577b8adef339

有了上面提到的，你可以运行你的测试并正常渲染你的组件，但你不能调试它们，因为业力服务器上没有加载源 map，添加它你需要“SourceMapDevToolPLugin”的配置，你可以在我的包含所有内容的 repo (webpack.config.js)

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

我希望我对你有所帮助

Answer 2

我知道为时已晚，但它仍然可能对某人有用。

Angular Pug Builders可用于 Angular >=v12 。

要将它与当前的 Angular 版本一起使用，只需运行：

ng add ngx-pug-builders

或者对于 Angular 12：

ng add ngx-pug-builders@12

请在此处查看 GitHub 存储库的详细信息。