带有开玩笑和@testing-library/angular 的 mat-menu 的单元测试用例

问题描述

我有一个使用 Angular Material UI 中的 mat-menu 的组件。当我调用 fireEvent.click() 时，出现错误：控制台中的 TestingLibraryElementError: Unable to find role="menu"。

这是我的测试用例：

test('it should open pages menu on button click',async () => {
  
  let component = await render(PaginationComponent,{
    imports:[MaterialModule]
  });
  let buttonCLick = fireEvent.click(screen.getByTestId('openChangePageSizeMenu'));
  expect(buttonCLick).toBeTruthy();

  await screen.findByRole('menu');

});

我无法指出我哪里出错了。我还阅读了 MatMenuHarness 文档 from here。

我正在使用 @testing-library/angular 和 jest。

解决方法

经过一番挖掘，我找到的解决方案是添加 hidden: true。添加后，测试用例如下所示：

test('it should open pages menu on button click',async () => {
  
  let component = await render(PaginationComponent,{
    imports:[MaterialModule]
  });
  let buttonCLick = fireEvent.click(screen.getByTestId('openChangePageSizeMenu'));
  expect(buttonCLick).toBeTruthy();

  await screen.findByRole('menu',{hidden:true});

});

注意：这也适用于 mat-dialog。