javascript - 编写“可单元测试”的 jQuery 代码？

Question

到目前为止，我习惯于在 ready() 函数中编写所有代码，例如：

$(document).ready(function() {
  // all my code
});

现在我看到使用这种方法，我的代码不是“可单元测试的”，例如我无法从 QUnit 访问 ready() 里面的东西。

构造与使用 ready() 函数兼容并能够进行测试的 jQuery 代码的正确方法是什么？

有没有好的开源代码库或者项目可以学习学习？

Answer 1

让您的代码在就绪处理程序中只调用就绪处理程序之外的函数：

$(document).ready(function() {
  // call some functions outside of handler
});

// most of my code

这样，您也可以调用这些函数进行单元测试。

---

注意，有一个捷径$(document).ready：

$(function() {
  // call some functions outside of handler
});

// most of my code

Answer 2

我看到两种方法。

1. 将 QUnit 代码放在文档中，以便在您自己的代码之后运行。

2. 将您的代码放在一个模块中。

选项 #2 如下所示：

var MyModule = (function() {
    // Your code
}());

$(document).ready(function() {
    // Quit tests, referring to MyModule.xxx
});

在选项 #2 中，您确实无法访问模块中的私有元素。

Ben Cherry 不久前在http://www.adequatelygood.com/2010/7/Writing-Testable-JavaScript中谈到了这一点，他实际上对基于闭包的隐私发表了有争议的评论，因为它对单元测试的影响。

Answer 3

最有效的方法之一是使用 JS“名称空间”来构建您的编码，实际上您可以从jQuery 核心中获得一个很好的示例。

Answer 4

我对不可测试的 jQuery 脚本采取的一种奇怪的方法是这样的：

• 安装业力
• 在业力包含文件中包含所有本身不能进行单元测试的各种脚本
• 例如，核心脚本中引入的语法错误将无法通过业力测试，即使它没有经过单元测试
• 另外，如果脚本确实创建了任何全局变量，请测试这些全局变量是否存在于业力中
• 最后重构脚本以拥有更多可调用单元并在 karma 中运行测试

所以从浏览器开始运行，至少进行健全性检查！