带有 jest 和 @testing-library/angular 的 mat-menu 单元测试用例答案

【问题标题】：Unit test case for mat-menu with jest and @testing-library/angular带有 jest 和 @testing-library/angular 的 mat-menu 单元测试用例
【发布时间】：2021-06-27 05:43:29
【问题描述】：

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

这是我的测试用例：

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。

【问题讨论】：

标签： angular angular-material jestjs angular-testing-library

【解决方案1】：

经过一番挖掘，我找到的解决方案是添加 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。

【讨论】：