使用 karma、jasmine、jquery 进行测试并使用 browserify 进行反应
Testing with karma, jasmine, jquery and react using browserify
我目前正在开始一个我喜欢使用 React js 来完成的项目。但在我开始之前,我需要找出一个好的工作流程,包括单元测试等。我遇到的第一个问题是 Jest 目前有一个错误,它会在你需要时立即崩溃 ("jquery")。由于无论如何我都找不到调试 Jest 测试的方法,所以我决定尝试将 karma 与 jasmine 一起使用。我现在遇到的问题是,当我尝试测试 ajax 呼叫时,我从未得到响应。
该服务的当前变体是:
var _isTesting = false;
var deferred;
var TestService = {
loginUser:function(username, password){
var data = {
username: username,
password: password
};
console.log("calling ajax");
return ($.ajax({
type: "POST",
url: "https://test.com/service",
data:data,
dataType:"json"
}));
}
};
module.exports =TestService;
测试看起来像这样:
describe('TestService', function(){
var onSuccess, onFailure, request;
var service = {};
beforeEach(function(){
jasmine.Ajax.install();
service = require("../js/services/TestService");
onSuccess = jasmine.createSpy('onSuccess');
onFailure = jasmine.createSpy('onFailure');
});
it('should set the testing variable', function(){
expect(service.getIsTesting()).toBe(false);
service.setIsTesting(true);
expect(service.getIsTesting()).toBe(true);
});
it('should log in', function(){
var def = service.loginUser("username", "password");
def.done(function(result){
console.log("#######" + JSON.stringify(result))
onSuccess(result);
})
.fail(function(error){
console.log("#### ERROR ###"+JSON.stringify(error));
onFailure(error);
});
request = jasmine.Ajax.requests.mostRecent();
expect(request.url).toBe("https://test.com/service");
expect(request.method).toBe('POST');
expect(onSuccess).toHaveBeenCalled();
})
});
第一个期望成功但第三个失败,也就是说我从未收到 ajax 调用的响应。
有什么想法吗?
查看 Jasmine 文档 (http://jasmine.github.io/2.2/ajax.html),您需要告诉框架从模拟的 AJAX 调用中获取 return 数据 - 它不会自动响应任何内容。尝试类似的东西:
....
expect(request.method).toBe('POST');
//respond to AJAX call
request.respondWith({
"status": 200,
"responseText": "some return data"
});
//now check that your success method was called
expect(onSuccess).toHaveBeenCalled();
关于 Jest 的旁白 - 它目前不支持别名,这就是为什么您的 require('jquery')
调用不起作用的原因。 (请参阅此拉取请求:https://github.com/facebook/jest/pull/237)。我没有尝试过这个,但是如果你使用完整路径来要求 jquery 而不是别名,你可能会让 Jest 工作。像 require('../node_modules/jquery');
这样的东西虽然很烦人,这就是为什么我可能也会选择 Karma/Jasmine 以及一个新项目。
我目前正在开始一个我喜欢使用 React js 来完成的项目。但在我开始之前,我需要找出一个好的工作流程,包括单元测试等。我遇到的第一个问题是 Jest 目前有一个错误,它会在你需要时立即崩溃 ("jquery")。由于无论如何我都找不到调试 Jest 测试的方法,所以我决定尝试将 karma 与 jasmine 一起使用。我现在遇到的问题是,当我尝试测试 ajax 呼叫时,我从未得到响应。
该服务的当前变体是:
var _isTesting = false;
var deferred;
var TestService = {
loginUser:function(username, password){
var data = {
username: username,
password: password
};
console.log("calling ajax");
return ($.ajax({
type: "POST",
url: "https://test.com/service",
data:data,
dataType:"json"
}));
}
};
module.exports =TestService;
测试看起来像这样:
describe('TestService', function(){
var onSuccess, onFailure, request;
var service = {};
beforeEach(function(){
jasmine.Ajax.install();
service = require("../js/services/TestService");
onSuccess = jasmine.createSpy('onSuccess');
onFailure = jasmine.createSpy('onFailure');
});
it('should set the testing variable', function(){
expect(service.getIsTesting()).toBe(false);
service.setIsTesting(true);
expect(service.getIsTesting()).toBe(true);
});
it('should log in', function(){
var def = service.loginUser("username", "password");
def.done(function(result){
console.log("#######" + JSON.stringify(result))
onSuccess(result);
})
.fail(function(error){
console.log("#### ERROR ###"+JSON.stringify(error));
onFailure(error);
});
request = jasmine.Ajax.requests.mostRecent();
expect(request.url).toBe("https://test.com/service");
expect(request.method).toBe('POST');
expect(onSuccess).toHaveBeenCalled();
})
});
第一个期望成功但第三个失败,也就是说我从未收到 ajax 调用的响应。
有什么想法吗?
查看 Jasmine 文档 (http://jasmine.github.io/2.2/ajax.html),您需要告诉框架从模拟的 AJAX 调用中获取 return 数据 - 它不会自动响应任何内容。尝试类似的东西:
....
expect(request.method).toBe('POST');
//respond to AJAX call
request.respondWith({
"status": 200,
"responseText": "some return data"
});
//now check that your success method was called
expect(onSuccess).toHaveBeenCalled();
关于 Jest 的旁白 - 它目前不支持别名,这就是为什么您的 require('jquery')
调用不起作用的原因。 (请参阅此拉取请求:https://github.com/facebook/jest/pull/237)。我没有尝试过这个,但是如果你使用完整路径来要求 jquery 而不是别名,你可能会让 Jest 工作。像 require('../node_modules/jquery');
这样的东西虽然很烦人,这就是为什么我可能也会选择 Karma/Jasmine 以及一个新项目。