朝阳网页设计：初学者的JavaScript单元测试

开发人员应该喜欢单元测试的安全性。没有人喜欢编写单元测试，但他们带来的安心很容易值得额外的工作。

单元测试检查代码块以确保它们都按预期运行。这在传统软件开发中非常普遍，现在在Web开发中也很常见。

但JavaScript究竟如何适应单元测试过程？在这篇文章中，我想解释单元测试的基础知识，如何使用JavaScript，以及可用于改善工作流程的最佳资源。朝阳网页设计

什么是单元测试？

单元测试在程序的一部分上运行一些代码来检查输入和输出。这些测试允许开发人员检查程序的各个区域，以查看错误发生的位置（以及原因）。

这是对您要测试的内容以及代码应如何运行的固有理解。检查错误和错误只有在您确切知道要查找的内容时才有用。

我发现这篇博文在单元测试方面非常有用。在进入工作之前，有很多关于准备和记录工作的内容。

在JavaScript的世界里，事情会变得有点棘手，因为它运行在网页的前端。处理此问题的最简单方法是使用单独的JS库。

但是，你如何实际编写单元测试并从中获得一些价值呢？根据您的代码，答案是不同的，因此C ++开发人员使用的方法与JavaScript开发人员不同。

让我们更深入地了解JS的单元测试，看看如何实现。

前端JS测试

没有必要对HTML / CSS进行单元测试，因为它们不是基于函数的语言。JavaScript是真正的脚本，并且使用Node.js和TypeScript等新资源，它变得更加强大。

简单的JS单元测试将采用一个函数，监视输出并返回其行为。Smashing Magazine有一个很好的例子，它根据特定的输入类型测试日历日期输出功能。

并非每个JS项目都需要进行单元测试。但是许多开发人员更喜欢安全而不是抱歉，而且仔细检查工作总是好的。

每个单元测试都用于检查JavaScript 中的单个单元，这通常分解为函数或库。目标是检查函数的每个方面，以确保它适用于所有情况。

TDD和BDD之间经常讨论的问题是单元测试。测试驱动开发（TDD）与行为驱动开发（BDD）基本相同，但使用不同的术语和方法。

最大的区别在于TDD遵循基于测试的实现，而BDD则关注行为。这篇文章有一个很好的例子，说明BDD 定义了帮助考虑用户行为的情况。

因此，不是仅仅使用逻辑来布置函数，而是考虑用户如何发送输入以及如何将输入传递给JavaScript（如未转义的HTML代码）。TDD方法将此作为原始数据，而BDD方法首先查看行为，然后查看数据。

他们可以诚实地被认为是相同的，但对同一问题采用不同的方法。我想把这个术语更多地作为一个介绍来提及，但尽量不要陷入太多。

单元测试需要练习，你编写的测试越多，你就会越了解。第一次开始时只关注编写测试而不必担心完美的最佳实践。

技术与策略

一旦你知道你正在测试什么，你就会想要开始编写测试。但究竟应该测试什么？

最常见的情况是输入和用户操作之一。假设用户登录并想要设置cookie。Cookie设置是一种特殊行为，应根据多种结果（登录失败和成功）进行测试。

每个测试输出都应包含有用的信息，以帮助您找到问题区域。每个失败报告都应该有一些不同的属性，这些属性在本文中列出：

• 您正在测试哪些功能/问题？

• 运行测试后的输出是多少？

• 成功测试的预期输出是多少？

有了这些信息，您可以检查每个单元测试并确定链的哪个部分出现故障。

假设登录cookie在用户登录时没有设置，但是在登录失败时确实设置了登录cookie。这可能是函数中逻辑语句的问题，可能会让您知道在哪里查看。

其他常见的单元测试包括代码linting和基本输出响应类型。如果函数给出错误的输出，您想知道它的来源和原因。

每当编写新测试时，总是尽量保持代码非常简单。保持简单的最佳方法是清楚地了解您正在检查的内容以及您期望的输出类型。

最好的JS测试工具

除非你真的喜欢编写vanilla JS，否则你应该使用JS库。最好的将加快您的工作流程，他们将提供无错误的库来测试您的潜在错误代码。

Jasmine.js

无可否认，Jasmine是网上最受欢迎的基于JS的单元测试库之一。它是完全免费的，开源的，并且经常更新新功能。

他们的文档很棒，有初学者指南和大量的代码片段。例如，您可以使用Jasmine的示例代码测试Ajax调用，而不需要太多考虑。

在撰写本文时，最新版本的Jasmine是v2.4，并提供了大量支持。如果您正在寻找免费教程我会推荐这篇Tuts +文章来帮助您入门。

QUnit

其中一个更安全的选择是QUnit。这个JavaScript单元测试框架是由jQuery团队创建的，它用于所有项目（包括jQuery UI和jQuery Mobile）。

该网站甚至还通过QUnit文档教学，为初学者编写了一份单元测试文章。如果您不确定从哪里开始并且不知道单元测试，那么请选择QUnit并按照他们的指南进行操作。最后，我保证您将更好地理解如何编写测试，为什么要这样做，以及像QUnit这样的库的重要性。

Mocha.js

许多实践开发人员更喜欢Mocha.js的灵活性，因为它允许您从头开始编写自己的自定义测试库。按照Mocha的指导方针创建模块化单元测试很容易 - 最好的代码可以在其他项目中重复使用。

默认情况下，Mocha是一个测试库，可以与其他库（如Chai.js）一起进行断言测试。Chai允许超过基本的真/假测试结果，并增强了您使用Mocha获得的灵活性。

这是您可以选择入门的最佳图书馆之一。它处理所有异步方法，并在Node.js上运行，就像许多其他现代JS库一样。

实习生

我想列出的另一个选择不是一个框架，而是一堆JS测试选项。Intern是完全免费的，并在GitHub上作为开源托管。它被标记为“人类的软件测试”，它是一个非常酷的平台。

测试可以在浏览器中运行，也可以在自定义的Intern测试运行器中运行。它可以在第三方框架（如BrowserStack）上运行测试，并支持您可以想象的每个可能的JS框架。

最大的缺点是它对于一个完整的初学者来说可能很复杂。但是，如果您想要接受挑战，请记住Intern，因为它可以节省连接工作流程中许多不同工具的时间。

这里列出的选项太多了，所以这取决于你。老实说，即使你想从头开始自己的图书馆，也不会出错！

理解单元测试的最佳方法是在下一个项目中尝试。并非每个人都需要编写单元测试，因此这些原则可能不适用于较小的个人项目。

但是如果你在团队中工作或者你计划推出一个更大的项目，那么建立单元测试代码的习惯是很好的。我当然希望本指南可以帮助您入门并提供最佳资源来继续您的JS单元测试之旅。

朝阳网页设计