【问题标题】：How to use spyOn to mock jQuery value for a selector in Jasmine? [duplicate]如何使用 spyOn 模拟 Jasmine 中选择器的 jQuery 值？ [复制]
【发布时间】：2016-12-30 19:54:42
【问题描述】：

我正在使用 AngularJS / Karma / Jasmine 编写一些单元测试，但无法让 Jasmine 的 'spyOn' 方法工作。在我使用spyOn 之后，我仍然会为该选择器获得undefined。

问题

我遇到的问题是在我运行之后

spyOn($("#username"), "val").and.returnValue("test@test.com");

我尝试像这样获取用户名的值：

$("#username").val();

它是undefined。

我要测试的代码

function isValidEmail() {
       var email = $("#username").val();
       var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
       return email.match(regex);
 }

单元测试

'use strict';

describe('test/spec/controllers/validation.js - No controller', function () {

describe('email validation', function () {
     it('should be true for valid emails', function() { 
         spyOn($("#username"), "val").and.returnValue("test@test.com");
         var result = isValidEmail();
         expect(result).toEqual(true);
     });
});

});

有人看到我做错了什么吗？

【问题讨论】：

看起来相关：stackoverflow.com/questions/5337481/….
这实际上不是另一个问题的完整副本，因为这个问题包括被测代码 (CUT)，即 isValidEmail 函数，而另一个问题没有。这很重要，因为更正确和优雅的解决方案实际上不适用于此 CUT，而这与其他问题无关。有关更多详细信息，请参阅接受的答案下方的我的 cmets。

标签： javascript jquery unit-testing jasmine karma-jasmine

【解决方案1】：

你的问题是每次你调用$("#username")，你得到一个不同的对象。因此，函数中的$("#username")不会被窥探到。

您应该监视$.fn，它将被所有 jQuery 对象共享。

spyOn($.fn, 'val').and.returnValue('test@test.com')

【讨论】：

看起来与潜在重复中的答案相同...：P
这里的问题是当val() 在any jQuery 对象上调用时spy 工作。所以如果你例如稍后更改 html 中的用户名 id 而不是 jQuery 调用中的用户名，那么测试可能仍会在不应该通过的情况下通过。一个更正确/优雅的解决方案是a different answer 中的另一个重复问题。但是，这需要重构 isValidEmail 以便 email 是一个函数参数，即使用依赖注入。这会很好，但是，b/c DI 通常会使代码更健壮、更灵活，而且，是的，可测试。
总结一个更好的解决方案：重构：function isValidEmail($elmt) {var email = $elmt.val(); ...}。拨打常规代码：isValidEmail($("#username"));。测试：it("should work", function() {var $elmt = $("#username"); spyOn($elmt, "val")...; var result = isValidEmail($elmt);...}。注意：jQuery 只调用一次，创建一个对象。更好的是，重构：function isValidEmailString(emailString) {... 和 function isValidEmail() {return isValidEmailString($("#username").val());。然后测试 isValidEmailString 甚至不需要 jQuery 甚至 DOM，只需要一个测试电子邮件字符串。