使用test-library的screen校验含is-disabled的div时toBeDisabled报错如何解决

• toBeDisabled 是React Testing Library配套断言库提供的API，仅会识别元素的原生disabled属性、符合规范的表单元素禁用状态，以及aria-disabled="true"属性，无法识别自定义类名实现的禁用样式
• 你当前选中的是外层的<div>元素，该元素本身不属于原生可交互元素，就算添加disabled属性也不会被toBeDisabled识别；实际可交互的按钮是内层的<a>标签，禁用状态目前仅通过外层的is-disabled类名实现，没有配套的无障碍属性

分两种场景处理：

场景1：可修改组件源码（优先推荐） #

给可交互的<a>标签添加符合无障碍规范的禁用属性，点击事件中同时阻止禁用状态下的交互行为：

// 组件内逻辑
const isDisabled = true // 你的禁用判断逻辑
return <a 
  className={`bar-button ${isDisabled ? 'is-disabled' : ''}`}
  aria-disabled={isDisabled}
  onClick={e => {
    if (isDisabled) e.preventDefault()
    // 原有点击逻辑
  }}
>
  {/* 原有子元素 */}
</a>

测试代码调整为直接断言可交互的按钮元素：

// test.ts
const button = screen.getByText('I am action Button').closest('a')
expect(button).toBeDisabled()

场景2：无法修改组件源码，仅能适配现有实现 #

直接断言对应元素是否包含禁用类名即可：

// test.ts
const buttonWrapper = screen.getByText('I am action Button').closest('div.menu')
expect(buttonWrapper).toHaveClass('is-disabled')

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