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

Question

我有一个组件使用 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.

Answer 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。