Jasmine：如何测试组件内的异常消息？答案

【问题标题】：Jasmine: How test exception messages within a component?Jasmine：如何测试组件内的异常消息？
【发布时间】：2021-11-18 03:17:03
【问题描述】：

对于我的单元测试，我确保我的组件调用正确的方法，然后在调用时表现得恰当。我在这些测试中遇到的唯一问题是出现错误。我试图导致我的服务失败，以便在警报窗口中显示异常消息。我正在寻找有关如何使我的服务失败而不导致实际测试失败的见解。假设我有一个与此类似的功能：

 exceptionMessage: string = 'error, please contact administrator'  
getInfo() {
        this.myService.getData('url')

               .catch((error: Response | any) => {
                this.displayAlert(this.exceptionMessage);
                console.error(error.message || error);
                return Observable.throw(error.message || error);
              });
    };

测试：

    fit('should call displayAlert', () => {

   let window = spyOn(userComponent, 'displayAlert');

   spyOn(myService, 'getData').and.returnValue(Observable.of('url')//need to fail here

  userComponent.ngOnInit();
  userComponent.getInfo();
  expect(window).toHaveBeenCalled();

   });

在运行测试时，我的代码预计间谍窗口已被调用。但是由于我的服务没有失败，所以我无法访问代码中的 displayAlert 函数。现在，我能够成功测试我的服务是否正确处理错误，但它们会捕获一个可观察的并且不会像我的组件方法那样显示警报窗口。我试图像我的服务一样实施测试，但没有运气。我的目标是进行单元测试，这会导致我的服务失败。从那里我需要测试当我的组件遇到错误时，会显示一条错误消息。我需要服务失败，以便我可以访问代码this.displayAlert谢谢！如果有人可以指导我获得适当的文档或提供见解，那就太好了。我在这方面找不到太多信息。

编辑：更新测试：

 fit('should have getUsers() call showAlertWindow', () => {
   let window = spyOn(userComponent, 'showAlertWindow');
   spyOn(userComponent, 'loadUser').and.throwError('Error');

  expect(() => {
    userComponent.loadUser()}).toThrowError('Error');

    userComponent.loadUser();
    expect(window).toHaveBeenCalled();
  });

【问题讨论】：

标签： angular unit-testing jasmine karma-jasmine

【解决方案1】：

您需要做的是抛出异常，而不是调用.and.returnValue。

类似的东西

spyOn(myService, 'getData').and.throwError(“My Error”)

这将使spy 在被调用时抛出异常，允许落入 catch 语句中，然后您可以测试其中的代码是否被调用。

您可以查看Jasmine 文档here

【讨论】：

谢谢。现在在做.and.throwError 的时候是不是真的导致方法有错误？或者它只是模拟一个错误捕获。原因是我试图使该方法失败，以便可以访问 showAlertWindow。谢谢。
它应该模拟您的 api 返回错误。使用 spy 的全部意义在于让您可以控制特定调用返回的内容。然后，您可以根据您定义的行为设置一些期望。因此，要回答您的问题，它应该落在捕获范围内
啊，明白了。现在在抛出错误消息之后，我希望会抛出一个错误。从那里我调用我的 getInfo 组件，然后检查是否调用了警报窗口。现在 Jasmine 看到该方法失败并返回 Error: error message。调用我的 getInfo 函数 userComponent.getInfo 会导致此错误。期望错误期望不应该解决这个问题吗？代码贴在上面。
不确定你在问什么。你是说期望没有被触发？
我相信该函数没有正确捕获错误，因为运行测试会导致我收到该错误。当我运行 userComponent.getinfo 行时，它会导致测试失败。我正在尝试让组件捕获错误，以便我可以访问 alertwindow 函数。

【解决方案2】：

我只是添加到@HugoNoro 的答案

窥探类似

的方法后

let window = spyOn(userComponent, 'displayAlert');
spyOn(myService, 'getData').and.throwError(error.message)
....

您还可以添加一个测试以预期 getInfo() 和 displayAlert 测试引发的错误

.......
expect(()=> { userComponent.getInfo(); }).toThrow(error.message); // error should be thrown from the component's catch block

expect(window).toHaveBeenCalled();

【讨论】：

谢谢。当我预计会引发错误时，我的测试失败并显示错误：“我的错误消息”。我需要从我的组件传递一个实际错误吗？因为我刚刚创建了一个模拟错误消息变量并传递了它。
模拟您的服务以返回与组件消息相同的消息。或者只是期望测试中的消息是被抛出的组件消息。
我通过修改您的线路解决了这个问题。 except(() =>....但我不确定如何访问错误，因为在组件中它只是一个参数。我的测试实际上并没有模拟因此而失败的方法，因此永远不会到达 showAlert 行。
spyOn(myService, 'getData').and.throwError(error.message) 语句应该抛出模拟错误并且应该调用组件 catch 块。这不工作吗？
那是我最初尝试过的，但茉莉花说它找不到“错误”。我的服务的错误处理是我的服务类中的私有服务，所以对组件的错误处理是在组件方法中完成的。

【解决方案3】：

考虑到你的 myService 被注入到你正在测试的组件中，间谍看起来像这样。

spyOn(component['myService'], 'getData').and.returnValue(throwError({message: 'Foo'}));

【讨论】：