Angular 单元测试/模拟 forkJoin答案

【问题标题】：Angular unit tests / mocking forkJoinAngular 单元测试/模拟 forkJoin
【发布时间】：2020-05-22 21:12:00
【问题描述】：

我正在使用 Jest & Spectator 在 Angular 9 中工作，并尝试为组件编写单元测试。问题是在我的 ngOnInit() 中，我有一个 forkJoin 对我的外观进行一些调用，然后在订阅中将返回的值分配给正确的变量。

当我的测试运行时，我得到这个错误：

TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

      81 |       myData1: this.facade1.findThisThing(),
      82 |       myData2: this.facade2.findThatThing(),
    > 83 |     }).subscribe(data => {
         |        ^
      84 |       this.data1 = data.myData1.values;
      85 |       this.data2 = data.myData2.values;

我如何模拟这个订阅/处理它？

组件：


ngOnInit(): void {
    forkJoin({
      myData1: this.facade1.findThisThing(),
      myData2: this.facade2.findThatThing(),

    }).subscribe(data => {
      this.data1 = data.myData1.values;
      this.data2 = data.myData2.values;
    });
}

当我通过 createComponentFactory 方法创建组件时，我想可能将它放在 provider 数组中，在 component.spec 中，但这似乎没有帮助。

component.spec：

const createComponent = createComponentFactory<ComponentUnderTest>(
    {
      component: ComponentUnderTest,
      mocks: [
       ...
      ]
      providers: [
        {
          provide: 'subscribe',
          useValue: jest.fn()
        }
      ],
      shallow: true,
    },
  );

任何帮助将不胜感激。

非常感谢 Stack Overflow 社区！

【问题讨论】：

标签： angular unit-testing rxjs fork-join

【解决方案1】：

问题实际上不在于订阅语句本身。您要做的是模拟服务，因此模拟您在 forkJoin 中使用的函数的返回值。请注意，rxjs 是尽可能同步的，因此如果您要返回使用 of 运算符创建的 Observable，它是完全同步的。因此，您可以模拟该函数并利用 of 运算符返回一个 observable。

您面临的问题实际上正在发生，因为您传递给 forkJoin 的函数之一是返回 undefined。请注意，如果您使用 jasmine spy 来模拟 Angular 服务，如果您没有指定函数的返回值，那么您正在监视，它将返回 undefined。

【讨论】：

【解决方案2】：

阅读有关在 forkjoin 中监视和模拟您的两种方法的信息。像

spyOn(this.facade1.findThisThing).and.returnValue(of());

第二个方法也一样。

【讨论】：