我如何在我的Karma / Jasmine测试中调试“ [object ErrorEvent]引发”错误？

Question

我有几个失败的测试，仅输出[object ErrorEvent] thrown。我在控制台中看不到任何可帮助我确定问题代码的内容。我需要做些什么来追踪这些吗？

[编辑]：我正在运行Karma v1.70，Jasmine v2.7.0

Answer 1

要解决您必须在不使用源映射的情况下运行测试的方法，]：>

CLI v6.0.8及更高版本

--source-map=false

CLI v6.0.x早期版本

--sourceMap=false

CLI v1.x

--sourcemaps=false

快捷方式ng test -sm=false也可能有效

https://github.com/angular/angular-cli/issues/7296上有一个未解决的问题>

UPDATE

：我也遇到了这个问题，所以我刚迁移到最新的cli，并确保所有软件包都在package.json中进行了更新，并且我完全重新安装了node_modules，所以现在问题已经解决了。

如果您想查看确切的错误，只需在您的计算机上打开devtools控制台测试正在运行

如果sourcemap = false无效，请尝试1）打开运行测试的浏览器2）点击调试按钮3）打开控制台

错误将在那里

尝试通过从终端运行测试来获得更具描述性的错误消息，如下所示：

ng test -sm=false

在测试中，您可以替换

it('should...')

与

fit('should...') 

现在仅运行以fit

开头的测试。要在运行测试后使浏览器保持打开状态，请按以下方式运行测试：

ng test -sm=false --single-run false
个人，我两次遇到此错误。两者都仅在调用Fixture.detectChanges（）时触发。
[first

的时候，我通过在我的.html文件中更安全地使用字符串插值解决了它。

不安全示例：

<p>{{user.firstName}}</p>
Safe（r）
示例（注意问号）：

<p>{{user?.firstName}}</p>
同样适用于属性绑定：
<p [innerText]="user?.firstName"></p>
[second
时间，我在.html文件中使用DatePipe，但是我在其上使用的模拟属性不是日期。

。html文件：

<p>{{startDate | date: 'dd-MM-yyyy'}}</p>
。ts（模拟数据）文件（错误
）：

let startDate = 'blablah';
。ts（模拟数据）文件（正确
）：

let startDate = '2018-01-26';

这是因为茉莉花框架无法处理ErrorEvent类型，所以它不会提取错误消息，而是对该对象调用error.toString()。

我刚刚在茉莉花回购处提出了一个问题https://github.com/jasmine/jasmine/issues/1594

只要不固定，您可以在node_modules文件夹中临时修补已安装的jasmine软件包。在我的情况下是

node_modules/jasmine/node_modules/lib/jasmine-core/jasmine.js

然后从此更改ExceptionFormatter的实现

if (error.name && error.message) {
    message += error.name + ': ' + error.message;
} else {
    message += error.toString() + ' thrown';
}
至此
if (error.name && error.message) {
    message += error.name + ': ' + error.message;
} else if (error.message) {
    message += error.message;
} else {
    message += error.toString() + ' thrown';
}
它有助于识别问题。

对我来说，这与在组件的ngOnInit中解决承诺有关。我必须使用async，fakeAsync并打勾，以及使用spyOn]取消异步服务

beforeEach(async(
  //... initialise testbed and component
))
beforeEach(fakeAsync(
  // ... setup mocks then call:
  component.ngOnInit()
  tick()
  fixture.detectChanges()
))

Angular - How to unit test component with asynchronous service call

TL; DR：这可能与测试路由有关。

我也得到[object ErrorEvent] thrown。一个小时后，将其跟踪到一行代码。

this.username = this.userService.getUser(this.route.snapshot.paramMap.get('id'))[0];
问题在于测试环境试图评估this.route.snapshot.paramMap.get('id')。
如果将其替换为0，则[object ErrorEvent] thrown消失。
我的userService的用户如下：

public users = [ ["admin", "First name", "Surname", etc... ] ].
所以0刚好在索引0处获得此用户。
否则，当正常运行我的应用程序时，当用户从我的用户列表中选择要编辑的用户时，将评估this.route.snapshot.paramMap.get('id')。>
因此在我的HTML中，*ngFor="let user of users; index as i"循环显示所有用户，然后显示routerLink="/edit/{{i}}"，因此您可以单击每个用户的编辑按钮，单击该按钮可以转到例如。 http://localhost:4200/edit/0编辑上述管理员用户的详细信息。

每个测试用例之后的清洁方法：

  afterEach(() => {
    TestBed.resetTestingModule();
  })

我有同样的问题。发生此错误的一种方法是，当您尝试访问模板中任何为null或未定义的内容时。确保对这些变量进行安全检查。

例如，当组件加载时未定义config时，它将抛出[object：ErrorEvent]。>

template.html

<div *ngIf="config.options">
   .....
   ......
</div>

改为执行此操作

<div *ngIf="config?.options">
   .....
   ......
</div>
 
如果您为Karma测试运行程序打开了Chrome窗口，则可以打开开发人员工具并检查控制台。对我而言，这有助于我发现该应用程序无法在未定义的数组上使用Array.findIndex方法（因为数据结构是由日期字符串组织的，例如data [2018] [3] [28]），并且我碰巧指出了错误的日期），但是测试不仅在错误中停了下来，而且还在继续运行。
 
对我来说，问题是我有一个偶然使用auth0-lock
库的测试。
 
这似乎是一个异步问题，因为在我的一个组件规格中添加了足够的it后，我能够获得指向该文件和该文件中的行的可用错误消息（与paramMap。
在测试ParamMap的规范中，我刚刚添加：
  describe('this test', () => {
    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });

    it('will succeed', () => {
      expect(true).toBeTruthy();
    });
  });
 
您可能进行的竞赛或异步测试设置不正确或使用不正确。我假设调试情况需要修复，而忽略命令行通过。只要不断刷新业力测试运行程序（浏览器），以防错误[object ErrorEvent] thrown间歇性出现，然后确保正确实现了异步条件。
希望这行得通。
 
[抛出对象错误事件
此错误表明您有未定义的内容。根据我的经验，调试它的最简单方法是：
it('should create', () => {
    console.log(component);
    // You can check in the browser log which property is undefined
    });
 
就我而言，问题出在服务上，因为在测试运行期间将无法定义对象之一。 
服务代码示例类似于下面对dom的访问，
  const elem = this.document.querySelector(element) as HTMLElement;
  elem.scrollIntoView({param1: ''});
引用该服务的规范失败，错误为'[object ErrorEvent]被抛出
'。
我在引用此规范的所有规范中嘲笑了我的服务对象，问题得到了解决。
模拟服务

class MockService {
serviceMethod(div) : void {
  testElement = document.querySelector('div') as HTMLElement;
  return testElement;
  } 
}
并在下面的提供程序中使用此模拟服务对象，
beforeEach(async(() => {

TestBed.configureTestingModule({
  declarations: [Component],
  providers: [
     { provide: Service, useClass: MockService },
    ],
})
  .compileComponents();
}));
 
我在proxy.conf.json中定义的应用程序中使用了代理，例如：
'/api': { 'target': 'some path', 'changeOrigin': false }
由于Karma不了解此代理，因此它在控制台中不断出现错误，提示找不到API端点。因此，在查看了Karma文档之后，我发现我可以做的就是在karma.conf.js中使用来自proxy.conf.json的相同对象添加“ proxies”属性：
proxies: { '/api': { 'target': 'some path', 'changeOrigin': false }}
控制台中的错误已消失，并且不再抛出[object errorEvent]。
 
最后，什么对我有用：
    TestBed.resetTestingModule();
  })

Answer 2

对我来说，问题是我有一个偶然使用auth0-lock

Answer 3

这似乎是一个异步问题，因为在我的一个组件规格中添加了足够的it后，我能够获得指向该文件和该文件中的行的可用错误消息（与paramMap。

Answer 4

您可能进行的竞赛或异步测试设置不正确或使用不正确。我假设调试情况需要修复，而忽略命令行通过。只要不断刷新业力测试运行程序（浏览器），以防错误[object ErrorEvent] thrown间歇性出现，然后确保正确实现了异步条件。

希望这行得通。

Answer 5

[抛出对象错误事件

Answer 6

就我而言，问题出在服务上，因为在测试运行期间将无法定义对象之一。

服务代码示例类似于下面对dom的访问，

  const elem = this.document.querySelector(element) as HTMLElement;
  elem.scrollIntoView({param1: ''});

引用该服务的规范失败，错误为'[object ErrorEvent]被抛出

Answer 7

我在proxy.conf.json中定义的应用程序中使用了代理，例如：

'/api': { 'target': 'some path', 'changeOrigin': false }
由于Karma不了解此代理，因此它在控制台中不断出现错误，提示找不到API端点。因此，在查看了Karma文档之后，我发现我可以做的就是在karma.conf.js中使用来自proxy.conf.json的相同对象添加“ proxies”属性：

proxies: { '/api': { 'target': 'some path', 'changeOrigin': false }}

Answer 8

最后，什么对我有用：

    TestBed.resetTestingModule();
  })

Answer 9

如果sourcemap = false无效，请尝试1）打开运行测试的浏览器2）点击调试按钮3）打开控制台

Answer 10

尝试通过从终端运行测试来获得更具描述性的错误消息，如下所示：

Answer 11

这是因为茉莉花框架无法处理ErrorEvent类型，所以它不会提取错误消息，而是对该对象调用error.toString()。

Answer 12

对我来说，这与在组件的ngOnInit中解决承诺有关。我必须使用async，fakeAsync并打勾，以及使用spyOn]取消异步服务

beforeEach(async(
  //... initialise testbed and component
))
beforeEach(fakeAsync(
  // ... setup mocks then call:
  component.ngOnInit()
  tick()
  fixture.detectChanges()
))

Answer 13

TL; DR：这可能与测试路由有关。

Answer 14

每个测试用例之后的清洁方法：

  afterEach(() => {
    TestBed.resetTestingModule();
  })

Answer 15

我有同样的问题。发生此错误的一种方法是，当您尝试访问模板中任何为null或未定义的内容时。确保对这些变量进行安全检查。

例如，当组件加载时未定义config时，它将抛出[object：ErrorEvent]。>

template.html

Answer 16

如果您为Karma测试运行程序打开了Chrome窗口，则可以打开开发人员工具并检查控制台。对我而言，这有助于我发现该应用程序无法在未定义的数组上使用Array.findIndex方法（因为数据结构是由日期字符串组织的，例如data [2018] [3] [28]），并且我碰巧指出了错误的日期），但是测试不仅在错误中停了下来，而且还在继续运行。

对我来说，问题是我有一个偶然使用auth0-lock

库的测试。