html - Angular Testing : Failed to load html component

Question

我在使用 templateUrl 测试组件时发现了这个错误。我不知道如何解决它。

在阅读帖子后，我在测试文件中添加了 TestBed.resetTestEnvironment() 和 TestBed.initTestEnvironment()，但并没有解决问题。似乎配置文件中缺少某些内容，无法加载 html 文件。

这里是 karma 日志:

这是我的 karma.config.js 文件:

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'karma-typescript'],

files: [
  // Zone:
  './node_modules/zone.js/dist/zone.js', // 'Uncaught ReferenceError: Zone is not defined'
  './node_modules/zone.js/dist/proxy.js', // 'TypeError: Cannot read property 'assertPresent' of undefined'
  './node_modules/zone.js/dist/sync-test.js',
  './node_modules/zone.js/dist/async-test.js', // 'TypeError: Cannot read property 'assertPresent' of undefined'
  './node_modules/zone.js/dist/fake-async-test.js',
  './node_modules/zone.js/dist/jasmine-patch.js', // 'TypeError: Cannot read property 'assertPresent' of undefined'

  // Angular:
  './node_modules/angular/angular.js',
  './node_modules/@uirouter/angularjs/release/angular-ui-router.js',
  './node_modules/angular-mocks/angular-mocks.js',

  // ANY OTHER FILES TO LOAD FOR YOUR TESTS

  // App:
  './assets/app/app.component.ts',
  './assets/app/app.component.html',
  './assets/app/app.component.spec.ts',
],

exclude: [
  './assets/app/main.aot.ts'
],

preprocessors: {
  "**/*.ts": "karma-typescript"
},

reporters: ['spec', 'karma-typescript'],

port: 9876,

colors: true,

logLevel: config.LOG_INFO,

autoWatch: true,

browsers: ['Chrome'],

singleRun: false,

concurrency: Infinity,

mime: {
  'text/x-typescript': ['ts', 'tsx']
}})}

在下面你可以找到 app.component.ts 文件:

import { Component } from '@angular/core';
import { Constants } from './utils/constants';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styles:[
    `
        #status {
            background:#f8f9fa;
            bottom:0;
            left:0;
            margin:0;
            padding:0;
            position:fixed;
            width:100%;

          }

          #status div {
            margin:0;
            padding:5px;
            text-align:center;
            color:#c8c9ca;
          }
    `
]})
export class AppComponent {
appTitle = "App Title";
demoMode=(Constants.DEMO_MODE)?"Demo":"DefaultMode";
}

最后，我附上 app.component.spec.ts 文件:

import { AppComponent } from "./app.component";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { BrowserDynamicTestingModule,
platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { Constants } from "./utils/constants";
describe('AppComponent', () => {

let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
let h1: HTMLElement;



beforeEach(() => {

    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(BrowserDynamicTestingModule,
       platformBrowserDynamicTesting());


    TestBed.configureTestingModule({
        declarations: [AppComponent],
    })
    .compileComponents().then(()=>{
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        h1 = fixture.nativeElement.querySelector('h1');
    }).catch((error)=>{
        console.log(error);
    });

});

it('should display original title', () => {
    expect(h1.textContent).toContain("App Title");
});

it('status bar text should correspond to the working mode', () =>{
    let text=(Constants.DEMO_MODE)?"Demo":"DefaultMode";
    expect(document.getElementById("status-text").textContent).toEqual(text);
});
});

提前致谢!

Answer 1

您应该采用如下文本框的 nativeElement，

h1 = fixture.nativeElement.querySelector('h1').nativeElement;

另外，请在it语句中查询fixture，并在it语句中添加fixture.detectChanges();来触发变化检测