Angular 2 Auth0 应用程序运行良好，但测试抛出“未定义 Auth0Lock”错误答案

【问题标题】：Angular 2 Auth0 app works fine but tests throw 'Auth0Lock is not defined' errorAngular 2 Auth0 应用程序运行良好，但测试抛出“未定义 Auth0Lock”错误
【发布时间】：2017-06-07 06:10:33
【问题描述】：

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

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

但是，我的单元测试总是因“未定义 Auth0Lock”而失败。这是我的测试代码，它结合了另一个 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"
        }
    }
  );

【问题讨论】：

标签： angular karma-jasmine auth0

【解决方案1】：

在我的情况下（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();
  }));
});

【讨论】：

有趣——这是我尝试的第一件事，因为它与您导入其他引用的方式相似，但当时它不起作用。也许它已经更新了。谢谢，我会再试一次，因为这是正确的方法。

【解决方案2】：

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

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

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

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

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

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

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

而不是直接导出。

【讨论】：