Javascript 测试jquery函数

大家好，我对jquery和javascript还不熟悉。我已经编写了一段代码并想对其进行测试。但我遇到了一些问题，需要专家的帮助

下面是我在myfile.js中定义的jquery类

$.fn.MyClass = function(arg1 ,arg2, arg3) {

  function MyFirstFunc (arg1, arg3) {
     //Do some thing 
     return arg1 + arg3;

  };

  function MySecFunc (arg2, arg3) {
     //Do some thing 

  };
MyFirstFunc(arf1 ,arg2);
}

在index.html文件中，我必须调用DOM对象上的jquery类，如下所示

$("#div1").MyClass(agr1_val, arg2_val, arg3_val);

现在我想对这些函数进行单元测试，并将测试用例保存在一个单独的文件中。 我写了下面的测试

test('MyFirstFunction function test', function() {
    equal(MyFirstFunc (4, 5),"9" ,"function working correctly");
});

同样，在我的index_test.html文件中，我给出了myfile.js的路径，但Qunit仍然给出了错误

在第1次测试中死亡file:///var/www/test.js:2:1: MyFirstFunc未定义

有人能告诉我哪里做错了，以及如何通过将测试用例保存在单独的文件中来测试功能吗 或者其他更好的方法

---

首先，感谢您在jquery对象中声明了错误的方法

而不是：

function MyFirstFunc (arg1, arg3) {

您应该使用：

this.MyFirstFunc=function（arg1，arg3）{

此外，还应使用jQuery对象调用方法，如本例所示：

equal($("#div1").MyClass(1, 2, 3).MyFirstFunc(4, 5),"9" ,"function working correctly");

下面是一个工作Qunit测试的示例：

$.fn.MyClass = function(arg1 ,arg2, arg3) {

    this.MyFirstFunc = function(arg1, arg3) {
        //Do some thing 
        return arg1 + arg3;

    };

    this.MySecFunc = function(arg2, arg3) {
        //Do some thing 
    };

  return this.MyFirstFunc(arg1, arg3);
};

$(function() {
    $("#div1").MyClass(1, 2, 3);
});

test('MyClass function test', function() {
    equal($("#div1").MyClass (1,2,3),"4" ,"function working correctly");
});

---

未定义MyFirstFunc方法。必须在返回数组中定义MyFirstFunc和MySecFunc，才能公开使用这些函数。可以这样定义

$.fn.MyClass = function (arg1, arg2, arg3) {

    function MyFirstFunc(arg1, arg3) {
        //Do some thing 
        return arg1 + arg3;

    };

    function MySecFunc(arg2, arg3) {
        //Do some thing 

    };

    return {
        MyFirstFunc: function (arg1, arg3) {
            return MyFirstFunc(arg1, arg3);
        },
        MySecFunc: function (arg2, arg3) {
            return MySecFunc(arg2, arg3);
        }
    }
}

并用计算机进行测试

test('MyFirstFunction function test', function() {
    equal($().MyClass().MyFirstFunc(4, 5),"9" ,"function working correctly");
});

---

问题不在于您的测试用例，而在于您的函数定义。您不能简单地在另一个函数中声明一个函数，然后期望在全局命名空间中访问它。JavaScript中函数定义的一个基本属性是它们是唯一提供作用域的东西，因此当您将函数用作对象时，object的“实例变量”（在函数内声明）只能在该对象内访问

如果试图使用方法创建对象，则需要将这些函数分配给对象的实例变量。JavaScript中对象的实例变量是通过在构造函数（用于定义对象的函数）中分配

this.

来定义的.因此，要给

MyClass

两种方法，您应该执行以下操作：

MyClass = function(arg1, arg2, arg3) {

    this.myFirstFunc = function(arg1, arg2) {
        //Do something
    };

    this.mySecFunc = function(arg1, arg2) {
        //Do something
    };
};

var myInstance = new MyClass(x,y,z);
myInstance.myFirstFunc(a,b);

请注意，简单地将函数的参数与构造函数的参数同名并不会将参数从构造函数传递给方法。定义函数不会传递具体的参数，因此MyFirstFunc arg1和arg2被解释为可能传递给MyFirstFunc的参数的名称，而不是传递给函数的指令将外部函数的参数传递给MyFirstFunc

---

最后，

$.fn

属性是

jquery.prototype

的别名，因此您使用

$.fn.MyClass=function…

所做的是为jquery对象分配一个新属性，本质上是用您自己的附加组件修补库。虽然我不知道您的代码，但这可能不是您通常想要定义函数的方式用例。

非常感谢您的回答，但我想调用文件中的init函数define。请查看编辑您使用jquery对象的目的是什么？实际上，我在我的DIV对象上调用这个类，并在该DIV上绘制一个图。实际代码很长，所以我给出了一个简化的示例。我编辑了我的答案，以便它返回这是调用MyClass后myfirstfunc的结果。如果这不是你的意思，那么我只是遗漏了一点：）谢谢，我会检查一下。另外，你能告诉我你为什么写了最后一行测试（'MyClass function test'，function（）{equal（$（“#div1”）。MyClass（1,2,3），“4”，“function working Right”）；}）；因为我想在单独的文件中添加测试，谢谢@Edward的回复。实际上，在我的例子中，我想使用类似$（“#div1”）.MyClass（agr1_val，arg2_val，arg3_val）；所以我没有办法，只能像$.fn那样写，因为我对这一切都很陌生，所以我不知道最好的方法。非常感谢你的回答，但我不知道为什么我仍然会遇到同样的错误：/我现在遇到以下错误对象[对象对象]没有方法“MyClass”