单位使用摩卡和柴测试您的JavaScript

下面：

<!-- load your test files here -->

>添加了脚本后，您可以将测试跑者页面加载到选择的浏览器中。

测试结果

进行测试时，测试结果将看起来像这样：

>

>请注意，我们输入的描述及其功能显示在输出中 - 测试在描述下分组。请注意，还可以嵌套描述块以创建进一步的子组。

>

>让我们看看一个失败的测试的外观。

>

在测试中的行上说：

assert.equal(arr.length, 0);

>将数字0替换为1。这使得测试失败，因为数组的长度不再匹配预期值。>

如果您再次运行测试，则会在红色中看到失败的测试，并描述出了什么问题。

>

测试的好处之一是它们可以帮助您更快地发现错误，但是此错误在这方面并不是很有帮助。我们可以修复它。

大多数断言功能也可以采用可选消息参数。这是当断言失败时显示的消息。使用此参数使错误消息易于理解是一个好主意。

>

我们可以在我们的断言中添加一条消息：

assert.equal(arr.length, 1, 'Array length was not 0');

如果您重新运行测试，则自定义消息将出现而不是默认。

>

>让我们将主张切换回原状 - 用0替换1，然后再次运行测试以确保它们通过。

将其放在一起

到目前为止，我们已经研究了相当简单的示例。让我们将我们所学的知识付诸实践，看看如何测试更现实的代码。

>

>这是一个将CSS类添加到元素的函数。这应该在一个新文件js/className.js。

为了使其更有趣，我只有在该类不存在的元素类名称属性中才能添加一个新类 - 毕竟谁想看

？

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

>

在最好的情况下，我们将在

>之前为此功能编写测试。我们编写代码。但是以测试驱动的开发是一个复杂的话题，就目前而言，我们只想专注于编写测试。

开始，让我们回想一下单元测试背后的基本思想：我们给出某些输入的功能，然后验证功能的行为。那么此功能的输入和行为是什么？ 给出一个元素和一个类名称：

• >如果元素的className属性不包含类名称，则应添加。
>
• 如果元素的className属性确实包含类名称，则不应添加。

>让我们将这些案例转换为两个测试。在测试目录中，创建一个新的文件classNametest.js并添加以下内容：

>

<!-- load your test files here -->

>我们将措辞稍微更改为“ IT应该执行X”表单，并与测试一起使用。这意味着它的读数有点更好，但是基本上仍然是我们上面列出的人类可读形式。从想法到测试通常比这更困难。

>

但是，等等，测试功能在哪里？好吧，当我们省略其第二个参数时，摩卡咖啡在测试结果中将这些测试标记为待处理

。这是设置许多测试的便捷方法 - 有点像您打算写的待办事项列表。> 让我们继续实施第一个测试。

在此测试中，我们创建一个元素变量，并将其作为参数传递给AddClass函数，以及字符串测试类（要添加的新类）。然后，我们使用断言将课程包含在值中。

>

assert.equal(arr.length, 0);

>再次，我们从最初的想法开始了 - 给定一个元素和一个类名称，应将其添加到类列表中 - 并以相当简单的方式将其转换为代码。

>

>尽管此功能旨在与DOM元素一起使用，但我们在此处使用一个普通的JS对象。有时，我们可以以这种方式利用JavaScript的动态性质来简化我们的测试。如果我们不这样做，我们将需要创建一个实际元素，这将使我们的测试代码复杂化。作为另一个好处，由于我们不使用DOM，因此我们也可以在Node.js中运行此测试。

在浏览器中运行测试

要在浏览器中运行测试，您需要将className.js和classNametest.js添加到跑步者：

：

>您现在应该看到一个测试通行证，另一种测试显示为待处理，如以下Codepen所证明的那样。请注意，代码与示例略有不同，以使代码在Codepen环境中起作用。

>请参阅codepen上的sitepoint（@sitepoint）的摩卡（1）的笔单元测试。

assert.equal(arr.length, 1, 'Array length was not 0');

接下来，让我们实现第二个测试吧……

>

>经常进行测试是一个很好的习惯，所以让我们检查一下如果我们现在进行测试会发生什么。正如预期的那样，它们应该通过。

这是另一个实施第二个测试的Codepen。

>

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

>请参阅codepen上的sitepoint（@sitepoint）的摩卡（2）的笔单元测试。

但请坚持下去！我实际上有点欺骗你。我们尚未考虑此功能的第三个行为。该功能也有一个错误 - 相当严重的函数。这只是三行函数，但您注意到了吗？

>

>让我们再为第三个行为写一个测试，该行为将错误视为奖励。

<!-- load your test files here -->

这次测试失败。您可以在下面的Codepen中看到它。这里的问题很简单：元素中的CSS类名称应由空间分开。但是，我们当前的AddClass实现不会添加空间！

>请参阅codepen上的sitepoint（@sitepoint）的摩卡（3）的笔单元测试。

>让我们修复功能并进行测试。

assert.equal(arr.length, 0);

>这是带有固定功能和通过测试的最终代码蛋

>请参阅codepen上的sitepoint（@sitepoint）的摩卡（4）的笔单位测试。

在节点上运行测试

在节点中，仅在同一文件中的其他事物可见。由于className.js和classNametest.js在不同的文件中，我们需要找到一种将一个公开的方法。这样做的标准方法是通过使用模块。如果需要复习，则可以在此处阅读所有内容：了解node.js

中的模块和导出

代码基本上保持不变，但结构略有不同：>

，如您所见，测试通过了。

assert.equal(arr.length, 1, 'Array length was not 0');

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

下一步是什么？ 如您所见，测试不必复杂或困难。就像编写JavaScript应用程序的其他方面一样，您也有一些重复的基本模式。一旦熟悉这些，您就可以一遍又一遍地使用它们。

>

，但这只是刮擦表面。关于单元测试还有很多要学习的内容。

>

测试更复杂的系统

>

如何处理AJAX，数据库和其他“外部”事物？

>测试驱动的开发
• 如果您想继续学习此信息，我创建了一个免费的JavaScript单元测试QuickStart系列。如果您发现这篇文章有用，则绝对应该在此处查看。
• 另外，如果视频更像是您的样式，您可能对Sitepoint Premium的课程感兴趣：Node.js.
中的测试驱动开发

经常询问有关使用摩卡和柴的单位测试JavaScript的问题

>如何在JavaScript中安装Mocha和Chai进行单位测试？
>

>要安装Mocha和Chai，您需要在系统上安装Node.js和NPM。一旦拥有这些，您可以使用NPM安装摩卡和柴。打开终端并导航到您的项目目录。然后，运行以下命令：

npm install -save-dev mocha chai

>此命令安装摩卡和柴作为您项目的devDepentencies。 -save-dev标志用于在您的软件包中添加它们为开发依赖。json文件。

>如何使用Mocha和Chai和Chai编写基本测试？摩卡咖啡和柴涉及创建一个测试文件并在其中编写测试案例。这是一个简单的示例：

var Expect = require（'chai'）。期望;

descript（'Basic Mocha string test'，function（）{ it（'应该返回字符串中的charachter'，function（）{
>期望（'Hello'）。此示例，描述是一个测试套件，该套件将相关的测试分组，这是一个测试案例。 CHAI的期望功能用于主张预期的输出。
>如何运行摩卡咖啡测试？

运行摩卡咖啡测试，导航到终端中的项目目录并运行以下命令：
>此命令运行安装在node_modules文件夹中的摩卡二进制二进制文件。如果您想简单地将此命令作为摩卡咖啡运行，则可以使用NPM install -G Mocha在全球安装摩卡样式 - 应该，期望和断言。应该使用应有的属性扩展每个对象以启动链条。期望风格提供了一种更传统的基于功能的方法。断言风格提供了一种经典的，简单的写作方式。

>如何使用摩卡咖啡和Chai？

mocha和chai测试异步代码，并提供了几种测试异步代码的方法。您可以使用回调，承诺或异步/等待。这是一个使用异步/等待的示例：

> it（'async test'，async function（）{
const result =等待myAsyncfunction（）;
> ）;

}）;
在此示例中，myasyncfunction是一个返回承诺的异步函数。等待的关键字用于等待承诺在继续测试之前解决。

>

>如何在摩卡咖啡中使用钩子？


摩卡咖啡提供类似以前，之后，之前和之后的钩子，您可以用来设置先决条件并在测试后清理。这是一个示例：

describe（'hooks'，function（）{
> function（function（）{
//在此块
}中进行第一个测试之前一次运行一次）; //在此块
}中进行最后一次测试后一次运行一次）此块中的每个测试
}）;


aftereach（function（）{
//在此块中的每个测试之后运行
}）;
}）
>如何测试Chai的异常？以下是一个示例：

it（'抛出错误'，function（）{
> Expect（function（function（）{thur new错误（'错误值'}）。to.throw（'错误（'错误value'）;

}）;
在此示例中，传递的函数期望引发错误。投掷断言用于断言该功能以消息“错误的值”丢弃错误。

>
>我如何使用间谍，存根和模拟与Mocha和Chai？间谍，存根和与摩卡咖啡和柴一起模拟，您可以使用Sinon.js之类的图书馆。 sinon.js可以轻松地与摩卡和柴一起集成以提供这些功能。

如何使用摩卡咖啡来生成测试报告？




，尼安等等。您可以在运行测试时指定与 - Reporter选项一起使用的记者。例如，Mocha -ReporterNyan。>

以上是单位使用摩卡和柴测试您的JavaScript的详细内容。更多信息请关注PHP中文网其他相关文章！