如何在Karma /茉莉花测试中调试“ [object ErrorEvent]引发”错误？

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

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

仅供参考：运行测试后，您可以找到仅由打开的DevTools控制台引发的确切错误。

作为一个快速修复，您可以尝试在没有源映射的情况下运行测试：

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的问题

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

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

错误将在那里

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

ng test -sm=false

在测试中，您可以更换

it('should...')

与

fit('should...') 

现在，只有适合的测试才能运行。要在运行测试后使浏览器保持打开状态，请按以下方式运行测试：

ng test -sm=false --single-run false

我个人两次遇到此错误。两者都仅在调用夹具.detectChanges（）时触发。

在第一时间，我在我的.html文件使用字符串插值更安全地解决了这个问题。

不安全的示例：

<p>{{user.firstName}}</p>

Safe（r）示例（注意问号）：

<p>{{user?.firstName}}</p>

这同样适用于属性绑定：

<p [innerText]="user?.firstName"></p>

在第二次的时候，我使用的是DatePipe在我的.html文件，但模拟性质，我用它并不是一个日期。

.html文件：

<p>{{startDate | date: 'dd-MM-yyyy'}}</p>

.ts（模拟数据）文件（错误）：

let startDate = 'blablah';

.ts（模拟数据）文件（正确）：

let startDate = '2018-01-26';

这是因为jasmine框架无法处理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-如何使用异步服务调用对组件进行单元测试

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只需在index处获取该用户即可0。

否则，当正常运行我的应用程序时，this.route.snapshot.paramMap.get('id')当用户从我的用户表中选择要编辑的用户时，将对它进行评估。

因此，在我的HTML中，*ngFor="let user of users; index as i"循环显示所有用户，然后routerLink="/edit/{{i}}"您可以单击每个用户的编辑按钮，单击该按钮可转到例如http://localhost:4200/edit/0编辑上述admin用户的详细信息。

每个测试用例之后如何清洁：

  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的一个组件规格中添加了足够多的s 之后，我能够获得一条有用的错误消息，该错误消息指向该文件和该文件中的一行（与关联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();
  })