使用test-library验证aria-expanded值为false的最优方案咨询

首先你现有测试里的expect(flyoutButton).toHaveClass('aria-expanded')是错误写法：aria-expanded是元素属性，不是CSS类名，这行可以直接删除。

你原本用toHaveAttribute验证aria-expanded属性的写法本身就是Testing Library官方推荐的标准方案，可读性和可靠性都足够，不需要额外替换。可以从下面几个维度优化测试的健壮性：

• 优先用语义化方式选择元素：不用依赖DOM结构（比如指定span选择器），直接按ARIA角色查询，测试逻辑和用户使用屏幕阅读器的识别逻辑一致，后续调整DOM结构也不会导致测试失效。
• 用userEvent代替fireEvent：userEvent会模拟真实用户的完整交互流程（比如点击时会依次触发mouseover、mousedown、mouseup、click等事件），比fireEvent的单事件触发更贴近实际使用场景，测试结果更可信。
• 异步处理避免误报：大部分前端框架的状态更新是异步的，用异步交互+断言可以避免状态未更新导致的测试失败。

优化后的测试代码示例：

import userEvent from '@testing-library/user-event'

test('点击flyout选项后按钮展开状态变为关闭', async () => {
  const user = userEvent.setup()
  render(<Flyout />)

  // 直接按option角色查询选项，不依赖内部span结构
  const flyoutItem = screen.getByRole('option', { name: /Data is here/ })
  await user.click(flyoutItem)

  const flyoutButton = screen.getByRole('button', { name: 'Flyout button' })
  expect(flyoutButton).toHaveAttribute('aria-expanded', 'false')
})

如果有特殊场景需要更语义化的断言，也可以自定义jest匹配器，但常规业务测试场景下上述方案完全够用。

内容的提问来源于stack exchange，提问作者jacobcan118