如何使用 Angular 10 将 html 文件导入并编译到 Jasmine 单元测试中？

Question

坚持了几天，到目前为止，我尝试过的任何方法似乎都不起作用。

我们有一个使用 Angular 组件库的大型 Angular 10 项目。

在同一个 mono 存储库中，我有另一个使用这些库组件的 Angular 项目。

目录/项目

  /projects
    /my-front-and-app
      /src/
        /app/
          app.component.html
          app.component.ts
          app.component.spec.ts
          app.component.scss
    /library-components
       /src/
         /lib/
           /header/
           /footer/
           /sidenav/
             sidenav.component.html
             sidenav.component.ts
             sidenav.component.spec.ts
             sidenav.component.scss

好的，所以前端组件只消耗所有库组件

app.component.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>{{ title }}</title>
  </head>
  <body>
    <lib-header></lib-header>

    <div class="container-fluid">
      <div class="row">
        <div class="sidebar">
          <lib-sidebar-nav> </lib-sidebar>
        </div>

        <div class="col">
          <div class="my-container">
            <div>
              <router-outlet></router-outlet>
              <hr />
            </div>
          </div>
        </div>
      </div>
    </div>

    <lib-footer></lib-footer>
  </body>
</html>

所以问题是当我尝试测试我的前端组件（app.component.ts）时，它会失败，因为它似乎找不到它们的模板。

所以这是我的单元测试。

app.component.spec.ts


import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { DebugElement } from '@angular/core';

import {
  HeaderComponent,
  FooterComponent,
  SidebarNavComponent,
} from 'lib-platform-components';

import { AppComponent } from './app.component';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let el: DebugElement;

  beforeEach( waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          HeaderComponent,
          SideNavComponent,
          FooterComponent
        ],
        imports: [
          RouterTestingModule,
          HttpClientTestingModule
        ], 
      })
        .compileComponents()
       
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    el = fixture.debugElement;

    fixture.detectChanges();
  });

  it('should create the app', () => {
    expect(component).toBeTruthy();
  });

});

基本上我得到的是同样的错误。

Error: This test module uses the component HeaderComponent which is using a "templateUrl" or "styleUrls", but they were never compiled. Please call "TestBed.compileComponents" before your test.

所以我尝试了几件事。 包括 Angular 文档推荐的那个。 overrideComponent但如果可行，我就不会在这里

        .overrideComponent(SideNavComponent, {
          set: {
            templateUrl: '../../../library-components/src/lib/sidenav/sidenav.component.html',
            styleUrls: ['../../../library-components/src/lib/sidenav/sidenav.component.scss']
          }
        })

给我同样的错误

Failed: Uncaught (in promise): Failed to load ../../../lib-platform-components/src/lib/header/header.component.html

所以我没有想法。 我猜这是某种 Webpack / Karma 配置的东西，但我也没有运气。

这是我的 karam.conf

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
    ],
    client: {
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../../coverage/app'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true,
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true,
    proxies: {
      '/assets/fonts/': '../kds-assets/fonts/',
      '/assets/icons/': '../kds-assets/icons/',
      '/assets/images/': '../kds-assets/images/',
    },
  });
};

无论如何，在这一点上，任何帮助表示赞赏。

谢谢

Answer 1

如果HeaderComponent, FooterComponent and SidebavNavComponent对于您的单元测试来说不是不可或缺的（即您不与它们交互），我会使用NO_ERRORS_SCHEMA告诉测试忽略您不理解的 html 元素（在我们的例子中是组件）。

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let el: DebugElement;

  beforeEach( waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
        ],
        imports: [
          RouterTestingModule,
          HttpClientTestingModule
        ],
        // add this line
        schemas: [
          NO_ERRORS_SCHEMA,
        ] 
      })
        .compileComponents()
       
    })
  );

如果它们是您的单元测试不可或缺的一部分（您与它们交互），那么我认为您必须使用tsconfig.spec.json （ files或include属性），您必须在其中包含本地库以进行编译。 我认为这将摆脱错误

如何使用 Angular 10 将 html 文件导入并编译到 Jasmine 单元测试中？

问题描述

1 个解决方案

解决方案1
0 2021-05-05 02:31:09

如何使用 Angular 10 将 html 文件导入并编译到 Jasmine 单元测试中？

问题描述

1 个解决方案

解决方案1 0 2021-05-05 02:31:09

解决方案1
0 2021-05-05 02:31:09