无法使用 React 测试库单击侧面菜单中的列表 child 元素

Question

这是我使用 React 库的第一周，我对这篇文章有点困惑，我有一个项目列表，这些项目是侧边菜单的一部分。我可以断言他们的文本将他们标识为 parent 列表标签的 child。但是当我尝试以这种方式触发点击事件时，它不会将我导航到下一页。只有当我直接通过他们的文本而不是 parent 列表的 child 来定位该列表项时，它才会起作用，我试图避免这种情况，因为可能还有其他具有相同标题的可点击元素在页面上。如果有人可以请指出我在这里可能缺乏理解的地方。

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

它似乎不起作用，因为 link 项目实际上不可点击，不是锚元素。将其更改为下面的部分并且它起作用了，通过按钮的作用保证了唯一性。

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

无法使用 React 测试库单击侧面菜单中的列表 child 元素

Not able to click list child element from side menu using react testing library

reactjs

react-testing-library