使用 SpyOn 文档执行 angular 单元测试时出错

Question

我正在尝试对组件进行单元测试，我模拟了数据并期待一些结果但出现错误，下面是我的单元测试。

it('should call getData method ', () => {
    const usageService = TestBed.get(UsageService);
    component.slug = 'slugName';
    spyOn(document, 'getElementById').and.returnValue("slugName");
    component.ngOnInit();
    expect(usageService.getData).toHaveBeenCalled();
    });

在上面，我在第 spyOn(document, 'getElementById').and.returnValue("slugName");

行收到错误

错误是：

Argument of type "slugName" is not assignable to parameter of type 'HTMLElement'.

将 jasmine 版本从 2.8 升级到 3.5.10

后出现此问题

我不知道这段代码有什么问题，为什么以前可以正常工作，现在升级后就不行了。

请帮我解决问题。

Answer 1

你想在上面的代码中测试什么？ slugName，或者一个服务已经被调用？

无论哪种方式，都有更好的方法。

正在测试 slugName 是否已设置为 id

尝试使用您的夹具获取 html-对象：

即componentFixture.debugElement.query('#slugName').nativeElement.id

监视您的服务以查看 "getData" 组件是否已被订阅。

TestBed.inject(UsageService)

我相信 get 已被弃用。

Answer 2

您收到一个有效的自我描述性错误，return 类型的 getElementById 是 HTMLElement 并且您正在 returning string。

如果您能粘贴您要测试的 ngOnInit 代码，我们会更好地帮助您。

不过，您可以从下面的代码中获得帮助。

   it('should call getData method ', () => {
    const usageService = TestBed.get(UsageService);
    spyOn(usageService, 'getData'); // toHaveBeenCalled works on mocked method
    component.slug = 'slugName';
    const htmlEl = document.createElement('div'); // you can create the element which is there in your component.
    spyOn(document, 'getElementById').and.returnValue(htmlEl); // return created element on the previous line.
    component.ngOnInit();
    expect(usageService.getData).toHaveBeenCalled();
   });

使用 SpyOn 文档执行 angular 单元测试时出错

Error while performing angular Unit testing with SpyOn document

angular

unit-testing

jasmine

karma-jasmine

karma-mocha

正在测试 slugName 是否已设置为 id

监视您的服务以查看 "getData" 组件是否已被订阅。