带有jest和@testinglibrary/angular的mat菜单的单元测试用例

Question

我有一个组件，它使用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文档。

我正在使用@测试库/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});
});

注意：这也适用于垫子对话框。