角度测试：无法加载html组件

Question

使用templateUrl测试组件时捕获了此错误。 我不知道该如何解决。

阅读文章后，我在测试文件中添加了TestBed.resetTestEnvironment（）和TestBed.initTestEnvironment（），但是并不能解决问题。 似乎配置文件中缺少某些内容，并且无法加载html文件。

以下是业力日志：

这是我的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(); 在it里面触发变化检测