使用 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 以及一个新项目。