用Jest进行AngularJS测试

时间:2020-05-07 17:32:03

标签: javascript angularjs jestjs

我正在尝试在Jest中模拟对AngularJS的HTTP请求。

我有这样的服务

public UserService(user) { 
    let url = this.env.getUserEndpoint("/users"); 
    let deferred = this.$q.defer<any>(); 

    this.$http.post<{ user: IUser }>(url,user).then( (result) => {
        deferred.resolve(result.data.user); 
    }, (error) => { 
        deferred.reject(this.httpErrorHandlingService.handleHttpError(error, "creating new user")); 
    }); 

    return deferred.promise;
}

测试:

beforeEach(angular.mock.module("test"));

var userService;

beforeEach(angular.mock.inject(function (UserService) {
    userService = UserService;
}));

it('should create new user', function () {
    const newUser = {
        name: "testUser",
        password: "12345"
    };

    return userService.createNewUser(newUser).then(user => expect(user.name).toEqual("testUser")
});

我得到的错误是Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Timeout

我在做什么错,如何模拟最简单的AngularJS HTTP请求?

1 个答案:

答案 0 :(得分:1)

您无需创建自己的承诺-$http.post()会为您返回一个承诺。然后,您可以在then方法的成功和错误函数回调中返回响应数据,并将这些数据传递给$http.post()返回的Promise。这应该可以简化您的服务代码:

public UserService(user) { 

    public createNewUser(user) {
        let url = this.env.getUserEndpoint("/users"); 

        return this.$http.post<{ user: IUser }>(url, user).then((result) => {
            return result.data.user; 
        }, (error) => { 
            this.httpErrorHandlingService.handleHttpError(error, "creating new user"); 
        });
    }
}