web-dev-qa-db-ja.com

TypeError：undefinedはコンストラクタではありません

私はAngularを初めて使用しますが、これについてはまだ多くを理解しようとしています。 Yeoman Generatorから生成した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への呼び出しが気に入らないのはなぜですか？

ありがとう

javascriptangularjsphantomjskarma-jasmine
31
Adam Plocher

undefinedはコンストラクタではありません

定義されていない関数を呼び出そうとしたときにPhantomJSが表示するエラーメッセージです。 PhantomJSがサポートするECMAScriptのバージョンに依存します。このブラウザーはテストで使用している機能をサポートしているため、Chromeで正常に機能するということです。問題を解決し、PhantomJSを使用できるようにするために、「PhantomJSに認識されていない」関数を独自のものに置き換えることができます。

55
dgraf

includes()メソッドを使用してTypeError: undefined is not a constructorエラーが発生しました。 includes()およびendsWith()メソッドはECMAScript 2015で新しく追加され、Internet Explorerではサポートされていません。明らかにPhantomJSではサポートされていません。

エンドユーザーがInternet Explorerを使用している可能性があります。その場合、indexOf()またはincludes()の代わりに、完全にサポートされているendsWith()メソッドを使用することができます。

たとえば、私の場合、すべてがクロムでうまく機能しましたが、私のテストは行で失敗していました：

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

代わりにindexOf（）メソッドを使用するように変更しました。

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

そして、私はもはやエラーを得ていませんでした

TypeError：undefinedはコンストラクタではありません

15
Hula_Zell

これを回答として投稿するか、質問への単なる編集として投稿するかどうかを議論しましたが、それは私の回答だと思います（今のところ）：

問題は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'
],

ところで-私はendsWithがECMAScript6の新機能であることに気付きました（古いと思っていました）が、WebStormはangle-ui-gridのヘルパー関数を参照していることを示しています。 ui-gridの依存関係の読み込みが遅すぎるかどうかを確認するために、karma.conf.jsファイルのfiles配列をいじってかなりの時間を費やしました。すべてのテストで、Chromeで正常に機能しましたが、PhantomJSでは機能しませんでした。理由はまだわかりません。

10
Adam Plocher

私の場合：循環依存関係の原因：

PhantomJS 2.1.1（Windows 8 0.0.0）ERROR TypeError：undefined is not constructor is not（evaluating '（0、_actions.prefix）（' SET_USER_INPUT_PHONE_NUMBER '）'）undefined：12

JavaScriptのプロダクションコードにインポートを追加した後、同じエラーが表示されました（ES6構文はbabel/webpackでコンパイルされています）。アプリケーションのプロダクションビルドがchromeにロードされたときに変更は問題ありませんでしたが、phantomJSでテストを実行するとエラーが発生しました。私の場合、追加されたインポートは循環依存関係を作成しました。

将来の参考のためにここにドロップします（数週間前に同じ問題に出くわし、数週間後に再び頭を悩ませたくない）と同じエラーをグーグルする他の人のために。

6
Martin

私はPhantomJSで同様のエラーに直面しました：

私にとってエラーは、サービス用のスパイオブジェクトを作成する方法でした。

コードファイルnew Service.getData(param1, param2)の行のエラー

テストファイルの修正：jasmine.createSpyObj('Service',['getData'])

欠落していたのは、spyObjの作成中に['getData]を追加していたことです

0
Alok