升级到Angular v15后，如何引入项目外的单元测试？

自Angular v15起，test.ts配置文件中的require.context函数已被移除。此前你通过以下代码让Karma识别项目外的测试用例：

const contextGlobal = require.context('../../../folderOutsideProject/', true, /\.spec\.ts$/);
contextGlobal.keys().map(contextGlobal);

升级后符号链接方案无效，且从Angular CLI的源码逻辑来看，webpack编译阶段仅会包含projectSourceRoot路径下的文件，外部目录默认不会被纳入扫描范围。以下是几种可行的替代方案：

方案一：修改angular.json扩展测试文件匹配规则 #

直接在项目的angular.json配置中，给test目标添加外部测试文件的匹配路径。找到projects -> [你的项目名] -> architect -> test -> options，调整include字段：

{
  "projects": {
    "your-project": {
      "architect": {
        "test": {
          "options": {
            "include": [
              "src/**/*.spec.ts",
              "../../../folderOutsideProject/**/*.spec.ts"
            ]
          }
        }
      }
    }
  }
}

注意路径是相对于angular.json文件所在位置的相对路径，根据实际目录层级调整。

方案二：自定义测试入口文件手动导入 #

如果不想修改angular.json的全局配置，可以创建一个额外的测试入口文件，手动导入外部测试用例：

1. 在src目录下创建test-external.ts文件，写入外部测试文件的导入语句：

// 示例：导入外部目录的测试文件
import '../../../folderOutsideProject/test-a.spec.ts';
import '../../../folderOutsideProject/sub-dir/test-b.spec.ts';

2. 在angular.json的test配置files数组中添加这个文件：

"files": [
  "src/test.ts",
  "src/test-external.ts"
]

如果外部测试文件数量较多，可以写个Node.js脚本自动生成导入语句：
创建generate-test-imports.js：

const fs = require('fs');
const path = require('path');

// 外部测试目录的绝对路径
const externalTestDir = path.resolve(__dirname, '../../../folderOutsideProject');
const importLines = [];

// 递归遍历目录收集.spec.ts文件
function walkDir(dir) {
  const files = fs.readdirSync(dir);
  files.forEach(file => {
    const fullPath = path.join(dir, file);
    if (fs.statSync(fullPath).isDirectory()) {
      walkDir(fullPath);
    } else if (file.endsWith('.spec.ts')) {
      // 生成相对于当前脚本的导入路径
      const relativePath = path.relative(__dirname, fullPath).replace(/\\/g, '/');
      importLines.push(`import './${relativePath}';`);
    }
  });
}

walkDir(externalTestDir);
// 写入到test-external.ts
fs.writeFileSync(path.resolve(__dirname, 'src/test-external.ts'), importLines.join('\n'));

然后在package.json中添加前置脚本，确保测试前自动生成导入文件：

"scripts": {
  "pretest": "node generate-test-imports.js",
  "test": "ng test"
}

方案三：自定义webpack配置扩展扫描范围 #

如果需要更灵活的控制，可以借助@angular-builders/custom-webpack扩展webpack配置，让外部目录被纳入编译范围：

1. 安装依赖：

npm install @angular-builders/custom-webpack --save-dev

2. 修改angular.json的test构建器：

"architect": {
  "test": {
    "builder": "@angular-builders/custom-webpack:karma",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.test.config.js"
      },
      // 保留原有其他配置
    }
  }
}

3. 创建webpack.test.config.js，通过插件动态导入外部测试文件：

const path = require('path');

module.exports = {
  plugins: [
    {
      apply(compiler) {
        compiler.hooks.entryOption.tap('ExternalTestsPlugin', (context) => {
          const externalDir = path.resolve(context, '../../../folderOutsideProject');
          // 借助webpack的require.context动态导入
          const testContext = require.context(externalDir, true, /\.spec\.ts$/);
          testContext.keys().forEach(key => testContext(key));
        });
      }
    }
  ]
};

注：符号链接方案无效的原因是Angular CLI内置的测试扫描插件仅会处理projectSourceRoot下的文件，符号链接的外部目录不在默认扫描范围内，因此无法被自动识别。

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