如何对基于 jQuery 的代码进行单元测试？答案

【问题标题】：How can I test unit test my jQuery-based code?如何对基于 jQuery 的代码进行单元测试？
【发布时间】：2015-07-01 23:11:17
【问题描述】：

我在名为 index.js 的文件中有以下代码。我想测试其中的一些功能add，print 是主要功能。

(function($){
  "use strict";

  $(function(){

    var add = function(a, b){
    // ...
      },
    print = function(str){
    // ...
      },
      setup = function(){
    // ...
      },
      init = function(){
    // ...
      };

      setup();
      init();
  });
})(jQuery);

我该怎么做？这种编码方式是否会在客户端增加任何安全性？我所拥有的只是在客户端运行的代码。从来没有服务器参与。

我试过了：

var outerObj = (function(greet){
    var innerObj = (function(){
        return {test: function(){ console.log(greet); }}
    })();
    return innerObj;
})("hi");

outerObj.test();

但是，在我的情况下，innerObj 行在等号的右侧有一个$，使得控制台喊出错误，喊出 $(...) is not a function。我同意，它是单个文档对象的数组。

在任何启用了 jquery 的网页的控制台中查看 var a = (function(){ var val = $(function(){return 10;})(); })(); 以了解错误。

即使我放弃外壳并带出$(function() {});。我要怎么测试呢？

它仍然是一个对象，仍然是一个错误。

我可以执行哪种测试，单元、bdd 等以及如何执行？

【问题讨论】：

标签： javascript jquery unit-testing

【解决方案1】：

我不太明白您在这里使用的是什么模式 - 这似乎有点反模式。它是不可测试的，并且不会暴露任何实际使用的行为。我强烈推荐阅读（或至少略读）Addy Osmani 的 Javascript Design Patterns，免费提供。

对于单元测试，我总是在简单的构造函数模式和最容易使用的显示模块模式之间找到一个快乐的中间点。

var x = function($){
"use strict";

  var add = function(a, b){
     alert('add');
    },
    print = function(str){
     return 1;
    },
    setup = function(){
      alert('setup');
    },
    init = function(){
      alert('init');
    };

  init();
  setup();

  return {
      add: add,
      print: print
  };
};

var y = new x(jQuery);

在上面的示例中，y 将具有可用的 add 和 print 方法。查看this fiddle 上的示例测试。

附带说明一下，我最近一直在使用出色的 QUnit framework 来设置和运行我的 JS 单元测试。它出自 jQuery 团队，所以你知道它会很好的 ;)。我还建议查看 BlanketJS 以报告覆盖率，并查看 qunit-parameterize 以设置多个测试用例。

不管怎样，BDD 不是一种“测试类型”，而是一种工作方式。对于您应该进行的测试 - 单元测试和集成测试是最重要的 2，IMO。我使用 QUnit 进行单元测试，使用 Selenium 和 NUnit 进行集成测试。

【讨论】：