如何用Jest Coverage识别已覆盖但未实际测试的代码行？

代码覆盖率工具会把测试执行过的代码行标记为“已覆盖”，但实际场景中，有些代码虽然被执行，却没有对应的断言验证其预期行为——也就是你说的“已覆盖但未实际测试”的情况。

举个极简的React组件例子：

function BasicComponent() {
  return <div>
    <h1>Hello there</h1>
    <p>This is a basic component</p>
  </div>;
}

用Jest和React-Testing-Library写的测试如下：

import { render, screen } from '@testing-library/react';

describe('<BasicComponent />', () => {
  it('should render correctly', () => {
    render(<BasicComponent />);

    expect(screen.getByText('Hello there')).toBeInTheDocument();
  });
});

这个测试会执行组件的所有代码行，代码覆盖率显示为100%，但实际上我们从未断言<p>标签里的文本是否存在——这段代码只是被执行了，却没有被有效测试。

可行的解决方案 #

• 使用断言覆盖率工具：部分工具能追踪代码行是否被断言关联，而非仅被执行。比如用jest-coverage-validator配合Jest的覆盖率报告，它可以检查每个代码行是否有对应的断言覆盖；针对React组件，也可以结合测试库的查询方法分析，识别未被查询断言的渲染元素。
• 制定严格的测试规范：在团队测试规则中明确，所有渲染出的可见内容都需要通过screen.getBy*/screen.queryBy*等方法查询并断言。比如给上面的测试补充断言：

  expect(screen.getByText('This is a basic component')).toBeInTheDocument();
  

  靠流程约束避免遗漏。
• 突变测试工具：这类工具会给代码注入微小改动（比如修改<p>的文本内容），再运行测试。如果测试依然通过，说明这段代码没有被有效测试——因为代码逻辑变了测试却没察觉。stryker-js是常用的突变测试工具，能自动检测这类问题。
• 手动审查测试对应关系：针对小型项目或核心组件，手动核对每一行渲染内容、每一个逻辑分支是否都有对应的断言。比如例子里组件渲染了两个文本节点，测试只断言了一个，手动检查就能快速发现遗漏。

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