create-react-app如何正确分离单元测试与无障碍(a11y)测试

之前配置失效有三个核心原因：

• react-scripts test 不会直接按传入的位置参数glob做文件过滤，直接写.test.tsx !.a11y.test.tsx的写法不会被正确解析
• .a11y.test.tsx 后缀本身就命中.test.tsx的匹配规则，简单的顺序排除逻辑无法正确过滤交叉命中的文件
• create-react-app 内置的Jest预设会强制合并package.json中配置的testMatch规则，无法通过直接修改testMatch实现完全的规则覆盖，这也是之前调整配置没达到预期的核心原因

可直接复用的配置 #

不需要eject，不需要安装额外依赖，直接修改package.json中的scripts字段即可：

{
  "name": "MyAPP",
  "scripts": {
    "test": "react-scripts test --testPathPattern='(?<!\\.a11y)\\.test\\.tsx$' --watchAll=false",
    "test:a11y": "react-scripts test --testPathPattern='\\.a11y\\.test\\.tsx$' --watchAll=false"
  },
  "jest": {}
}

配置说明 #

• 单元测试命令用负向零宽正则做匹配，只会匹配以.test.tsx结尾、且文件名末尾不带.a11y前缀的文件，从规则层面彻底避免两类测试文件交叉匹配
• 命令中追加的--watchAll=false是CI环境必填参数，避免Jest进入监听模式导致流程卡住，本地开发调试时可以手动追加--watch参数开启监听模式

差异化运行参数配置 #

两类测试可以独立配置运行参数，直接在对应脚本后追加Jest参数即可。针对无障碍测试随机失败的问题，推荐给a11y测试加单线程运行、延长超时的配置，参考示例：

{
  "scripts": {
    "test": "react-scripts test --testPathPattern='(?<!\\.a11y)\\.test\\.tsx$' --watchAll=false --coverage --testTimeout=5000",
    "test:a11y": "react-scripts test --testPathPattern='\\.a11y\\.test\\.tsx$' --watchAll=false --runInBand --testTimeout=30000"
  }
}

• 单元测试可追加--coverage参数自动生成覆盖率报告，超时时间设为5s适配普通单测的执行速度
• 无障碍测试追加--runInBand关闭并行执行，避免多线程争抢资源导致的axe-core渲染检测随机失败，超时时间延长到30s适配完整DOM渲染、无障碍规则扫描的耗时需求

验证方式 #

配置完成后本地执行校验即可：

• 运行npm run test，统计执行的用例总数，确认不包含任何无障碍测试用例
• 运行npm run test:a11y，确认仅加载.a11y.test.tsx后缀的无障碍测试文件

注：--testPathPattern参数是在Jest完成初始文件扫描后做路径正则过滤，优先级高于所有默认testMatch配置，不会被create-react-app的内置预设覆盖，匹配稳定性远高于直接修改testMatch规则。

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