资讯专栏INFORMATION COLUMN

【全栈React】第22天: 测试简介

qc1iu / 2363人阅读

摘要:我们将讨论三种不同的软件测试范例单元测试功能测试和集成测试。在中单元测试通常不需要浏览器可以快速运行不需要写入断言本身通常是简单而简洁的。集成测试最后我们将研究的最后一种测试是集成测试。

本文转载自:众成翻译
译者:iOSDevLog
链接:http://www.zcfy.cc/article/3809
原文:https://www.fullstackreact.com/30-days-of-react/day-22/

测试套件是一项前期投资,可在系统的整个生命周期内获得回报。今天我们将介绍测试的主题,并讨论我们可以写的不同类型的测试。

好了, 闭上你的眼睛, 等一下, 不要... 你很难闭着眼睛阅读, 但是想象一下, 你的应用正在接近你的第一个部署。

它越来越近, 它变得无聊, 不断添加在您的浏览器运行的功能,。

一定还有更好的办法..。

测试

当我们谈论测试时, 我们讨论的是自动建立和测量我们的假设的过程, 而不是关于我们的应用的功能断言。

当我们谈论在React中的front-end(前后端) 测试时, 我们指的是对我们的Reac应用渲染什么以及它如何响应用户交互的断言过程。

我们将讨论三种不同的软件测试范例: 单元测试、功能测试和集成测试。

单元测试

单元测试是指测试我们的代码中的各个部分 (或单元, 因此是名称), 这样我们就可以确信这些特定的代码部分能够像我们期望的那样工作。

例如, 我们的应用中已经有一些归并器。这些归并器由一个单一的函数组成, 我们可以在不同的场景下进行断言。

在Reac中, 单元测试通常不需要浏览器, 可以快速运行 (不需要写入 DOM), 断言本身通常是简单而简洁的。

我们主要集中在回答这个问题: 用一组给定的输入 (状态和属性), 输出是否符合我们对虚拟 dom 中 应该 的期望。在这种情况下, 我们正在测试渲染输出。

功能测试

通过功能测试, 我们的重点是测试组件的行为。例如, 如果我们有一个带有用户登录/注销按钮的导航栏, 我们可以测试我们的期望:

给定一个登录的用户, 导航呈现一个带有文本 Logout 的按钮

由于没有登录的用户, 导航会呈现一个带有文本 Login 的按钮

功能测试通常是隔离运行的 (即测试组件功能而不需要应用的其余部分)。

集成测试

最后, 我们将研究的最后一种测试是集成测试。这种类型的测试测试我们应用的整个服务, 并尝试复制 end-user(终端用户) 在使用我们的应用时的体验。

在速度和效率的顺序上, 集成测试非常缓慢, 因为它需要对实时运行的浏览器运行预期, 因为单元和功能测试的运行速度会更快 (尤其是在功能测试针对内存中的虚拟 dom 而不是实际的浏览器呈现的情况下进行测试时)。

当测试响应组件时, 我们将测试我们对虚拟 dom 中包含的内容的期望, 以及实际 dom 中反映的内容。

工具

我们将使用一个名为 jasmine 的测试库来提供可读的测试语言和断言。

至于测试运行, 有一个一般性的辩论围绕哪一个测试亚军是最容易/最有效的工作, 主要在mocha 和 jest。

我们要在React中使用在我们的冒险测试Jest, 因为它是 官方 (将信将疑) 测试员。我们将要写的大部分代码将是在Jasmine。可以随意使用mocha 如果它是你的测试库的选择。

最后, 我们将使用一个我们不能离开的库:Enzyme, 这使得在功能测试的更有乐趣。Enzyme提供了一些相当不错的Reac测试实用功能, 使我们的断言写得很容易。

明天, 我们将得到我们的应用设置与测试工具就位, 以便我们可以开始测试我们的应用, 并有信心它的工作是按我们预期的。明天见!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87164.html

相关文章

  • 全栈ReactReact 30教程索引

    摘要:今天我们将讨论创建组件的最终方案,即无状态函数的纯组件。今天我们正在研究一种处理提出的复杂数据的方法,称为体系结构。第天部署介绍今天,我们将探讨部署我们的应用所涉及的不同部分,以便外界可以使用我们的应用。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3758原文:https://www.fullstackreact.com/3...

    appetizerio 评论0 收藏0
  • 全栈React18: Flux 简介

    摘要:在方法中处理数据有三不同的角色派发器储存视图层我们的组件的主要思想是有一个单一源储存他们只能通过触发更新。这些操作负责调用派发器可以订阅更改并相应地更新自己的数据。与不同不使用派发器而是使用纯函数来定义数据变异函数。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3812原文:https://www.fullstackreact...

    mtunique 评论0 收藏0
  • 全栈React15: Promise简介

    摘要:使用承诺对象使我们有机会将异步操作的最终成功或失败关联到功能无论出于何种原因。例如在上面的示例中函数解析为值在成功完成时并在返回值这是另一个承诺上调用函数依此类推等等。这意味着我们只能返回一个承诺一次。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3814原文:https://www.fullstackreact.com/30...

    felix0913 评论0 收藏0
  • 全栈React24: 测试应用

    摘要:我们的第一个假设是非常简单的测试。我们正在测试以确保元素被包装在类中。在我们编写的每个测试中我们都需要将应用呈现在工作测试文档中。作为提醒我们可以使用命令或命令来运行测试。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3804原文:https://www.fullstackreact.com/30-days-of-react/...

    ziwenxie 评论0 收藏0
  • 全栈React23: 实现测试

    摘要:包包含由团队提供的测试实用程序。将在一个名为的目录中自动查找整个树中的测试文件是的带有下划线。让我们为时间轴组件创建第一个测试。其中之一是命令。现在我们已经编写了第一个测试并确认了我们的设置我们将在明天开始测试我们的时间轴组件。 本文转载自:众成翻译译者:iOSDevLog链接:http://www.zcfy.cc/article/3807原文:https://www.fullstac...

    airborne007 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<