升级react-scripts后运行axe无障碍测试报_prettyFormat.format错误如何解决？

紧急场景临时处理 #

如果当前有高优先级代码需要提交，可选两种临时方案绕过测试：

• 跳过整个无障碍测试用例：给测试用例添加skip修饰符，示例：

test.skip('Wizard component should have no accessibility violations', async () => {
  // 原有测试逻辑
})

• 仅临时禁用标题层级检测规则，保留其他无障碍检测逻辑：

const result = await axe(container, {
  rules: {
    'heading-order': { enabled: false }
  }
})

以上两种方案仅适合紧急场景临时使用，后续必须跟进修复，避免无障碍问题遗留

报错根因说明 #

你遇到的TypeError: (0 , _prettyFormat.format) is not a function是依赖版本冲突导致的：本次升级react-scripts后，jest-axe依赖的prettyFormat包版本和项目内其他依赖引入的版本不兼容，axe检测到标题层级违规后，调用format方法格式化报错信息时失败，才抛出了这个和实际问题无关的类型错误，掩盖了真实的无障碍违规提示。要根治这个报错，可以统一项目内prettyFormat的依赖版本，或者将jest-axe升级到和当前react-scripts版本兼容的版本即可。

通用组件标题层级的处理方案 #

你最后提到的两种方案都是业界通用的最佳实践：

• 轻量方案：给组件暴露headingLevel属性，由调用方根据组件的实际使用场景传入对应的标题等级（1-6），组件内部动态渲染对应h标签，代码示例：

// 自定义标题组件示例
const CustomTitle = ({ headingLevel = 2, children }) => {
  const Tag = `h${headingLevel}`
  return <Tag className="title-style">{children}</Tag>
}

• 复杂场景方案：通过Context实现自动标题层级管理，在页面根节点设置当前页面的基础标题等级，下层通用组件自动继承上级等级并做递增，不需要手动传参，适合嵌套层级深、组件复用场景多的大型项目。

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