如何提高 JavaScript React 项目中的测试覆盖率

2023-01-08 今日头条启辰8

加入收藏

什么是代码测试覆盖率？

在执行一组测试期间执行的代码百分比称为测试覆盖率。它可以衡量有多少代码库经过了测试，并可能指出代码中可能没有接受足够测试的部分。在这篇文章中，我们将讨论在 JAVAScript React 项目中增强测试覆盖率的几种方法。

确保所有新代码都经过测试。确保任何新代码都伴随至少一个测试是增加测试覆盖率的最佳策略之一。这保证了测试正在使用新代码，并有助于在错误出现时立即识别它们。
使用代码覆盖工具您可能会发现您的代码库的某些部分是否未使用各种方法进行测试。这些工具可以用作测试套件的一个组件，并提供一份报告，显示被测试代码的比例。 Jest 和 Istanbul 是两种常见的 JavaScript 工具。
对于边缘情况，创建测试。测试是至关重要的，不仅只盲目乐观，而且对于最初可能并不明显的几种边缘情况也是如此。多亏了这个，否则可能会被忽视的角落实例可能会被发现。
利用测试框架 Mocha、Jasmine 和 Jest 等测试框架提供的功能和断言使编写和组织测试变得更简单。这些框架中经常包含代码覆盖率工具，这使得在添加额外测试时跟踪测试覆盖率变得更加简单。
创建单元测试单元测试是简短的独立测试，用于评估单段代码，例如函数。编写一组单元测试可以在问题发生时更容易发现问题，并确保代码的所有组件都经过测试。

所以基本上，增加测试覆盖率是维护 JavaScript React 项目中代码库完整性的关键步骤。您可以帮助确保您的代码经过广泛测试，并通过使用上述过程及早发现任何错误。

React 项目中的代码覆盖率是如何工作的？

这是一个代码覆盖工具如何用于使用 React 创建的项目的示例。

先安装一个代码覆盖程序，比如nyc。为此，执行以下命令：

npm install --save-dev nyc

然后可以使用 nyc 命令运行测试并提供代码覆盖率报告。例如，如果您使用 Jest 作为测试运行程序，您可以更改 package.json 文件以添加以下脚本：

"scripts": {
  "test": "nyc jest"
}

现在，nyc 将执行您的测试并在您运行 npm test 时生成代码覆盖率报告。通过在浏览器中启动文件 coverage/index.html，您可以查看报告。

您可以在 package.json 文件中定义一个覆盖率阈值，以确保您的测试覆盖率在可接受的范围内。请参见下面的示例。

"nyc": {
  "check-coverage": true,
  "lines": 80,
  "statements": 80,
  "branches": 80,
  "functions": 80
}

如果任何提供的指标的覆盖率低于 80%，测试将失败。

通过向每个新代码添加测试并针对边缘情况进行测试，除了使用代码覆盖率工具之外，您还可以增加测试覆盖率。此外，为了简化测试的编写和组织，您可以使用 Mocha 或 Jasmine 等测试框架。

这是一个 React 组件的描述以及一些 Jest 测试。

export default function MyComponent() {
  return (
    <>
      <div>
        <h1>My Component</h1>
        {props.children}
      </div>
    </>
  );
}

现在检查这个测试示例，它对组件 MyComponent 具有出色的代码覆盖率。

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the correct content', () => {
    const wrApper = shallow(
      <MyComponent>
        <p>Hello World</p>
      </MyComponent>
    );
    expect(wrapper.find('h1').text()).toEqual('My Component');
    expect(wrapper.find('p').text()).toEqual('Hello World');
  });
});

该测试通过测试“h1”元素的绘制和 props.children 元素的渲染来全面涵盖该功能。

正如您在这张测试图中看到的那样，代码覆盖率不足的相同组件的测试没有那么完善。

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the correct content', () => {
    const wrapper = shallow(
      <MyComponent>
        <p>Hello World</p>
      </MyComponent>
    );
    expect(wrapper.find('h1').text()).toEqual('My Component');
  });
});

本次测试不测试 props.children 元素的渲染；它只测试“h1”元素的渲染。结果，它为功能提供了不充分的覆盖。

您可以包含一个额外的测试来模拟 props.children 元素的呈现，以增加此测试的代码覆盖率。