type
status
date
slug
summary
tags
category
icon
password
了解如何使用测试驱动开发（TDD）来构建强大的react组件，本步骤指南可以确保您的代码可靠且可维护
想象一下可以使用安全网进行编码，可以在错误发生前捕获它们。这就是TDD的力量，在本文中，我们将深入探讨它是如何彻底改变你的开发流程的。在测试驱动开发中，开发人员在实际开发代码之前首先编写测试用例，使用TDD方法编写代码有一下几点好处：
- 更改质量的代码：预先考虑测试可以使您更仔细的考虑需求和设计
- 快速反馈：您可以获得即时验证，减少调试时间
- 全面的测试覆盖范围：TDD确保您整个的代码库经过彻底测试
- 重构信息：通过强大的测试套件，您可以自信的更改代码，而不必担心破坏代码
- 动态文档：您的测试程序可以成为如何使用它的示例
TDD分为三个主要阶段：红色、绿色和重构。红色阶段意味着编写测试用例并观察它的失败。绿色阶段意味着编写最少的代码来实现通过测试用例。重构阶段意味着通过重构来改进代码，以获得更好的结构、可读性和可维护性，而不该变功能，同时确保测试用例仍然通过。我们将React中构建一个登录页面，并详细介绍这一过程，该项目的完整代码在此处找到。
先决条件
以下是本文总需要遵循的先决条件：
- 了解
JavaScript和React
- 您选择的代码编辑器
启动一个新的React应用程序
- 确保使用
node -v和npm -v验证安装了Nodejs和npm
- 使用
npx create-react-app tddreact创建新的应用程序
- 使用
cd tddreact转到应用程序文件夹并使用npm start启动应用程序
- 应用程序完全编译后，导航到lcoahost，你会看到应用程序已经加载完成
添加测试用例
如前所示，如果用使用测试驱动开发，首先要编写初始测试用例。
- 在src下创建__test__文件夹，文件名为login.test.js
- 接着添加你的第一个测试用例， 确保登录组件保持存在是基本的
- 使用npm test运行测试用例，您将会看到如下的失败，这就是我们之前所说的红色阶段
- 现在是时候添加登录组件并启用绿色阶段了
- 在src/components下创建一个新文件，命名为Login.js，并添加如下代码：
- 测试用例现在应该已经通过，并且您成功实施了从红色到绿色阶段的一个周期
添加我们的输入
在我们的登录页面上，用户应该能通过用户名和密码并单击登录按钮进行登录。
- 添加测试用例，其中用户名和密码应该出现在我们的页面上
- 您应该看到一些测试用例再次失败
- 按照如下所示更改登录组件的返回方式，您应该能看到失败的测试用例通过
添加登录逻辑
现在您可以添加实际的登录逻辑。
- 为简单起见，当用户未输入用户名和密码进行点击登录按钮登录时，应显示一条错误消息。当用户输入用户名和密码进行登录时，不应显示错误消息。相反，显示欢迎消息，例如“欢迎John Doe”。可以通过以下测试将测试用例添加到测试文件中来捕获这些要求。
- 这应该会导致测试用例失败，如果测试程序尚未运行，请执行
npm test运行它们。让我们在组件中实现此功能并通过测试用例。更新登录组件代码以添加缺少的功能，如下所示：
- 对于大多数场景，登录组件应该通知父组件已登录。让我们添加一些测试用例来实现此功能，添加测试用例后，验证您的终端是否有失败的测试用例。
- 让我们在登录组件中实现此功能，更新Login组件以接收
onLogin函数并更新handleSubmit， 如下所示：
- 恭喜，登录组件已经实现，所有测试用例也通过。
将登录组件集成到应用程序中
create-react-app将样板代码添加到App.js中，我们必须先将App.js原始的代码给去掉，如果您看到App.test.js文件，也将其删除。
- 再次，我们将首先为App组件添加测试用例，首先在
__test__文件夹下创建App.test.js文件
- 您可以从这些测试用例中获得关键见解：
- 应用程序包含登录组件，登录成功后，需要像isLoggedIn变量来指示登录状态
- 用户登录成功后，您需要变更次变量并有条件的显示文本信息
- 您正在模拟登录组件，这很重要。因为您不希望应用程序组件的单元测试用例测试登录组件
- 使用所描述的功能实现应用程序组件。将以下代码添加到App.js中
- 现在所有的测试用例都应该通过，使用npm start启动应用程序，您应该在localhost看到以下内容
增强我们的应用程序
您已经达到了TDD的关键时刻 - 重构阶段。登录组件的样式非常简单，让我们通过添加样式代码并更新登录组件的方式来增强它。
- 在Login.js的旁边新建一个login.css的文件，并添加如下代码：
- 更新登录组件的渲染方法以使用样式。另外，在顶部倒入样式文件，以下是更新后的Login.js文件
- 确保所有测试用例仍然通过
npm test输出
- 使用npm start再次启动应用程序，我们的页面将会变成下面这样
未来的增强功能
我们已经达到了本文的目标，但您的旅程不应该就此停止。我建议进一步增强该项目以继续实践TDD。以下是您可以进行的一些增强功能：
- 高级验证：对用户名和密码进行更复杂的验证规则，例如密码强度检测和邮件格式验证
- 代码覆盖率分析：将代码覆盖率工具添加到应用程序中，这将提供对单元测试代码覆盖率百分比的深入了解，并帮助您识别为经过测试的代码行和功能
- 持续集成CI：设置CI管道，以便在将代码更改推送到仓库时自动运行测试并生成覆盖率报告
结论
在本指南中，我们逐步了解了如何通过测试驱动开发TDD来构建React登录页面，通过测试开始并通过红色绿色重构循环，我们创建了一个可靠的、经过充分测试的组件。TDD可能需要一些时间来适应，但在质量和可维护性方面的影响时巨大的。拥抱TDD将是您更有信心的处理复杂的项目。
原文链接
- Author:GDYG
- URL:https://gdyg5.top/article/tdd-react
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
Relate Posts