TypeError: undefined不是构造函数

TypeError: undefined is not a constructor

本文关键字:构造函数 undefined TypeError      更新时间:2023-09-26

我是Angular的新手,我还在努力弄清楚其中的大部分内容。我正在用Angular 1.5.8编写一些测试,它是我从约曼生成器生成的。

具体来说,我试图找出如何操纵$httpBackend结果(我不确定这是否重要)…

在我的app.js文件中我有以下代码:

.run(['$rootScope', '$location', 'breadcrumbService', function ($rootScope, $location, breadcrumbService) {
    $rootScope.$on('$viewContentLoaded', function () {
        jQuery('html, body').animate({scrollTop: 0}, 200);
    });
    $rootScope.isEditMode = false;
    $rootScope.$on('$stateChangeSuccess', function () {
        // ------------ this next line is failing -----------
        $rootScope.isEditMode = $location.path().toLowerCase().endsWith('/edit') || $location.path().toLowerCase().endsWith('/new');
    });
    $rootScope.parseJson = function (value) {
        return angular.fromJson(value);
    };
    $rootScope.bc = breadcrumbService;
    $rootScope.title = "";
}])

大约一半的行(我添加注释的地方)失败了。具体来说,endsWith函数失败了(toLower很好),错误如下:

PhantomJS 2.1.1 (Windows 8 0.0.0) Service: breadcrumbService should return breadcrumb label in json format FAILED
        TypeError: undefined is not a constructor (evaluating '$location.path().toLowerCase().endsWith('/edit')') in app/scripts/app.js (line 44)
        app/scripts/app.js:44:72
        $broadcast@bower_components/angular/angular.js:18005:33
        bower_components/angular-ui-router/release/angular-ui-router.js:3353:32
        processQueue@bower_components/angular/angular.js:16383:30
        bower_components/angular/angular.js:16399:39
        $eval@bower_components/angular/angular.js:17682:28
        $digest@bower_components/angular/angular.js:17495:36
        $apply@bower_components/angular/angular.js:17790:31
        done@bower_components/angular/angular.js:11831:53
        handleResponse@bower_components/angular-mocks/angular-mocks.js:1368:17
        flush@bower_components/angular-mocks/angular-mocks.js:1808:26
        test/spec/services/breadcrumbservice.js:33:27
        invoke@bower_components/angular/angular.js:4718:24
        workFn@bower_components/angular-mocks/angular-mocks.js:3085:26

这是我的测试代码(一些垃圾修改从不同的例子-只是试图让它工作):

'use strict';
describe('Service: breadcrumbService', function () {
    // load the service's module
    beforeEach(module('myModule'));
    var $httpBackend, $rootScope, createController, authRequestHandler;
    beforeEach(inject(function($injector) {
        $httpBackend = $injector.get('$httpBackend');
        console.log('Is null? '+ ($httpBackend == null));
        $httpBackend.whenGET(/views'/.*/).respond(200, [{}, {}, {}]);
        authRequestHandler = $httpBackend.when('GET', '/api/v1/SiteStagings')
            .respond({userId: 'userX'}, {'A-Token': 'xxx'});
        // Get hold of a scope (i.e. the root scope)
        $rootScope = $injector.get('$rootScope');
        $httpBackend.flush();
    }));
    // instantiate service
    var breadcrumbService;
    beforeEach(inject(function (_breadcrumbService_) {
        breadcrumbService = _breadcrumbService_;
    }));
    it('svc should exist', function () {
        expect(!!breadcrumbService).toBe(true);
    });
    it('should return breadcrumb label in json format', function () {
        var result = breadcrumbService.getFromCache('site', 'SiteGroupStagings', 46, 'SiteGroupDesc');
        console.log(result);
        expect(!!result).toBe(true);
    });
});
我不怀疑我在这里做错了什么,我只是不太明白这是什么。这个错误到底是什么意思,为什么它不喜欢我调用endsWith ?

谢谢

undefined不是构造函数

是当您尝试调用未定义的函数时,PhantomJS显示的错误消息。这取决于你的PhantomJS支持的ECMAScript版本。所以就像你说的,它在Chrome中工作得很好,因为这个浏览器支持你在测试中使用的功能。为了解决您的问题,并且仍然能够使用PhantomJS,您可以替换"未知的PhantomJS"。

我使用includes()方法获得TypeError: undefined is not a constructor错误。includes()endsWith()方法在ECMAScript 2015中是新的,不支持ie浏览器,显然也不支持PhantomJS。

您的最终用户可能正在使用Internet Explorer。在这种情况下,您可能希望使用完全支持的indexOf()方法,而不是includes()endsWith()

例如,在我的情况下,在chrome中一切都很好,但我的测试失败了:

if (item.name.includes('contents'))

我改为使用indexOf()方法:

if (item.name.indexOf('contents') !== -1)

然后我不再得到错误

TypeError: undefined不是构造函数

我争论过是否把这个作为我的问题的答案或只是一个编辑,但我想这是我的答案(目前):

似乎这个问题与PhantomJS有关。当我在karma.conf.js文件中将引擎更改为Chrome时,这些测试通过了。

我仍然不知道这个错误信息是什么意思,为什么它不能与PhantomJS一起工作,但至少我现在能够继续。

以下是对我的karma.conf.js的修改(以防有人好奇):

browsers: [
 //'PhantomJS',
 'Chrome'
],
// Which plugins to enable
plugins: [
 'karma-chrome-launcher',
 //'karma-phantomjs-launcher',
 'karma-jasmine'
],

Btw -我确实注意到endsWith是ECMAScript6的新版本(我认为它是旧版本),但WebStorm显示它引用了angular-ui-grid中的辅助函数。我花了相当长的时间在karma.conf.js文件中搞乱files数组,试图看看ui-grid依赖是否加载得太晚了。在每个测试中,它在Chrome中工作得很好,但不是PhantomJS。我还是不知道为什么。

在我的案例中:循环依赖导致:

PhantomJS 2.1.1 (Windows 8 0.0.0)错误TypeError: undefined不是一个构造函数(在undefined:12时求值'(0,_actions.prefix)('SET_USER_INPUT_PHONE_NUMBER')')

在我的javascript生产代码(ES6语法编译babel/webpack)中添加导入后,我得到了同样的错误。当应用程序的生产构建在chrome中加载时,更改是好的,但使用phantomJS运行测试会产生错误。在我的例子中,添加的导入创建了循环依赖项。

我把这个放在这里是为了将来的参考(我在几周前偶然发现了同样的问题,不想在接下来的几周内再抓我的头)和其他人谷歌同样的错误。

我在使用PhantomJS时遇到了类似的错误:

对我来说,错误是我为我的服务创建一个间谍对象的方式。

new Service.getData(param1, param2)代码文件行错误

修复测试文件:jasmine.createSpyObj('Service',['getData'])

创建spyObj时缺少的是添加['getData]