详解如何用JavaScript编写一个单元测试

编写测试代码是保障应用稳定性的首要环节。采用单元测试是最佳实践之一，它能确保应用内每个微小功能模块均按预期运行，特别是在处理极端数据、无效输入或潜在恶意输入时，单元测试能发挥关键作用。

为什么要进行单元测试？

实施单元测试具备多重核心目标：

• 验证功能正确性：单元测试确保代码执行预期操作且未执行非预期行为，这是大多数错误发生的区域。
• 防止代码回归：当发现缺陷时，通过添加单元测试来覆盖该场景，可防止后续代码修改重新引入相同错误。
• 提供代码文档：完善的单元测试及其执行结果构成了应用程序行为规范的直观说明。
• 增强应用安全性：单元测试可用于检测潜在的安全漏洞，例如可能导致恶意 SQL 注入的缺陷。

范围界定和编写单元测试

借助单元测试框架，我们可以快速构建并自动化测试流程，并将其无缝集成至开发与部署流水线中。此类框架通常兼容前端与后端 JavaScript 代码的测试需求。

以下通用指南有助于编写高性能的单元测试及具备高可测试性的代码。

保持单元测试简短而简单

避免编写冗长的单元测试，测试代码应精简为数行，仅用于验证应用中的短小功能块。

考虑正面和负面的测试用例

虽然编写验证函数正确执行的测试至关重要，但构建更广泛的测试集以检查函数在被滥用或极端情况下的表现同样重要。这些负面测试价值更高，因为它们有助于预测意外场景，例如函数何时应抛出异常或如何处理格式错误的数据。

分解长而复杂的函数

包含大量逻辑的大型函数难以测试；若包含过多操作，则难以有效测试每个变量。如果函数过于复杂，应将其拆分为较小的函数以便单独测试。

避免网络和数据库连接

单元测试应快速且轻量级。涉及网络调用或连接其他应用程序/进程的功能执行耗时较长，这使得并行运行多个测试变得困难，并导致代码脆弱性增加。在单元测试中，应调用模拟的网络或数据库接口，而非建立真实连接。若需测试真实的网络或数据库连接，应在集成测试（将所有单元或模块组合在一起作为整体进行测试）中进行，而非单元测试。

如何编写单元测试

回顾上述单元测试最佳实践后，现在准备开始使用 JavaScript 编写首个单元测试。

本教程选用 Mocha 框架——这是最流行的单元测试工具之一。尽管每个测试框架略有差异，但核心概念足够相似，掌握基础即可轻松切换至其他框架。

在开始之前，请确保计算机已安装 Node.js 运行环境。

创建一个新项目

首先，打开终端窗口或命令提示符，导航至新项目文件夹。随后，通过以下命令在该目录下创建一个新的 Node.js 项目。

npm init -y

这会在文件夹中生成一个文件 package.json，使你能够使用 npm install -D mocha 命令来安装 mocha 框架。

接下来，在代码编辑器中打开 package.json 文件，并将 test script 替换为：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 默认查找单元测试的位置。然后，在新的测试文件夹中添加一个名为 traffic.test.js 的文件。

接下来，在文件顶部导入 TrafficLight 类：

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

我们还将使用该 assert 模块进行测试，因此在代码中需要引入它：

const assert = require( "assert" );

在 Mocha 中，我们可以使用 describe() 这个函数将单元测试进行分组集合，如下所示：

describe( "TrafficLight", function () {

});

随后，我们将创建一些单元测试来验证它们各自的子组中的交通颜色：

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 会打印出单元测试的执行结果。

添加更多单元测试

我们的项目现已具备运行单元测试的条件，因此我们可以添加更多测试以确保代码正常工作。

首先，向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 类中存在一个错误。

修复错误

为方便调试本例，提前注明好的错误代码位置，我们再次打开 TrafficLight 类并找到 next() 函数内的这句注释：// This is intentionally wrong!。

从单元测试中我们知道这个函数没有正确地循环回 green，我们可以看到代码是在判断lightIndex值超过交通灯颜色的数量时给索引设置了0，这显然是不对的，我们必须在值达到确切的颜色数时立即将索引修改为0：

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

现在你所有的单元测试都应该通过了。而这带来的好处是即使TrafficLight这个类被重构或大量修改，我们的单元测试也会在它到达用户之前捕获这个错误。

最后

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

以上就是详解如何用JavaScript编写一个单元测试的详细内容，更多关于JavaScript单元测试的资料请关注本站其它相关文章！