Angular 2 Auth0应用运行良好，但测试抛出'Auth0Lock is not defined‘错误

Question

我已经按照下面的文档在我的Angular 2应用程序中成功地实现了Auth0身份验证。我已经通过npm install为auth0和auth0-lock安装了auth0-lock和类型。

我的应用运行得很好，成功地注册并验证了用户。

但是，我的单元测试总是失败，并显示"Auth0Lock is not defined“。以下是我的测试代码，其中包含了另一个SO用户的建议，按如下方式声明Auth0Lock (没有任何效果)：

/* tslint:disable:no-unused-variable */

import { TestBed, async, inject } from '@angular/core/testing';
import {AuthService} from "./auth.service";
import {RouterTestingModule} from "@angular/router/testing";
let Auth0Lock = require('auth0-lock').default;

describe('AuthService', () => {
  let service: AuthService = null;

  let router: any = {
    navigate: jasmine.createSpy('navigate')
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
        providers: [
          AuthService,
          {provide:RouterTestingModule, useValue: router}
          ],
        imports: [RouterTestingModule]
       });
    });

  beforeEach(inject([AuthService], (auth: AuthService) => {
    service = auth;
  }));

  it('should exist', () => {
    expect(service).toBeTruthy();
  });
});

由于这个错误，我无法通过一个非常简单的测试来获得我需要测试的内容。

我尝试过从auth0导入*，也尝试过从auth0-lock导入*，但没有更改。

下面是我的错误：

ReferenceError: Auth0Lock is not defined
    at new AuthService (webpack:///./src/app/features/user/authentication/auth.service.ts?:21:25)
    at DynamicTestModuleInjector.get (/DynamicTestModule/module.ngfactory.js:175:67)
    at DynamicTestModuleInjector.getInternal (/DynamicTestModule/module.ngfactory.js:253:51)
    at DynamicTestModuleInjector.NgModuleInjector.get (webpack:///./~/@angular/core/src/linker/ng_module_factory.js?:155:44)
    at TestBed.get (webpack:///./~/@angular/core/bundles/core-testing.umd.js?:817:51)
    at eval (webpack:///./~/@angular/core/bundles/core-testing.umd.js?:823:65)
    at Array.map (native)
    at TestBed.execute (webpack:///./~/@angular/core/bundles/core-testing.umd.js?:823:33)
    at Object.eval (webpack:///./~/@angular/core/bundles/core-testing.umd.js?:911:49)
    at ZoneDelegate.invoke (webpack:///./~/zone.js/dist/zone.js?:242:26)
    at ProxyZoneSpec.onInvoke (webpack:///./~/zone.js/dist/proxy.js?:79:39)
    at ZoneDelegate.invoke (webpack:///./~/zone.js/dist/zone.js?:241:32)
    at Zone.run (webpack:///./~/zone.js/dist/zone.js?:113:43)
    at Object.eval (webpack:///./~/zone.js/dist/jasmine-patch.js?:102:34)

fwiw，auth.service.ts?:21:25包含以下内容：

  lock = new Auth0Lock (mtmConfig.clientID, mtmConfig.domain, {
    allowedConnections: ['Username-Password-Authentication'],
    avatar: null,
    theme: {
          primaryColor: "#E79287",
          foregroundColor: "#000000",
          logo: "https://some real url/"
        },
    languageDictionary: {
          title: "the title"
        }
    }
  );

Answer 1

回答我自己的问题-并提供更多信息：

通过在我的index.html页面上包含脚本，我已经开始实现Auth0。因此，当应用程序运行时，身份验证工作。

但是，虽然我在测试中添加了以下内容，但我无法将其添加到我的实际服务中，因为在进行测试时，该服务无法访问通过CDN加载的脚本：

let Auth0Lock = require('auth0-lock').default;

将其添加到服务中后，一切正常。

作为调查的一部分，我仔细研究了为什么需要.default的原因。d.ts文件与大多数文件的不同之处在于，模块是在最后声明的，并且使用以下语法

declare module "auth0-lock" {
    export default Auth0Lock;
}

而不是直接导出。

Answer 2

在我的例子(Angular2应用程序)中，我是这样修复的：

我的auth.service.ts文件：

import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import Auth0Lock from 'auth0-lock'; // the fix

// forget this
// declare var Auth0Lock: any;

@Injectable()
export class AuthService {

  // Configure Auth0
  lock = new Auth0Lock('LXu6eVhR6kdiugITygiuyIUYGkjh', 'mydomain.auth0.com', {});
  (...)

我的auth.service.spec.ts文件：

import { TestBed, inject } from '@angular/core/testing';
import { AuthService } from './auth.service';

describe('AuthService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [AuthService]
    });
  });

  it('should ...', inject([AuthService], (service: AuthService) => {
    expect(service).toBeTruthy();
  }));
});