笑话和酶:2021年在React中进行单元测试

2020年12月30日11:17:03 发表评论 32 次浏览

本文概述

自框架初期以来, React在2021年进行单元测试已经走了很长一段路。诸如笑话和酵素减少进入生产的编码错误高达40%至80%。部署这些广泛的框架时, 不再需要推出自己的解决方案。

在本文中, 我们将研究如何使用Jest和Enzyme为React构建单元测试, 并学习如何可靠地测试组件树和功能。

先决条件

本教程需要以下方面的基本知识React。我们依靠Node.js服务内容。

你需要安装几个库才能与Jest和Enzyme一起使用。在你的Node.js中包括以下部分package.json文件或使用安装软件包npm:

"devDependencies": {

"@babel/preset-env": "7.12.7", "@babel/preset-react": "^7.12.7", "babel-jest": "^26.6.3", "jest": "^26.6.3", "react-test-renderer": "^17.0.1"

}

尽管React是一个前端框架, 但我们将专注于使用Node.js运行测试。你将使用npm命令运行测试。

一个示例React程序

在进行单元测试之前, 我们需要创建一个简单的程序。我们创建一个函数, 该函数返回简单计算的结果, 而另一个函数则呈现内容。

将以下内容添加到你的index.js或自定义JavaScript文件:

function getComputation(a, b){
return a + b;

}
function sayHello(){
return <div><p>Hello World!</p></div>;

}

启动你的Web服务器并打开你的应用程序的索引页。确保页面显示" Hello World!"文本。

什么是React中的单元测试?

假设问好函数停止返回正确的内容或完全失败。你可能想知道该方法在投入生产之前已停止工作。

单元测试可确保你的代码在生产初期就能按预期工作。开发人员在编写函数时将其合并, 以确保每个函数都能正常工作。结合强大的日志记录功能, 测试非常有效。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

笑话和酶:2021年在React中进行单元测试1

编写好的单元测试

测试需要彻底, 这需要时间和精力。尽管如此, 编写扩展套件仍可让你高枕无忧, 同时确保你的应用程序不会意外失败并在此过程中带走用户。

好的单元测试:

  • 测试个别功能
  • 编写测试以了解预期的行为和功能
  • 依靠通用语言来表达不同的资产和行为
  • 通过日志和其他信息深入了解问题

随着时间的推移, 编写广泛的测试变得越来越容易, 就像随着时间的推移, 测试成为第二自然一样。

编码最佳实践对测试的影响

有一些最佳实践可用来提高测试能力和代码质量。编码标准和最佳实践与保持你的应用程序平稳运行紧密结合。

为了使运行测试和使用应用程序更加容易:

  • 将重复的代码拆分为单独的和可测试的功能
  • 避免组合功能
  • 不要埋藏关键代码

难以理解的混乱代码将许多功能包装在一个功能中, 使测试更加困难。错误的做法也使未来的发展更加困难。

Jest和Enzyme中的单元测试

Jest和Enzyme允许你编写强大的单元测试, 而无需从头开始构建框架。与编写单个函数相比, 这些工具以更自然的方式包装测试, 还使你可以访问报告和断言。

创造index.test.js在你下方的位置src夹。编写测试getComputation该文件中的功能:

const idx = require('./index.js')
describe("testComputation", () =>{
it('adds 1 + 5', () =>{


    expect(idx.getComputation(1, 5)).toBe(6);


});

});

我们确保程序返回正确的结果。你仍然需要将测试内容告知测试跑步者。

将以下配置写入名为的新文件中testconfig.json:

{

"verbose": true, "testURL": "http://localhost/", "testMatch": ["**index.test.js?(x)"]

}

改变testMatch数组以匹配路径test.index.js。你可以告诉Jest使用正则表达式从任何文件读取测试。

最后, 将以下内容添加到package.json告诉Node如何运行单元测试:

"scripts": {

"test": "jest", }

从命令行运行测试:

jest testComputation –config=./testconfig.json

开玩笑会testComputation在测试test.index.js文件。每个测试的详细信息都会显示在你的控制台中。

DOM测试

React提供了DOM渲染器。以此为基础的酶可以让你测试各个组件。你可以验证单个组件。

的问好函数返回一个div。你可以创建以下测试以确保页面正确呈现:

import {shallow} from 'enzyme';
describe("testRender", () =>{
it("should render hello world", () => {


    const html = idx.sayHello();


    const wrapper = shallow(html).toJSON();


    expect(wrapper.text()).toContain("Hello World!");


});

});

除非更改树, 否则划分将看起来相同。这样可以确保结果内容保持一致。检测不需要的更改有助于改善用户体验。

酶做什么?

在上面的测试案例中, Enzyme提供了一种用于安装和遍历React.js组件树的机制。该框架使你可以轻松地断言, 操纵和遍历组件。

与过去可能没有访问渲染器的权限不同, Jest可以渲染内容, 而Enzyme可以让你测试有关内容的假设。这样可以避免编写潜在错误的用例, 而这些用例需要与字符串匹配, 如上所示。

用酶记录

酶也可以用作单元测试的窗口。没有什么比没有理由的测试失败更令人沮丧的了, 尤其是如果你使用的依赖项不提供令人满意的日志。

你可以包装对象并将其打印到控制台:

const html = idx.sayHello();

const wrapper = shallow(html).toJSON();

console.log(wrapper.debug());

如果你在持续集成框架中运行测试, 请将此信息记录到中央位置。你选择的工具可能已经从控制台聚合了信息, 但是你始终可以将这些日志存储在弹性搜索使用Logstash或其他可搜索的日志存储平台。

持续集成中的单元测试

单元测试是确保应用程序运行状况的更广泛策略的一部分。它们是减少系统错误数量的第一步。

在持续集成工具中使用它们可以防止应用程序在更新后被破坏。持续集成使构建过程自动化, 如果某些意外中断, 则可能会成为问题。

诸如Circle CI和Gitlab CI让你在码头工人容器作为构建过程的一部分。如果测试成功, 则整个构建将失败。确保登录到应用程序性能管理或其他日志记录工具, 以跟踪构建中的问题。

代码覆盖率

随着应用程序的增长, 确保彻底测试变得更加困难。代码覆盖率(测试中运行的源代码数量)是跟踪有用的统计信息。使用代码覆盖率工具查找项目中未经测试的部分。

通过Jest, 你可以在运行测试时跟踪此统计信息。只需使用–覆盖控制台中的选项, 并准备朝你的100%工作Jest GitHub代码覆盖率徽章。生成的报告显示语句, 分支, 功能和达到的行。

2021年在React中进行单元测试

单元测试是开发的重要组成部分。它减少了错误, 提高了生产率, 并节省了其他时间来调试代码。

Jest是一个功能强大的平台, 使你能够在2021年的React中执行全面的单元测试。将测试部署到所选的持续集成工具中, 并使日志可访问, 以保持应用程序健康。

全面了解生产React应用

调试React应用程序可能很困难, 尤其是当用户遇到难以重现的问题时。如果你有兴趣监视和跟踪Redux状态, 自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间,

尝试notlogy

.

笑话和酶:2021年在React中进行单元测试2
LogRocket仪表板免费试用横幅

日志火箭就像Web应用程序的DVR, 实际上记录了React应用程序中发生的一切。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 并使用客户端CPU负载, 客户端内存使用情况等指标进行报告。

notlogy Redux中间件软件包在你的用户会话中增加了一层可见性。 notlogy记录Redux存储中的所有操作和状态。

现代化如何调试React应用程序-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: