React Native中Jest代码覆盖报告配置及全覆盖最佳实践咨询

默认情况下，Jest只会统计被测试用例直接或间接引入的代码文件的覆盖率数据。也就是说，只有那些被你的测试文件import过的应用代码，才会出现在报告里；没被测试关联到的文件，Jest不会主动去扫描统计，所以你现在看到的只有测试涉及的文件且覆盖率100%。

你需要修改项目的Jest配置文件（jest.config.js，如果是Expo项目则在app.json的expo.jest字段里），通过collectCoverageFrom指定要覆盖的所有应用文件路径，具体步骤如下：

1. 打开项目根目录的jest.config.js（没有的话直接新建）
2. 添加或调整以下配置项：

module.exports = {
  // 保留你原有的其他配置（比如preset、transform等）
  collectCoverageFrom: [
    'src/**/*.{js,jsx,ts,tsx}', // 匹配src目录下所有JS/TS文件
    '!src/**/*.test.{js,jsx,ts,tsx}', // 排除测试文件本身
    '!src/**/*.mock.{js,jsx,ts,tsx}', // 排除mock文件
    '!src/index.js', // 可选：如果入口文件无需覆盖可以排除
    '!src/**/vendor/**', // 可选：排除第三方依赖的代码文件
  ],
  coverageReporters: ['lcov', 'text-summary', 'html'], // 生成多种格式报告，html版能直观看到未覆盖文件和代码行
};

3. 重新执行npx jest --coverage，此时报告会包含所有匹配到的应用文件，未被测试覆盖的文件会显示0%覆盖率，html报告里还会标记具体未覆盖的代码行。

• 先抓核心，再补边角：优先覆盖业务核心模块（比如用户认证、支付逻辑、数据处理工具类），这些模块出错影响最大；再逐步覆盖UI组件、辅助工具等非核心部分，避免一开始就盲目追求全文件覆盖。
• 分场景针对性测试：
  • 纯函数/工具类：写单元测试覆盖所有分支，包括边界条件（空值、非法输入）、异常场景（比如API返回错误格式）
  • UI组件：用React Testing Library测试核心交互（按钮点击、状态切换）和渲染逻辑（比如数据是否正确展示），不用纠结样式细节（比如不同屏幕尺寸的布局）
  • 异步逻辑：用Jest mock模拟API请求、Redux saga等依赖，覆盖成功、失败、加载三种核心状态
• 避免过度测试：
  • 不用测试第三方库的功能（比如React Native自带的Text、View组件本身的渲染）
  • 简单的getter/setter无需单独测试，除非里面包含复杂逻辑
  • 专注测试功能表现，而非实现细节（比如测试组件是否渲染出正确数据，而不是组件内部用了什么变量）
• 利用覆盖率报告补漏：每次执行npx jest --coverage后，查看终端的text-summary或html报告里的未覆盖行，针对性补充测试用例。比如报告显示某函数的else分支未覆盖，就加一个触发该分支的测试场景。
• CI流程加校验：在持续集成里配置覆盖率阈值（比如要求最低90%），防止代码提交后覆盖率下降，逐步向100%推进。
• 处理RN特有文件：
  • 原生模块（iOS/Android代码）Jest无法直接覆盖，可单独写原生测试，或者在RN层用mock跳过，专注覆盖JS/TS层代码
  • 图片、字体等静态资源Jest默认会mock，不用为这些文件写测试
• 团队统一规范：约定新功能提交必须附带对应测试，代码评审时检查覆盖率，确保所有人都遵循覆盖原则。

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