Question

我有一个安装程序，用于编写Angular应用程序，并使用JEST进行测试。

一切似乎都可行，直到我尝试模仿Angular中的事件交互。以下测试确实有效：

it('should delegate click to component', () => {
  jest.spyOn(component, 'add');
  const button = fixture.debugElement.query(By.css('button > fa-icon[icon="plus"]'));
  button.nativeElement.click();
  expect(component.add).toHaveBeenCalled();
});

但是，当我尝试使用Fixture的triggerEventHandler('click', null)方法时，永远不会调用间谍。

it('should delegate click to component', () => {
  jest.spyOn(component, 'add');
  const button = fixture.debugElement.query(By.css('button > fa-icon[icon="plus"]'));
  button.triggerEventHandler('click', null);
  expect(component.add).toHaveBeenCalled();
});

我确实尝试将其包装在fakeAsync中，调用tick()（和flush()），但这似乎没有任何作用。

主要问题不是这种情况...因为我可以在本机元素上触发事件，所以更大的问题是何时必须测试自定义事件绑定。

有人知道为什么使用本机元素的click函数是可行的（我已经读到它使用DOM的本机事件冒泡），但是不使用灯具的triggerEventHandler吗？更重要的是，如何解决此问题？

谢谢。

其他信息

我正在使用以下玩笑配置（从package.json复制）：

"jest": {
"preset": "jest-preset-angular",
"setupTestFrameworkScriptFile": "<rootDir>/src/setup-jest.ts",
"verbose": true,
"testURL": "http://localhost/",
"transform": {
  "^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
  "^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
  "node_modules/(?!(@ngrx|ngx-bootstrap))"
],
"globals": {
  "ts-jest": {
    "tsConfigFile": "src/tsconfig.spec.json",
    "useBabelrc": true
  },
  "__TRANSFORM_HTML__": true
}

}

Answer 1

我不知道您的按钮单击处理程序如何工作，但是请记住button.nativeElement.click()与button.triggerEventHandler('click', null)并不完全相同。前者将具有一个带有目标的真实事件对象，后者将具有您指定的内容，即null，因此至少应使用：

  button.triggerEventHandler('click', { target: button.nativeElement })

但是我不明白为什么您应该在triggerEventHandler上使用nativeElement.click()。

用Jest进行角度测试-triggerEventHandler问题

1 个答案: