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

Question

我有一个使用mat-menuAngular Material UI 的组件。当我打电话时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 文档。

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

Answer 1

在做了一些挖掘之后，我发现的解决方案是添加隐藏：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。