关于前端:如何用-JavaScript-编写你的第一个单元测试

34次阅读

共计 3979 个字符,预计需要花费 10 分钟才能阅读完成。

测试代码是确保代码稳固的第一步。能做到这一点的最佳办法之一就是应用 单元测试,确保应用程序中的每个较小的性能都按应有的形式运行——尤其是当应用程序接管到极其或有效输出,甚至可能无害的输出时。

为什么要进行单元测试?

进行单元测试有许多不同的办法,一些次要目标是:

  • 验证性能:单元测试确保代码做正确的事件并且不做任何不应该做的事件——大多数谬误产生在这里。
  • 避免代码回归:当咱们发现错误时,增加单元测试来查看场景能够避免代码更改在未来从新引入谬误。
  • 记录代码:通过正确的单元测试,一套残缺的测试和后果提供了应用程序应该如何工作的标准。
  • 爱护您的应用程序:单元测试能够查看可利用的破绽(例如启用歹意 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 应用程序至关重要。祝测试欢快!

以上就是文章的全部内容,感激看到这里,心愿对你有所帮忙或启发!创作不易,如果感觉文章写得不错,能够点赞珍藏反对一下,也欢送关注,我会继续更新实用的前端常识与技巧,我是茶无味 de 一天(公众号: 品尝前端),期待与你独特成长~

正文完
 0