Angular + Jasmine：如何忽略/模拟被测组件（不在依赖项中）中的一个函数？

Question

我知道如何从依赖项模拟函数，但现在我有一个不在依赖项中的函数，它在我要测试的实际组件中。我怎样才能告诉茉莉花简单地忽略它？

当我运行ng test这个测试失败时：

原因是我从外部库导入的这个函数：

import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

（Contentful 是我在项目中使用的内容管理服务。）

在我的组件中，此函数在此处被调用：

ngOnInit() {
  
  //the next line keeps the test from creating, I don't really care to test this function, how can I mock it?:
  this.serializeContentfulRichText(someContentfulTextDoesntMatter);
  
  // a lot more stuff that I actually need to test
  ...
}

serializeContentfulRichText(contentfulText: any) {
    return documentToHtmlString(contentfulText, this.myRenderingOptions);
}

当我删除 documentToHtmlString 行并且 return 为 null 时，其余测试工作正常，我可以测试我的整个组件。但是我当然不能在我的实际组件中删除这一行，我只想在我的测试中ignore/mock它。

我用 spy 试了一下:

it('should create', () => {
    let spy = spyOn(component, 'serializeContentfulRichText')
    expect(spy).toHaveBeenCalledTimes(1)
    expect(component).toBeTruthy();
  });

但是间谍没有被调用，组件也没有被创建（两个预期都失败了）。

Answer 1

如果要对测试组件的方法进行存根，则需要在 TestBed.createComponent 之后但在 fixture.detectChanges().

之前进行

在这种情况下，只执行了组件的构造函数，没有执行生命周期钩子。

it('should create', () => {
  // initialization
  const fixture = TestBed.createComponent(DeclarationScrolltextComponent);
  const component = fixture.componentInstance;
  expect(component).toBeTruthy();

  // installing spies
  const spy = spyOn(component, 'serializeContentfulRichText');
  
  // executing render
  fixture.detectChanges();

  // assertions
  expect(spy).toHaveBeenCalledTimes(1);
});

Angular + Jasmine：如何忽略/模拟被测组件（不在依赖项中）中的一个函数？

Angular + Jasmine: How to ignore/ mock one function in the tested component (not in a dependency)?

unit-testing

mocking

jasmine

contentful

angular