1. jest-axe 在 React/Vue 组件单测的无障碍断言工程实践
问题
请说明 jest-axe 在 React/Vue 组件单测中的无障碍断言工程实践？
考察点
- jest-axe 的用法
- axe 规则在单测的应用
- 组件级 a11y 断言
答案
jest-axe 把 axe-core 封装为 Jest 断言，可在组件单测中检查无障碍。用法：expect(container).toHaveNoViolations()，用 @testing-library/react 的 render 得到容器，导入 axe 后启用。实践：对每个组件渲染不同状态（默认、错误、禁用、加载）并断言无违规；对交互组件断言 aria 属性、名称、标签正确。优点：在组件开发阶段即发现静态规则问题（缺 alt、label、对比度等），反馈快。局限：只覆盖静态规则，无法验证键盘导航、焦点管理、读屏体验等动态行为，需配合其他测试。
解析
jest-axe 是"组件级 a11y 测试"的起点，把 axe 检查嵌入单测，成本低、反馈快。掌握其用法与局限（只测静态规则），是组件无障碍测试的工程实践。
示例代码
import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);
test('button has no a11y violations', async () => {
const { container } = render(<Button>提交</Button>);
expect(await axe(container)).toHaveNoViolations();
});