Angular 16无test.ts时，如何配置测试全局导入模块？

1. 创建src/test.ts文件 #

在项目的src目录下新建test.ts，填入以下内容（根据你的需求修改全局导入的模块）：

import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// 导入你需要全局引入的模块
import { YourGlobalModule } from './app/modules/your-global.module';

// 初始化Angular测试环境
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  { teardown: { destroyAfterEach: true }},
);

// 全局配置测试模块，所有测试用例会自动继承这里的导入
getTestBed().configureTestingModule({
  imports: [YourGlobalModule],
  // 按需添加全局声明的组件、指令或提供者
  // declarations: [],
  // providers: []
});

2. 修改angular.json配置 #

找到项目配置里的architect -> test -> options，将main字段的值改为src/test.ts（替换原来的测试入口文件，比如默认的src/test-setup.ts）：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "options": {
            "main": "src/test.ts",
            // 其他原有配置保持不变
          }
        }
      }
    }
  }
}

3. 调整Karma配置（如果需要） #

打开karma.conf.js，确保files数组包含src/test.ts，并配置对应的预处理器：

module.exports = function (config) {
  config.set({
    files: [
      { pattern: 'src/test.ts', watched: false }
    ],
    preprocessors: {
      'src/test.ts': ['webpack', 'sourcemap']
    },
    // 其他原有配置保持不变
  });
};

完成以上步骤后，所有测试用例都会自动加载你在test.ts中配置的全局模块，无需在每个测试文件中重复导入。

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