Angular 17升级至18后测试模块替代方案咨询

1. @angular/core/testing 中 async 导出缺失的解决办法 #

Angular 18 彻底移除了 async 测试辅助函数，当下主流测试框架（Jest、Karma等）已原生支持异步测试语法，直接用 async/await 替换原有的 async() 包裹逻辑即可：

旧写法：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

it('should handle async operation', async(() => {
  // 异步测试逻辑
}));

新写法：

import { ComponentFixture, TestBed } from '@angular/core/testing';

it('should handle async operation', async () => {
  // 异步测试逻辑
});

2. @angular/router/testing 中 provideRouterTesting 导出缺失的解决办法 #

Angular 18 移除了 provideRouterTesting，推荐结合 provideRouter 和 RouterTestingHarness 配置路由测试，或沿用传统的 RouterTestingModule.withRoutes()：

独立组件/应用测试场景 #

import { provideRouter } from '@angular/router';
import { RouterTestingHarness } from '@angular/router/testing';

await TestBed.configureTestingModule({
  providers: [provideRouter([{ path: '', component: YourTargetComponent }])]
}).compileComponents();

// 通过测试工具类获取路由实例
const harness = await RouterTestingHarness.create();
const router = harness.router;

传统模块式测试场景 #

import { RouterTestingModule } from '@angular/router/testing';

await TestBed.configureTestingModule({
  imports: [RouterTestingModule.withRoutes([{ path: '', component: YourTargetComponent }])]
}).compileComponents();

3. @angular/common/http/testing 中 HttpClientTestingModule 废弃的替代方案 #

Angular 18 标记 HttpClientTestingModule 为废弃，推荐使用 provideHttpClientTesting 配合 provideHttpClient 配置HTTP测试环境，适配独立模式的依赖注入：

旧写法：

import { HttpClientTestingModule } from '@angular/common/http/testing';

await TestBed.configureTestingModule({
  imports: [HttpClientTestingModule]
}).compileComponents();

新写法：

import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';

await TestBed.configureTestingModule({
  providers: [
    provideHttpClient(withInterceptorsFromDi()),
    provideHttpClientTesting()
  ]
}).compileComponents();

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