升级到Angular 13后Webdriver e2e spec测试报错Unknown file extension ".ts"

根因分析 #

你猜测的 TypeScript 4.4 破坏性变更并不是本次问题的诱因。
Angular 13 开始官方所有的 npm 包都改为仅 ESM 格式分发，不再兼容 CommonJS 加载模式。你当前的 WDIO 运行环境默认使用 CommonJS 规则加载模块，在导入 @angular/core 中的 InjectionToken 时，模块加载链路断裂，Node.js 原生 ESM 加载器无法识别未编译的 .ts 后缀文件，就抛出了ERR_UNKNOWN_FILE_EXTENSION报错。而 WDIO 提示的browser对象未初始化属于通用兜底报错，并非问题的根因。

解决方案 #

你可以根据项目情况任选以下一种方案修复：

• 方案1：全项目适配ESM加载规则
  1. 在 package.json 中新增字段 "type": "module"，告知 Node.js 项目默认使用 ESM 格式加载模块
  2. 修改 tsconfig.json 配置，将 compilerOptions.module 设为 ESNext，compilerOptions.moduleResolution 设为 NodeNext
  3. 在 wdio.conf.ts 配置中新增 autoCompileOpts.tsNodeOpts.esm = true，开启 WDIO 的 ESM 加载支持
• 方案2：临时指定加载器无需改项目配置
  启动 WDIO 测试时添加运行时参数，用 ts-node 的 ESM 加载器处理 TS 文件，启动命令改为：

  NODE_OPTIONS="--loader ts-node/esm" wdio run wdio.conf.ts
  

  Windows 环境可借助 cross-env 包设置环境变量。
• 方案3：调整代码执行时机
  如果你是在测试文件的全局作用域直接实例化 InjectionToken，将实例化逻辑迁移到 before、beforeEach 或测试用例 it 钩子内部，避免模块加载阶段就执行 Angular 相关的初始化代码，也能规避模块加载顺序问题。

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