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

茶无味的一天 2023-03-28 原文

测试代码是确保代码稳定的第一步。能做到这一点的最佳方法之一就是使用单元测试，确保应用程序中的每个较小的功能都按应有的方式运行——尤其是当应用程序接收到极端或无效输入，甚至可能有害的输入时。

为什么要进行单元测试？

进行单元测试有许多不同的方法，一些主要目的是：

验证功能：单元测试确保代码做正确的事情并且不做任何不应该做的事情——大多数错误发生在这里。
防止代码回归：当我们发现错误时，添加单元测试来检查场景可以防止代码更改在将来重新引入错误。
记录代码：通过正确的单元测试，一套完整的测试和结果提供了应用程序应该如何工作的规范。
保护您的应用程序：单元测试可以检查可利用的漏洞（例如启用恶意 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 应用程序至关重要。祝测试愉快！

文章翻译自：https://snyk.io/blog/how-to-write-unit-test-in-javascript/ ，为便于阅读部分内容有修改。以上就是文章的全部内容，感谢看到这里，希望对你有所帮助或启发！创作不易，如果觉得文章写得不错，可以点赞收藏支持一下，也欢迎关注，我会持续更新实用的前端知识与技巧，我是茶无味de一天，期待与你共同成长~

何用 JavaScript code TrafficLight quot 单元测试应用程序 javascriptJavaScript 前端开发

有关如何用 JavaScript 编写你的第一个单元测试的更多相关文章

ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？最佳答案你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
ruby-on-rails - Rails - 一个 View 中的多个模型 - 2
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
ruby-on-rails - 渲染另一个 Controller 的 View - 2
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
ruby - 在 Ruby 中编写命令行实用程序 - 2
我想用ruby编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序
ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？最佳答案像Ruby中的所有其他对象
ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？
ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2
我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。最佳答案
ruby - 用 Ruby 编写一个简单的网络服务器 - 2
我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b
ruby - 一个 YAML 对象可以引用另一个吗？ - 2
我想让一个yaml对象引用另一个，如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的rubyyaml解析器。这可能吗？最佳答案一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir
ruby - Rails 关联 - 同一个类的多个 has_one 关系 - 2
我的问题的一个例子是体育游戏。一场体育比赛有两支球队，一支主队和一支客队。我的事件记录模型如下:classTeam"Team"has_one:away_team,:class_name=>"Team"end我希望能够通过游戏访问一个团队，例如:Game.find(1).home_team但我收到一个单元化常量错误:Game::team。谁能告诉我我做错了什么？谢谢，最佳答案如果Gamehas_one:team那么Rails假设您的teams表有一个game_id列。不过，您想要的是games表有一个team_id列，在这种情况下