您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

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

时间:2023-01-08 11:36:43  来源:今日头条  作者:启辰8

 

什么是代码测试覆盖率?

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

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

所以基本上,增加测试覆盖率是维护 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 元素的呈现,以增加此测试的代码覆盖率。



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
成为出色的问题解决者(这就是开发人员)没有捷径可走。精通是以练习为代价的。 由于算法和数据结构构成了每个软件的支柱,因此练习它们应该是您的首要任务。 作为最常用的存储...【详细内容】
2023-01-08  Tags: JavaScript  点击:(1)  评论:(0)  加入收藏
什么是代码测试覆盖率?在执行一组测试期间执行的代码百分比称为测试覆盖率。 它可以衡量有多少代码库经过了测试,并可能指出代码中可能没有接受足够测试的部分。 在这篇文章...【详细内容】
2023-01-08  Tags: JavaScript  点击:(1)  评论:(0)  加入收藏
Async/await 是随 ES2017 版本在 JavaScript 中引入的一种语言功能,可在 JavaScript 中启用异步、非阻塞行为。 它建立在promise之上,提供了一种更简单、更清晰的方式来处理...【详细内容】
2023-01-07  Tags: JavaScript  点击:(0)  评论:(0)  加入收藏
JavaScript 是一种轻量级的解释型编程语言。它最初是为在网络浏览器中使用而开发的,但后来发现了其他用途,包括服务器端脚本、游戏开发、数据可视化和机器学习。JavaScript 是...【详细内容】
2023-01-03  Tags: JavaScript  点击:(14)  评论:(0)  加入收藏
了解这33个JavaScript概念绝对会让你将来的职业生涯受益无穷。话不多说,直接进入主题!1. 调用栈 调用栈是解释器(如web浏览器中的JavaScript解释器)跟踪其在调用多个函数的脚本...【详细内容】
2022-12-24  Tags: JavaScript  点击:(19)  评论:(0)  加入收藏
摘要:在前不久刚发布的 GitHub 年度报告中,Java 依旧是最受程序员欢迎的编程语言,而想要成为一名优秀的 Java 程序员,这 7 个 GitHub 代码库可能会提供助力。链接:https://java.p...【详细内容】
2022-11-29  Tags: JavaScript  点击:(21)  评论:(0)  加入收藏
JavaScript奇淫技巧:20行代码,实现屏幕录像本文展示一个技巧,可以给任何网站、网页实现屏幕录像功能。即使你不是网站的管理者,也可以给它添加录制功能。方法如下:复制一段JS代码...【详细内容】
2022-11-18  Tags: JavaScript  点击:(18)  评论:(0)  加入收藏
计算距离下次生日还有多少天注意这里借助 moment 实现 getBirthdayFun(){ // 首先要获取到今年的生日 let birthdayTime = moment().format(&#39;YYYY-&#39;...【详细内容】
2022-10-28  Tags: JavaScript  点击:(46)  评论:(0)  加入收藏
作 者 | 肖荣强(路迁)写在前面为了提升应用稳定性,我们对前端项目开展了脚本异常治理的工作,对生产上报的js error进行了整体排查,试图通过降低脚本异常的发生频次来提升相关...【详细内容】
2022-10-27  Tags: JavaScript  点击:(33)  评论:(0)  加入收藏
框架之战是 JavaScript 社区中的热门话题,也是业界众多圣战之一。一开始,jQuery 崭露头角,接下来 AngularJS 初露锋芒,再到现代框架混战,战争一直很激烈。然而现在框架之战已经...【详细内容】
2022-09-02  Tags: JavaScript  点击:(111)  评论:(0)  加入收藏
▌简易百科推荐
成为出色的问题解决者(这就是开发人员)没有捷径可走。精通是以练习为代价的。 由于算法和数据结构构成了每个软件的支柱,因此练习它们应该是您的首要任务。 作为最常用的存储...【详细内容】
2023-01-08  启辰8  今日头条  Tags: JavaScript   点击:(1)  评论:(0)  加入收藏
什么是代码测试覆盖率?在执行一组测试期间执行的代码百分比称为测试覆盖率。 它可以衡量有多少代码库经过了测试,并可能指出代码中可能没有接受足够测试的部分。 在这篇文章...【详细内容】
2023-01-08  启辰8  今日头条  Tags:JavaScript   点击:(1)  评论:(0)  加入收藏
Async/await 是随 ES2017 版本在 JavaScript 中引入的一种语言功能,可在 JavaScript 中启用异步、非阻塞行为。 它建立在promise之上,提供了一种更简单、更清晰的方式来处理...【详细内容】
2023-01-07  启辰8  今日头条  Tags:JavaScript   点击:(0)  评论:(0)  加入收藏
译者 | 涂承烨由于代码可见性低,使用Java脚本进行编码可能会很耗时。这里有12个优雅的JavaScript技巧,可以帮助你在2023年优化代码生成。JavaScript已经成为下一批开发人员中...【详细内容】
2023-01-06    51CTO  Tags:JavaScript   点击:(10)  评论:(0)  加入收藏
WebRTC vs WebSocket1.什么是WebRTC?WebRTC 是一组 JavaScript API,可以在两个浏览器之间建立点对点连接, 实现音频和视频等数据的传输,也可以用它创建有语音/视频通话功能的应...【详细内容】
2023-01-04  前端进阶  今日头条  Tags:WebRTC   点击:(24)  评论:(0)  加入收藏
JavaScript 是一种轻量级的解释型编程语言。它最初是为在网络浏览器中使用而开发的,但后来发现了其他用途,包括服务器端脚本、游戏开发、数据可视化和机器学习。JavaScript 是...【详细内容】
2023-01-03  游戏开发乔     Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
有时候,我们需要知道当前网络的状态来做一些事情,以提升用户体验,这节课,我们来看一下,如何使用 JavaScript 来检测用户是否在线。检测连接状态我们可以利用navigator.onLine API...【详细内容】
2023-01-03  前端小智  今日头条  Tags:JavaScript   点击:(10)  评论:(0)  加入收藏
在PC时代,曾有个名为“变速齿轮”的神奇软件,可以加快或减慢系统时间。当时常用来修改游戏速度,可实现外挂一般的效果,很不可思议。本文,将用JavaScript复刻这一功能,实现一个用于...【详细内容】
2022-12-27   WangLiwen   网易号  Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
了解这33个JavaScript概念绝对会让你将来的职业生涯受益无穷。话不多说,直接进入主题!1. 调用栈 调用栈是解释器(如web浏览器中的JavaScript解释器)跟踪其在调用多个函数的脚本...【详细内容】
2022-12-24  程序猿最幽默  今日头条  Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
使用NodeJS开发的应用,如果需要处理大量数据,可能导致堆溢出。错误提示中,会有“JavaScript heap out of memory”,如下图:通过调试分析,会发现:在出错之前,其使用的内存量是一直增...【详细内容】
2022-12-11    网易号  Tags:NodeJS   点击:(33)  评论:(0)  加入收藏
站内最新
站内热门
站内头条