我有一个组件渲染一个飞出如下HTML代码一旦飞出打开。我想使用测试库编写测试，以验证单击flyoutItem后aria-expanded值为false。有更好的方法来验证咏叹调扩展了吗?
// component
<body>
<div>
<div >
<button aria-expanded="true" class="btn">
Flyout button
</button>
<div class="flyoutContainer>
<ul class="flyoutItem" role="listbox" >
<li aria-selected="false" class="item" role="option" >
<div class="option" >
<span >Data is here</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
// test
render(<flyout />);
const item = screen.getByText(/Data is here/, {selector: 'span'});
fireEvent.click(item);
const flyoutButton = screen.getByRole('button', {name: 'Flyout button'});
expect(flyoutButton).toHaveClass('aria-expanded').;
expect(flyoutButton).toHaveAttribute('aria-expanded', 'false')
您可以像这样使用getByRole()选项expanded: false
expect(
screen.getByRole("button", {
name: "Flyout button",
expanded: false,
})
).toBeInTheDocument();