使用Webpack Externals测试Angular应用时模块未找到错误的解决

问题根源 #

你配置的Webpack externals只作用于应用构建流程，而Angular的单元测试（npm test/ng test）使用独立的测试配置（默认基于Karma+Jasmine），不会读取这个single-spa的Webpack配置。测试环境会尝试本地解析@org/utility，但因为它被设为外部依赖、本地无对应文件，所以触发模块未找到错误。

解决方案 #

方案1：给测试环境提供Mock模块

这是最常用的轻量方案，直接模拟外部模块的导出结构即可：

1. 在测试目录下创建mock文件，比如src/test/mocks/@org/utility.ts：

   // 模拟你实际用到的方法/对象结构
   export const userPreferencesHandler = {
     getPreferences: () => ({ theme: 'light', language: 'zh-CN' }),
     updatePreferences: jasmine.createSpy() // 用Jasmine的Spy模拟方法
   };
   

2. 修改tsconfig.spec.json，添加路径映射，让测试时解析@org/utility到这个mock文件：

   {
     "extends": "./tsconfig.json",
     "compilerOptions": {
       "outDir": "./out-tsc/spec",
       "types": ["jasmine"],
       "paths": {
         "@org/utility": ["src/test/mocks/@org/utility.ts"]
       }
     },
     "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
   }
   

方案2：修改测试构建的Webpack配置（加载真实外部模块）

如果需要在测试中使用真实的@org/utility模块，可以调整测试的构建配置：

1. 确保@org/utility有UMD格式的构建产物，然后在karma.conf.js中添加外部模块的加载路径：

   module.exports = function (config) {
     config.set({
       // ...其他配置
       files: [
         // 添加外部模块的本地文件路径或CDN地址
         'node_modules/@org/utility/dist/utility.umd.min.js'
       ],
       // ...
     });
   };
   

2. 配合@angular-builders/custom-webpack扩展测试配置，创建webpack.test.config.js：

   module.exports = {
     externals: {
       '@org/utility': 'orgUtility' // 这里要和UMD包暴露的全局变量名一致
     }
   };
   

3. 在angular.json的test节点中指定自定义Webpack文件：

   "test": {
     "builder": "@angular-builders/custom-webpack:karma",
     "options": {
       "customWebpackConfig": {
         "path": "./webpack.test.config.js"
       },
       // ...其他测试选项
     }
   }
   

方案3：Angular模块/服务的依赖注入Mock

如果@org/utility是Angular模块、导出的是服务类，可以通过测试模块的依赖注入替换：

1. 先定义mock服务对象：

   const mockUserPreferencesHandler = {
     getPreferences: jasmine.createSpy().and.returnValue({ theme: 'dark' })
   };
   

2. 在测试的TestBed中提供mock：

   import { TestBed } from '@angular/core/testing';
   import { UserPreferencesHandler } from '@org/utility';
   import { YourComponent } from './your.component';
   
   describe('YourComponent', () => {
     let component: YourComponent;
   
     beforeEach(async () => {
       await TestBed.configureTestingModule({
         declarations: [YourComponent],
         providers: [
           { provide: UserPreferencesHandler, useValue: mockUserPreferencesHandler }
         ]
       }).compileComponents();
     });
   
     it('should create', () => {
       component = TestBed.createComponent(YourComponent).componentInstance;
       expect(component).toBeTruthy();
     });
   });
   

内容的提问来源于stack exchange，提问作者chandan kumar