Reactjs 无法使用react testing library从侧菜单中单击“列出子元素”

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

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(); 

});

});

descripe（'在特定状态下呈现时的应用：'，（）=>{
以前（（）=>{
render（）；
});
它（'应该在登录后呈现仪表板'，异步（）=>{
expect（screen.queryByTestId（'dashboard'））.toBeInTheDocument（）；
expect（screen.getByTestId（'side-menu'））.toBeInTheDocument（）；
const-liArr=screen.queryalByrole（'listitem'）
预期（说谎者[0].textContent.toBe（'Dashboard'））
expect（说谎者[1].textContent.toBe（'Schools'））
expect（说谎者[2].textContent.toBe（'Teachers'））
常量教师链接=说谎者[2]；
期望（教师链接）.toBeInTheDocument（）；
//等待fireEvent。单击（screen.getByText（'Teachers'）//这可以很好地导航我
等待fireEvent。单击（teachersLink）；//这不会引导我
expect（screen.getByText（'Teachers page'））.toBeInTheDocument（）；
});
});

这是链接来自的侧菜单组件：

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>
    );
}

导出默认函数侧菜单（）{
const classes=useStyles（）；
返回(
);
}

---

非常感谢。

它似乎不起作用，因为链接项目实际上是不可点击的，不是锚元素。将它改为下面的一块，它工作了，通过一个按钮的作用保证了它的独特性

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