程序员经验分享-hwhale

Jasmine 测试中的模板解析错误，但实际应用程序中没有错误

2024-05-23

我开发了 Jasmine 规范来测试 Angular 2 组件MiddleRowComponent。当我运行 jasmine 测试时，出现以下错误：

zone.js:388 Unhandled Promise rejection: Template parse errors:
'circles' is not a known element:
1. If 'circles' is an Angular component, then verify that it is part of this module.
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div>
      <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
         [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles>
      </div>
      <div class="col-md-10 "): MiddleRowComponent@9:9
'custom-button' is not a known element:

但是，如果我像平常一样在浏览器中运行我的网络应用程序，则不会发生错误。circles确实是模块的一部分。和custom-button是导入的共享模块的一部分。这是 module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import * as LandingPage from './index';

@NgModule({
   imports: [ CommonModule, SharedModule ],
   declarations: [
      LandingPage.MiddleRowComponent,
      LandingPage.LandingPageComponent,
      LandingPage.CirclesComponent
   ],
   exports: [ LandingPage.LandingPageComponent ],
})
export class LandingPageModule { }

一切都按照应有的方式导入和声明，并且在运行应用程序时无需测试即可运行。我用一个done考虑到从单独的模板文件获取组件模板的异步性质，使 beforeEach 工作。我使用 jasmine spec runner HTML 文件运行测试。为什么我的组件MiddleRowComponent使用不是茉莉花测试中的已知元素，但在正常运行应用程序时是已知的元素吗？

这是茉莉花规格：

import 'zone.js/dist/long-stack-trace-zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/fake-async-test.js';
import 'zone.js/dist/sync-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/jasmine-patch.js';

import { ComponentFixture, TestBed } from '@angular/core/testing';
import {
    BrowserDynamicTestingModule,
    platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { MiddleRowComponent } from './middle-row.component';

let comp: MiddleRowComponent;
let fixture: ComponentFixture<MiddleRowComponent>;
let de: DebugElement;
let el: HTMLElement;

describe('MiddleRowComponent', () => {
   var fixture: any;
   var comp: any;
    beforeAll(() => {
        TestBed.resetTestEnvironment();
        TestBed.initTestEnvironment(BrowserDynamicTestingModule,
            platformBrowserDynamicTesting());
    });

    beforeEach((done) => {
        TestBed.configureTestingModule({
            declarations: [MiddleRowComponent], // declare the test component
        }).compileComponents().then(() => {
            fixture = TestBed.createComponent(MiddleRowComponent);
            comp = fixture.componentInstance; // MiddleRowComponent test instance
            // query for the title <h1> by CSS element selector
            de = fixture.debugElement.query(By.css('h1'));
            el = de.nativeElement;
            done();
        });
    });

    it('should display original title', () => {
        fixture.detectChanges();
        expect(el.textContent).toContain(comp.word);
    });

    it('should display a different test title', () => {
        comp.word = 'Test Title';
        fixture.detectChanges();
        expect(el.textContent).toContain('Test Title');
    });
});

完整错误：

zone.js:388 Unhandled Promise rejection: Template parse errors:
'circles' is not a known element:
1. If 'circles' is an Angular component, then verify that it is part of this module.
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div>
      <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
         [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles>
      </div>
      <div class="col-md-10 "): MiddleRowComponent@9:9
'custom-button' is not a known element:
1. If 'custom-button' is an Angular component, then verify that it is part of this module.
2. If 'custom-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      </div>
      <div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div">
         [ERROR ->]<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button>
      </div>
   </div>
"): MiddleRowComponent@12:9 ; Zone: ProxyZone ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'circles' is not a known element:
1. If 'circles' is an Angular component, then verify that it is part of this module.
2. If 'circles' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("</div>
      <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
         [ERROR ->]<circles (onWordChanged)="onWordChanged($event)"></circles>
      </div>
      <div class="col-md-10 "): MiddleRowComponent@9:9
'custom-button' is not a known element:
1. If 'custom-button' is an Angular component, then verify that it is part of this module.
2. If 'custom-button' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      </div>
      <div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div">
         [ERROR ->]<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button>
      </div>
   </div>
"): MiddleRowComponent@12:9
    at TemplateParser.parse (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:7730:21)
    at RuntimeCompiler._compileTemplate (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17573:53)
    at eval (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:64)
    at Set.forEach (native)
    at RuntimeCompiler._compileComponents (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17493:21)
    at createResult (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:17404:21)
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:232:26)
    at ProxyZoneSpec.onInvoke (http://localhost:3002/node_modules/zone.js/dist/proxy.js:79:39)
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:231:32)
    at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:114:43)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…)

好吧，您的测试模块仅声明了 MiddleRowComponent。所以它不知道 CircleComponent：

TestBed.configureTestingModule({
    declarations: [MiddleRowComponent], // declare the test component
})

在测试模块的声明中添加所有必需的组件，或者添加LandingPageModule测试模块的导入。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

angular

jasmine

Jasmine 测试中的模板解析错误，但实际应用程序中没有错误 的相关文章

随机推荐

热门标签