Angular TestBed-Karma/Jasmine报错：意外导入BrowserDynamicTestingModule

我来帮你搞定这个Angular测试的报错问题！先看看你遇到的情况：

你的测试代码示例：

describe("Login", () => { 
  let loginService: LoginService; 
  beforeEach(() => { 
    TestBed.configureTestingModule( { providers: [LoginService] } ); 
    loginService = TestBed.get(LoginService); // 错误发生处
  }); 
  it("login testing", (done: DoneFn) => {}); // 空测试用例
}

运行时抛出的错误：

Error: Unexpected value 'BrowserDynamicTestingModule' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation. at syntax...

问题原因 #

这个报错主要是因为Angular版本更新后，TestBed.get()已经被废弃，再加上代码里有个小语法错误，两者结合导致测试框架解析模块时出现异常。

解决方案 #

按照以下步骤修正代码：

• 替换废弃的TestBed.get()为TestBed.inject()
  从Angular 9开始，TestBed.get()就被标记为废弃，官方推荐使用类型更安全的TestBed.inject()来获取注入的服务实例，这也是符合最新测试规范的做法。

• 修复语法错误
  你的describe块末尾缺少了闭合的});，这个小细节会让测试框架无法正确解析代码结构，引发异常。

• 确保必要的导入
  别忘了在测试文件顶部导入TestBed、LoginService以及DoneFn这些依赖项。

修正后的完整代码示例 #

import { TestBed, DoneFn } from '@angular/core/testing';
import { LoginService } from './login.service'; // 根据你的实际文件路径调整

describe("Login", () => { 
  let loginService: LoginService; 

  beforeEach(() => { 
    TestBed.configureTestingModule({ 
      providers: [LoginService] 
    }); 
    // 使用TestBed.inject替代废弃的TestBed.get
    loginService = TestBed.inject(LoginService); 
  }); 

  it("login testing", (done: DoneFn) => {
    // 这里可以添加你的测试逻辑，比如调用服务方法并断言结果
    done(); // 异步测试必须调用done来结束测试
  }); 
}); // 补上之前缺失的闭合括号

额外说明 #

如果还是遇到类似模块导入的问题，可以检查项目根目录下的test.ts文件，确保测试环境初始化代码正确：

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

// 初始化测试环境
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
);

不过大部分情况下，替换TestBed.get()加上修复语法错误就能解决你遇到的问题啦！

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