无法将Angular Test Bed功能集成到Mocha打字稿测试中

Question

我正在尝试将 mocha 测试集成到我现有的 Angular 应用程序中，但遇到了很多困难这样做。我正在尝试使用 Angular Test Bed 实例化组件实例并检查是否已创建组件。但是，在尝试修复每个错误时，我遇到了很多错误，最后被卡住。任何帮助表示赞赏。

当我将测试用例编写到现有的 Angular 应用程序时，我必须满足的要求是

  

  
• 以 typescript
编写测试文件   
• 使用 mocha + chai + sinon >仅在可能的情况下
  
• 将手动配置保持在最低水平。
  

因此，我已经完成了mocha documentation和this medium post中提到的步骤。

这是我的测试文件 login.component.test.ts 。

describe('LoginComponent', () => {
    let fixture: ComponentFixture<LoginComponent>;
    let component: LoginComponent;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [LoginComponent],
        });
        fixture = TestBed.createComponent(LoginComponent);
        component = fixture.componentInstance;
    });

    afterEach(() => {
        TestBed.resetTestEnvironment();
    });

    it('create Login component', () => {
        assert.ok(component);
    });
});

然后我得到了错误，

LoginComponent
       "before each" hook for "create Login component":
     TypeError: Cannot read property 'getComponentFromError' of null
      at TestBedViewEngine._initIfNeeded (D:\packages\core\testing\src\test_bed.ts:393:46)
      at TestBedViewEngine.createComponent (D:\packages\core\testing\src\test_bed.ts:594:10)
      at Function.TestBedViewEngine.createComponent (D:\packages\core\testing\src\test_bed.ts:247:36)
      at Context.<anonymous> (test\login.component.test.ts:13:27)

然后，根据this，我将其修复。

更正后，我立即收到此错误。

  1) LoginComponent
       "before each" hook for "create Login component":
     Error: Can't resolve all parameters for ApplicationModule: (?).
      at syntaxError (D:\Testing\packages\compiler\src\util.ts:100:17)
      at CompileMetadataResolver._getDependenciesMetadata (D:\Testing\packages\compiler\src\metadata_resolver.ts:956:27)
      at CompileMetadataResolver._getTypeMetadata (D:\Testing\packages\compiler\src\metadata_resolver.ts:836:20)
      at CompileMetadataResolver.getNgModuleMetadata (D:\Testing\packages\compiler\src\metadata_resolver.ts:680:18)
      at CompileMetadataResolver.getNgModuleSummary (D:\Testing\packages\compiler\src\metadata_resolver.ts:450:31)
      at D:\Testing\packages\compiler\src\metadata_resolver.ts:586:44
      at Array.forEach (<anonymous>)
      at CompileMetadataResolver.getNgModuleMetadata (D:\Testing\packages\compiler\src\metadata_resolver.ts:569:43)
      at CompileMetadataResolver.getNgModuleSummary (D:\Testing\packages\compiler\src\metadata_resolver.ts:450:31)
      at D:\Testing\packages\compiler\src\metadata_resolver.ts:586:44
      at Array.forEach (<anonymous>)
      at CompileMetadataResolver.getNgModuleMetadata (D:\Testing\packages\compiler\src\metadata_resolver.ts:569:43)
      at CompileMetadataResolver.getNgModuleSummary (D:\Testing\packages\compiler\src\metadata_resolver.ts:450:31)
      at D:\Testing\packages\compiler\src\metadata_resolver.ts:586:44
      at Array.forEach (<anonymous>)
      at CompileMetadataResolver.getNgModuleMetadata (D:\Testing\packages\compiler\src\metadata_resolver.ts:569:43)
      at CompileMetadataResolver.getNgModuleSummary (D:\Testing\packages\compiler\src\metadata_resolver.ts:450:31)
      at D:\Testing\packages\compiler\src\metadata_resolver.ts:548:20
      at Array.forEach (<anonymous>)
      at CompileMetadataResolver.getNgModuleMetadata (D:\Testing\packages\compiler\src\metadata_resolver.ts:521:43)
      at JitCompiler._loadModules (D:\Testing\packages\compiler\src\jit\compiler.ts:127:49)
      at JitCompiler._compileModuleAndAllComponents (D:\Testing\packages\compiler\src\jit\compiler.ts:115:32)
      at JitCompiler.compileModuleAndAllComponentsSync (D:\Testing\packages\compiler\src\jit\compiler.ts:65:38)
      at CompilerImpl.compileModuleAndAllComponentsSync (D:\Testing\packages\platform-browser-dynamic\src\compiler_factory.ts:60:35)
      at TestingCompilerImpl.compileModuleAndAllComponentsSync (D:\packages\platform-browser-dynamic\testing\src\compiler_factory.ts:52:27)
      at TestBedViewEngine._initIfNeeded (D:\packages\core\testing\src\test_bed.ts:391:28)
      at TestBedViewEngine.createComponent (D:\packages\core\testing\src\test_bed.ts:594:10)
      at Function.TestBedViewEngine.createComponent (D:\packages\core\testing\src\test_bed.ts:247:36)
      at Context.<anonymous> (test\login.component.test.ts:15:27)

我通过添加此导入行对其进行了修复。

import 'core-js/es7/reflect';

然后，发生以下错误。

LoginComponent
       "before each" hook for "create Login component":
     ReferenceError: XMLHttpRequest is not defined
      at ResourceLoaderImpl.get (D:\Testing\packages\platform-browser-dynamic\src\resource_loader\resource_loader_impl.ts:21:17)
      at DirectiveNormalizer._fetch (D:\Testing\packages\compiler\src\directive_normalizer.ts:58:37)
      at DirectiveNormalizer._preParseTemplate (D:\Testing\packages\compiler\src\directive_normalizer.ts:105:23)
      at DirectiveNormalizer.normalizeTemplate (D:\Testing\packages\compiler\src\directive_normalizer.ts:92:14)
      at CompileMetadataResolver.loadDirectiveMetadata (D:\Testing\packages\compiler\src\metadata_resolver.ts:260:54)
      at D:\Testing\packages\compiler\src\jit\compiler.ts:135:36
      at Array.forEach (<anonymous>)
      at D:\Testing\packages\compiler\src\jit\compiler.ts:133:65
      at Array.forEach (<anonymous>)
      at JitCompiler._loadModules (D:\Testing\packages\compiler\src\jit\compiler.ts:130:71)
      at JitCompiler._compileModuleAndAllComponents (D:\Testing\packages\compiler\src\jit\compiler.ts:115:32)
      at JitCompiler.compileModuleAndAllComponentsSync (D:\Testing\packages\compiler\src\jit\compiler.ts:65:38)
      at CompilerImpl.compileModuleAndAllComponentsSync (D:\Testing\packages\platform-browser-dynamic\src\compiler_factory.ts:60:35)
      at TestingCompilerImpl.compileModuleAndAllComponentsSync (D:\packages\platform-browser-dynamic\testing\src\compiler_factory.ts:52:27)
      at TestBedViewEngine._initIfNeeded (D:\packages\core\testing\src\test_bed.ts:391:28)
      at TestBedViewEngine.createComponent (D:\packages\core\testing\src\test_bed.ts:594:10)
      at Function.TestBedViewEngine.createComponent (D:\packages\core\testing\src\test_bed.ts:247:36)
      at Context.<anonymous> (test\login.component.test.ts:16:27)

我已经npm i xmlhttprequest --save-dev做到了这一点，并试图在运行测试时将其作为一项要求，但仍然没有希望。

这是我的 tsconfig.json 文件，如果您觉得有用的话。

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es5",
        "types": ["node", "mocha"],
        "typeRoots": ["node_modules/@types"],
        "lib": ["es2018", "dom"],
        "paths": {
            "cComponents": ["dist/cComponents"],
            "cComponents/*": ["dist/cComponents/*"]
        }
    }
}

我已经梳理了许多解决方案，但仍然无法修复配置。我给出了错误修复历史记录，以询问我所做的任何操作是否导致了当前错误。感谢在我的应用程序中配置 mocha 的任何帮助以解决此问题。当我移除 fixture 部分并对assert.ok(1)之类的随机断言进行硬编码时，它就可以工作。因此问题出在我认为的 角度测试台 部分。也没有为该组件提供依赖项注入。如果这是故障，请帮助解决问题。如果没有，我们将不胜感激。预先感谢。