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

如何,javascript,编写,第一个,单元测试 · 浏览次数 : 338

小编点评

**单元测试概述** 单元测试是软件开发的第一个步骤,用于验证应用程序中的每个小功能是否发挥其应有的作用。通过创建和执行单元测试,我们可以确保代码做正确的事情,不做不应该做的事情,并确保代码在边缘情况下也能正常运行。 **单元测试的优点** * 验证代码做正确的事情 * 防止代码混乱 * 文档化代码 * 提高测试覆盖率 * 预测意外情况 **单元测试的框架** 许多不同的框架可用于编写单元测试,一些流行的框架包括: * Mocha * Jest * Chai * pytest **单元测试的最佳实践** * 编写简洁的测试 * 针对性地测试不同用例 * 使用正反面编写测试 * 测试函数在被误用时和在边缘情况下是否会失败 **单元测试的示例** 以下是一个单元测试示例,用于验证数组中的元素是否按顺序排列: ```javascript describe('数组排序', function() { it('应该按照顺序排列数组元素', function() { const arr = [1, 3, 5, 2]; expect(arr).toEqual([1, 2, 3, 5]); }); }); ``` **单元测试的意义** 单元测试有助于软件开发人员: * 识别代码中的错误 * 确保代码做正确的事情 * 提高代码的稳定性 * 降低开发时间和成本

正文

前言

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

为什么要单元测试

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

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

确定范围

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

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

保持简短

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

同时考虑正反面

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

分解复杂功能

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

避免网络和数据库连接

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

如何编写单元测试

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

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

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

创建新项目

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

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

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

"scripts": {
    "test": "mocha"
 },

实现一个类

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

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

class TrafficLight {
    constructor() {
        this.lightIndex = 0;
    }

    static get colors() {
        return [ "green", "yellow", "red" ];
    }
    get light() {
        return TrafficLight.colors[ this.lightIndex ];
    }
    next() {
        this.lightIndex++;
        // This is intentionally wrong!
        if( this.lightIndex > TrafficLight.colors.length ) {
            this.lightIndex = 0;
        }
    }
}

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()函数将单元测试分组。因此我们可以为这个类设置一个顶级组,如下所示:

describe( "TrafficLight", function () {
});

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

describe( "TrafficLight", function () {
    describe( "colors", function () {
    });
});

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

describe( "TrafficLight", function () {
    describe( "colors", function () {
        it( "has 3 states", function () {
            const traffic = new TrafficLight();
            assert.equal( 3, TrafficLight.colors.length );
        });
    });
});

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

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

passing.png

添加更多单元测试

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

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

it( "colors are in order", function () {
    const expectedLightOrder = [ "green", "yellow", "red" ];
    const traffic = new TrafficLight();
    for( let i = 0; i < expectedLightOrder.length; i++ ) {
        assert.equal( expectedLightOrder[ i ], TrafficLight.colors[ i ] );
    }
});

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

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

describe( "next()", function () {
    it( "changes lights in order", function () {
        const traffic = new TrafficLight();
        for( let i = 0; i < TrafficLight.colors.length; i++ ) 
            assert.equal( traffic.light, TrafficLight.colors[ i ] );
            traffic.next();
        }
    });
    it( "loops back to green", function () {
        const traffic = new TrafficLight();
        // Change the light 3x to go from green -> yellow -> red -> green
        for( let i = 0; i < 3; i++ ) {
            traffic.next();
        }
        assert.equal( traffic.light, TrafficLight.colors[ 0 ] );
    });
});

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

error.png

修复bug

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

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

// This is intentionally wrong!
if( this.lightIndex === TrafficLight.colors.length ) {
    this.lightIndex = 0;
}

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

pas.png

总结

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

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

祝你测试愉快!

以上就是本文的所有内容,如果对你有所帮助,欢迎收藏、点赞、转发~

与如何用 JavaScript 编写你的第一个单元测试相似的内容:

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

前言 测试代码是使代码安全的第一步。做到这一点的最好方法之一是使用单元测试,确保应用程序中的每个小功能都能发挥其应有的作用--特别是当应用程序处于边缘情况,比如无效的输入,或有潜在危害的输入。 为什么要单元测试 说到单元测试,有许多不同的方法。单元测试的一些主要目的是: 验证功能:单元测试确保代码做

使用 Promise.withResolvers() 来简化你将函数 Promise 化的实现~~

引言 在JavaScript编程中,Promise 是一种处理异步操作的常用机制。Promise 对象代表了一个尚未完成但预期将来会完成的操作的结果。在本文中,我们将探讨如何通过使用 ES2024 的 Promise.withResolvers API 来优化我们的 Promise 实现。 现有实现

如何在低代码平台中引用 JavaScript ?

引言 在当今快速发展的数字化时代,企业对业务应用的需求日益复杂且多元。低代码开发平台作为一个创新的解决方案,以直观易用的设计理念,打破了传统的编程壁垒,让非技术人员也能轻松构建功能完备的Web应用程序,无需深入编码。这一特性极大地简化了应用开发流程,加速了业务需求转化为实际应用的速度,为企业带来了前

构建 JavaScript ChatGPT 插件

> 聊天插件系统是一种令人兴奋的新方式,可以扩展ChatGPT的功能,纳入您自己的业务数据,并为客户与您的业务互动增加另一个渠道。在这篇文章中,我将解释什么是聊天插件,它们能做什么,以及你如何用JavaScript建立你自己的聊天插件。 这篇文章(或OpenAI所称的"训练数据")提供了一个快速入门

前端如何用一个函数防止用户使用F12看控制台(超简单一学就会)

#### 先分享一下自己的搭的免费的chatGPT网站 https://www.hangyejingling.cn/ ## 正文 #### 1、如果是VUE框架开发,在生产环境中。在入口文件APP.vue中添加如下代码,其他框架同理 ```javascript if (process.env.mod

揭秘报表新玩法!标配插件不再单调,如何用柱形图插件让你的报表瞬间高大上!

> 摘要:本文由葡萄城技术团队于博客园原创并首发。葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 # 前言 图表作为一款用于可视化数据的工具,可以帮助我们更好的分析和理解数据,并发现数据之间的关系和趋势。下面以柱形图为例介绍如何使用JavaScript在报表中引入图表。 本文使用软件

如何使用JavaScript实现在线Excel附件的上传与下载?

前言 在本地使用Excel时,经常会有需要在Excel中添加一些附件文件的需求,例如在Excel中附带一些Word,CAD图等等。同样的,类比到Web端,现在很多人用的在线Excel是否也可以像本地一样实现附件文件的操作呢?答案是肯定的,不过和本地不同的是,Web端不会直接打开附件,而是使用超链接单

如何用JavaScripte和HTML 实现一整套的考试答题卡和成绩表

相信在学校的你都有这样的体验,临近考试,要疯狂的“背诵”否则成绩单就要挂零,因为答题卡全部涂抹都是错的。 那么毕业多年的你,没有了考试,有没有一丝怀念涂答题卡的时候,有没有好奇这个答题卡到底如何制作,成绩表到底如何为每位同学定制动态生成的。 这些都要归功于“报表”工具 学校每年都会打印很多的学生成绩

JavaScript快速入门(一)

JavaScript快速入门(二) 语句 只需简单地把各条语句放在不同的行上就可以分隔它们 var a = 1 var b = 2 如果想把多条语句放在同一行上,就需要用分号隔开 var a = 1; var b = 2 注释 用两个斜线作为一行的开始,这一行就会被当成一条注释 //记得写注释 多行

如何在JavaScript中使用for循环

前言 循环允许我们通过循环数组或对象中的项并做一些事情,比如说打印它们,修改它们,或执行其他类型的任务或动作。JavaScript有各种各样的循环,for循环允许我们对一个集合(如数组)进行迭代。 在这篇文章中,我们将了解JavaScript提供的for循环。我们将看看for...in循环语句是如何