如何用 JavaScript 编写你的第一个单元测试

前言

测试代码是使代码安全的第一步。做到这一点的最好方法之一是使用单元测试,确保应用程序中的每个小功能都能发挥其应有的作用--特别是当应用程序处于边缘情况,比如无效的输入,或有潜在危害的输入。

为什么要单元测试

说到单元测试,有许多不同的方法。单元测试的一些主要目的是:

  • 验证功能:单元测试确保代码做正确的事情,不做不应该做的事情--这是大多数错误发生的地方。
  • 防止代码混乱:当我们发现一个bug时,添加一个单元测试来检查这个场景,可以保证代码的更改不会在将来重新引入这个bug。
  • 文档化代码:有了正确的单元测试,一套完整的测试和结果提供了一个应用程序应该如何运行的规范。
  • 代码更安全:单元测试可以检查可被利用的漏洞(比如那些可以实现恶意SQL注入的漏洞)。
确定范围

使用单元测试框架使我们能够快速编写和自动化我们的测试,并将它们集成到我们的开发和部署过程中。这些框架通常支持在前端和后端的JavaScript代码中进行测试。

下面是一些帮助你编写性能单元测试和可测试代码的一般准则。

保持简短

不要让你的单元测试冗余。测试应该只有几行代码,检查应用程序的代码块。

同时考虑正反面

编写一个测试来确认一个函数的正确执行是有帮助的。然而,编写一套更广泛的测试,检查一个函数在被误用时或在边缘情况下是否会失败,会更有效果。这些负面测试甚至更有价值,因为它们有助于预测意外情况。例如一个函数什么时候应该抛出异常,或者它应该如何处理接收到的畸形数据。

分解复杂功能

含有大量逻辑的大型函数很难测试;包括太多的操作,无法有效测试每个变量。如果一个函数过于复杂,可以将其分割成较小的函数进行单独测试。

避免网络和数据库连接

单元测试应该快速且轻量,但是函数会发出网络请求,或者连接其他程序并花很长时间执行。这使得同时运行许多操作具有挑战性,并可能产生更脆弱的代码。你可以在单元测试中造假数据来实现模拟的网络或数据库调用,这可以让你测试函数的其余部分。你可以在不同的测试过程中包含真正的网络和数据库连接,这称为集成测试。

如何编写单元测试

现在,我们已经回顾了一些单元测试的最佳实践,你已经准备好在JavaScript中编写你的第一个单元测试。

本教程使用了Mocha框架,它是最流行的单元测试之一。每个测试框架都略有不同,但足够相似,学习基本概念将使你能够在它们之间切换自如。

要跟着示例,请确保电脑上已经安装了Node.js。

创建新项目

首先,打开终端窗口或命令提示符到一个新的项目文件夹。然后,通过输入npm init -y在其中创建一个新的Node.js项目。

这会在文件夹内创建package.json文件,使你能够使用npm install -D mocha将Mocha安装为开发依赖。

接着,在编辑器中打开package.json文件,用mocha替换占位符测试脚本:

  1. "scripts": {

  2. "test": "mocha"

  3. },

实现一个类

接下来,编写一个简单的交通灯系统,进行单元测试。

在项目的目录内,创建traffic.js文件,并为TrafficLight类添加如下代码:

  1. class TrafficLight {

  2. constructor() {

  3. this.lightIndex = 0;

  4. }

  5. static get colors() {

  6. return [ "green", "yellow", "red" ];

  7. }

  8. get light() {

  9. return TrafficLight.colors[ this.lightIndex ];

  10. }

  11. next() {

  12. this.lightIndex++;

  13. // This is intentionally wrong!

  14. if( this.lightIndex > TrafficLight.colors.length ) {

  15. this.lightIndex = 0;

  16. }

  17. }

  18. }

  19. module.exports = TrafficLight;

该类包含了四部分:

  • TrafficLight.colors:交通灯颜色的常量属性。
  • lightIndex:追踪当前交通灯颜色索引变量。
  • light:将当前交通灯颜色作为字符串返回的类的属性。
  • next():更改交通灯为下个颜色的函数。
添加单元测试

是时候为代码添加单元测试了。

在项目的目录下创建名为test的文件夹。这里是Mocha默认检查单元测试的地方。在test文件夹下添加traffic.test.js文件。

接着,在文件顶部导入TrafficLight

const TrafficLight = require( "../traffic" );

我们要用到测试的assert模块,因此也需要导入:

const assert = require( "assert" );

在Mocha的帮助下,我们可以使用describe()函数将单元测试分组。因此我们可以为这个类设置一个顶级组,如下所示:

  1. describe( "TrafficLight", function () {

  2. });

然后,我们在子组中添加校验交通灯颜色的单元测试,位于TrafficLight集合内部,并称为colors

  1. describe( "TrafficLight", function () {

  2. describe( "colors", function () {

  3. });

  4. });

对于第一个单元测试,我们可以检查colors仅有三个状态:绿色、黄色和红色。该测试在describe()组内部,使用it()函数定义。因此可以这样编写测试用例:

  1. describe( "TrafficLight", function () {

  2. describe( "colors", function () {

  3. it( "has 3 states", function () {

  4. const traffic = new TrafficLight();

  5. assert.equal( 3, TrafficLight.colors.length );

  6. });

  7. });

  8. });

现在,让我们试着运行单元测试,看看是否可以通过。

在终端窗口中运行npm test,如果一切正常,Mocha会打印出单元测试运行的结果。

添加更多单元测试

我们的项目现在已经准备好运行单元测试了,因此可以添加更多的单元测试,确保代码正确运行。

首先,添加一个单元测试到colors组,验证交通信号灯的颜色是否正确,是否符合顺序。下面是实现测试的一种方式:

  1. it( "colors are in order", function () {

  2. const expectedLightOrder = [ "green", "yellow", "red" ];

  3. const traffic = new TrafficLight();

  4. for( let i = 0; i < expectedLightOrder.length; i++ ) {

  5. assert.equal( expectedLightOrder[ i ], TrafficLight.colors[ i ] );

  6. }

  7. });

其次,测试next()函数,看看信号灯是否可以正确切换。创建一个新的子组,并添加两个单元测试:一个用来检查灯是否按顺序正确切换,另一个用来检查在循环到红色后是否返回到绿色。

按照如下方式编写单元测试:

  1. describe( "next()", function () {

  2. it( "changes lights in order", function () {

  3. const traffic = new TrafficLight();

  4. for( let i = 0; i < TrafficLight.colors.length; i++ )

  5. assert.equal( traffic.light, TrafficLight.colors[ i ] );

  6. traffic.next();

  7. }

  8. });

  9. it( "loops back to green", function () {

  10. const traffic = new TrafficLight();

  11. // Change the light 3x to go from green -> yellow -> red -> green

  12. for( let i = 0; i < 3; i++ ) {

  13. traffic.next();

  14. }

  15. assert.equal( traffic.light, TrafficLight.colors[ 0 ] );

  16. });

  17. });

现在,当我们重新运行测试时,我们会看到其中一个测试失败了。这是因为TrafficLight类中有一个错误。

修复bug

再次打开TrafficLight类的代码,找到next()函数内的注释,其内容为// This is intentionally wrong!

从我们的单元测试中,我们知道这个函数没有正确地返回到绿色。我们可以看到,目前的代码在lightIndex值超过交通灯颜色的数量时进行检查,但索引是从0开始的。相反,我们必须在该索引值达到颜色数量时返回到绿色。让我们更新代码,当lightIndex值等于交通灯颜色列表的长度时,将其重置为0

  1. // This is intentionally wrong!

  2. if( this.lightIndex === TrafficLight.colors.length ) {

  3. this.lightIndex = 0;

  4. }

现在你所有的单元测试都应该通过。最重要的是,即使TrafficLight类被重构或大量修改,我们的单元测试也会在它触达用户之前捕获这个错误。

总结

单元测试很容易设置,是软件开发的有效工具。它们有助于早期消除错误,并防止它们返回。这使项目更易于管理和维护,即使它们变得更大和更复杂,特别是在更大的开发团队中。像这样的自动化测试也使开发人员能够重构和优化他们的代码,而不必担心新代码的行为是否正确。

单元测试是开发流程中的一个关键部分,对于帮助你构建更好、更安全的JavaScript应用至关重要。

相关推荐
fmdpenny31 分钟前
Vue3初学之商品的增,删,改功能
开发语言·javascript·vue.js
小美的打工日记44 分钟前
ES6+新特性,var、let 和 const 的区别
前端·javascript·es6
涔溪1 小时前
有哪些常见的 Vue 错误?
前端·javascript·vue.js
程序猿online1 小时前
前端jquery 实现文本框输入出现自动补全提示功能
前端·javascript·jquery
酱学编程2 小时前
java中的单元测试的使用以及原理
java·单元测试·log4j
HsuYang4 小时前
Vite源码学习(九)——DEV流程中的核心类(下)
前端·javascript·架构
傻小胖4 小时前
React 中hooks之useInsertionEffect用法总结
前端·javascript·react.js
蓝冰凌5 小时前
【整理】js逆向工程
javascript·js逆向
BigData-06 小时前
vue视频流播放,支持多种视频格式,如rmvb、mkv
前端·javascript·vue.js
沐暖沐6 小时前
vue3+elementPlus之后台管理系统(从0到1)(day3-管理员管理)
java·前端·javascript