无法使用react测试库从侧菜单中单击列表子元素

Question

这是我使用react库的第一周，我有点困惑，我有一个项目列表，是侧菜单的一部分。我可以断言它们的文本，将它们标识为父List标记的子标记。但当我尝试以这种方式触发点击事件时，它不会导航到下一页。它只会工作，如果我的目标列表项的文本直接，而不是作为父列表的子列表，这是我试图避免，因为可能有其他可点击的元素具有相同的标题在页面上。如果有人能指出我在这里可能缺乏的理解，请。

describe('App when it is rendered in a certain state:', () => {
beforeAll(() => {
render(<Root/>);
});
it('should render the dashboard after logging in', async () => {

expect(screen.queryByTestId('dashboard')).toBeInTheDocument();
expect(screen.getByTestId('side-menu')).toBeInTheDocument();
const liArr = screen.queryAllByRole('listitem')
expect(liArr[0].textContent).toBe('Dashboard')
expect(liArr[1].textContent).toBe('Schools')
expect(liArr[2].textContent).toBe('Teachers')
const teachersLink = liArr[2];
expect(teachersLink).toBeInTheDocument();
// await fireEvent.click(screen.getByText('Teachers')) // This navigates me fine
await fireEvent.click(teachersLink);  // This does not navigate me
expect(screen.getByText('Teachers page')).toBeInTheDocument(); 
});
});

这是SideMenu组件，链接来自:

export default function SideMenu() {
const classes = useStyles();
return (
<div className={classes.root} data-testid="side-menu">
<List>
<ListItemLink to="/dashboard" primary="Dashboard"/>
<ListItemLink to="/schools" primary="Schools"/>
<ListItemLink to="/teachers" primary="Teachers"/>
</List>
</div>
);
}

非常感谢。

Answer 1

似乎它没有工作，因为链接项目实际上是不可点击的，不是一个锚元素。将其更改为下面的部分，它工作了，通过按钮的角色保证唯一性。

async function navigateToTeachersPage() {
await fireEvent.click(screen.getByRole('button', { name: 'Teachers' }));
expect(screen.getByTestId('teachers')).toBeInTheDocument();
}