查看原文
其他

测试你的前端代码 – part1(介绍篇)

前端大全 2022-06-29

(点击上方公众号,可快速关注)

英文:Gil Tayar   译文:胡子大哈

huziketang.com/blog/posts/detail?postId=58d3dcb87413fc2e8240855a

如有好文章投稿,请点击 → 这里了解详情


最近我的一个刚刚接触前端开发的朋友,问我如何测试他的 app。当时是电话交流的,大家都知道测试是一个繁杂的知识体系,不可能通过电话说清楚,不过我也跟他保证了要给他发一份“测试指引”。

然后我通过 Google 搜索测试相关的主题,找到了非常多的文章,但是我对于这些文章所介绍的深度并不满意。另外对于一个前端新手来说,我找不到一个综合性的教程能让前端小白逐步深入地进行应用测试。我想要找的是理论结合实践的前端测试教程。

所以我决定自己写一个前端测试系列。这里就是这一系列的开始。

什么是测试?

我把测试定义成:是一段检测你的应用代码(也叫“生产代码”)是否按预期执行的代码。有些人称之为 TDD(Test-Driven Development 或者 Test-Driven Design),但是 TDD 是一种特定的测试方法,它先写测试,然后用测试来驱动产品的设计和实现。

坦率地讲,我认为在生产代码完成之前写测试代码,还是在完成之后写测试代码并不重要。只要你写了足够多的测试样例测试你的生产代码,直到你对你的生产代码已经足够有信心就好。但是有很多人(包括我所尊敬的人)认为顺序很重要,这里我持自己的保留意见。

一个不好的现象是现在工业界已经把测试和 TDD 的概念混淆在一起,这样对于写生产代码的开发者所写的测试代码,就没有一个标准术语来称呼了。我倾向于叫它开发测试,或者普通测试。如果你对 “TDD vs 普通测试” 的讨论感兴趣,可以看这里,不过我建议你把我这个系列博文看完再参与讨论。

为什么测试?

我不打算在这里讨论为什么要进行测试。如果你不想写测试,那你就不写。不过你需要手动地一遍又一遍地测试你的 web 应用,这简直糟透了。那些讨厌的 bug,会不断地过来讨扰你。把这样的代码部署到生产环境,将是你噩梦的开始。

所以,我不打算深入讨论为什么要进行测试。

测试的类型

另外一个新手学习测试很容易有疑问的地方是:有很多种不同的测试类型。如果你提前做了点功课的话,你可能听说过(这里列出部分测试方法列表):单元测试、验收测试、集成测试、端到端测试、组件测试和服务测试。

更糟的是,当谈到了上面某一个具体的测试时,不同的人又有不同的理解。

这里再次说明我的观点,我认为叫什么名字都不重要,因为各种测试的定义都不难理解。所有的测试都分布于“测试光谱”中,光谱的一头是单元测试,另一头是端到端测试(后面统一称为 E2E 测试)。

测试光谱

光谱的一端——单元测试

顾名思义,代码以单元为单位进行测试。那么什么是单元呢?这就不同的编程语言的定义不一样了。它可以是一个函数、一个模块、一个包或者一个类,甚至是一个对象(比如 JavaScript 和 Scala 语言)。在 JavaScript 中,通常是以类或者模块作为一个单元。

以单元进行测试很重要的一点是其测试是独立的。对于一些场景这种测试非常适合,比如算法、某些功能性函数(如字符串中有多少字符)和包含一组验证性功能的类等场景。

这些场景下进行独立的单元测试非常容易,因为他们不依赖于其他单元。但是假设一个单元依赖于其他单元怎么办?可以有两种做法:两个单元一起测试,或者 mock 另一个单元。

什么是 mock?下面我们举例来解释:

假设一个模块是一个单元,模块中包含了 writeSumToFile 这个函数,函数接收两个数字参数,并把他们的和写入文件中。

这里注意,这个模块自己并没有做写文件操作。写文件操作是在另一个单元 fileSumWriter中做的。

那么为了测试第一个单元,我们既可以传一个真实的 fileSumWriter 进来,也可以模拟(mock)一个写文件操作(并不用真的实现写操作)。

如果我们传递一个 mock 到这个函数,那么这个单元测试,当然可以叫做“单元测试”,因为没有涉及到其他单元。但是如果两个单元一起测试,那么可能就有人说你这并不是单元测试了。

还是那句话,我不关心这到底应该叫什么。

光谱的另一端——端到端测试

上面介绍了以一个单元为单位的测试。现在介绍端到端测试——测试整个应用。测试过程中,应用的所有配置会设置成和生产环境一样,应用中的一切都会被测试到。

这两个是“测试光谱”的两端。上面提到的其他测试方法,都是分布在这两个极端中间。他们的基本思路是逐步扩大测试范围,被测试的代码越来越多,mock 的代码越来越少。

很多人把这两个极端测试中间的部分叫做“集成测试”,但是对于 TDD 崇尚者们来说,集成测试是另一个完全不同的概念。在本系列文章中我将会使用这个概念模糊的名字——集成测试,具体说来就是:测试多个单元,但不是测试全部单元。

结语

那么你的测试到底在什么测试层级上呢?很多人说有一个测试金字塔——大量的单元测试,少部分的集成测试,非常小部分的端到端测试。但是我不想讨论这些,这个系列文章我希望讨论的是如何对前端代码进行单元测试、集成测试和端到端测试。

接下来的文章,第一篇将会介绍前端单元测试,第二篇会介绍端到端测试,第三篇会介绍集成测试。

应这个系列的博文需要,我写了一个小 app——计算器——我用它来展示如何进行不同类型的测试。你可以在这里获取它的源代码,不过请注意现在还不完整,当整个系列博文完成的时才算完整。


觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存