Angular CLI + Pug单元测试失败求助：ng eject后yarn test报错

Hey there, let’s sort out this test failure you’re hitting with your Pug templates! The root issue here is straightforward: even though you added the pug-html-loader to your main webpack.config.js (which is why yarn start works perfectly), the Karma test runner’s webpack setup doesn’t have this loader configured. When you run yarn test, Karma uses its own webpack configuration to bundle your test code, and it doesn’t automatically inherit the loaders from your dev/production config—so it can’t parse .pug files at all.

Here’s how to fix it step by step:

1. Open up your karma.conf.js file. Look for the webpack property inside it (this is where Karma’s webpack settings live). If your test setup uses a separate webpack.test.config.js file instead, open that one instead.
2. In the module.rules array of this test webpack config, add the same loader rule for .pug files that you added to your main webpack.config.js. For example:

   module: {
     rules: [
       // Keep all your existing test rules (like for TypeScript, CSS, etc.)
       {
         test: /\.pug$/,
         use: ['pug-html-loader']
       }
     ]
   }
   

3. Save the changes, then re-run yarn test.

This tells Karma’s webpack setup how to process your Pug templates, just like your dev server does. The error should disappear, and your tests should run successfully.

内容的提问来源于stack exchange，提问作者tomoya ishizaka