代码之家 › 专栏 › 技术社区 › Keithers

如何修复工作项目中失败的默认单元测试

karma-jasmine angular6 angular

Keithers · 技术社区 · 5 年前

我有一张工作得很好的表格。当我在我的项目上运行“NG测试”时,问题就出现了。我使用的是使用CLI构建项目时提供的原始测试用例。

业力输出:

AppComponent should create the app
Failed: Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("
    <div id="theForm">
      <h2>Bus Form</h2>
      <form [ERROR ->]#f="ngForm" name="theForm" (ngSubmit)="addLog(f)">
        <div class="form-group">
          <label>"): ng:///DynamicTestModule/AppComponent.html@3:12
There is no directive with "exportAs" set to "ngModel" ("
                name="boarded"
                [(ngModel)]="log.boarded"
                [ERROR ->]#logBoarded="ngModel"
                pattern="^[0-9]+$"
                required>

Component.html:

<title>BusLog</title>
<div id="theForm">
  <h2>Bus Form</h2>
  <form #f="ngForm" name="theForm" (ngSubmit)="addLog(f)">
    <div class="form-group">
      <label>Boarded</label>

      <input type="number"
            class="form-control"
            name="boarded"
            [(ngModel)]="log.boarded"
            #logBoarded="ngModel"
            pattern="^[0-9]+$"
            required>
      <span class="help-block danger" *ngIf="logBoarded.errors?.required && logBoarded.touched">
        The # of boarded is required
      </span>
      <span class="help-block danger" *ngIf="logBoarded.errors?.pattern && logBoarded.touched">
        The # of boaurded can only contain numbers
      </span>
    </div>

组件

import { Component } from '@angular/core';
import { Log } from './log';
import { LogService } from './log.service'; 
import { Title }     from '@angular/platform-browser';
...

模块TS

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { HttpClientModule } from '@angular/common/http';
    import { FormsModule } from '@angular/forms';
    import { AppComponent } from './app.component';


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpClientModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

部件规范TS

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        FormsModule
      ]
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'BusLog'`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('BusLog');
  });

编辑:很抱歉让这个人离开。当我创造这个的时候,我几乎睁不开眼睛。

3 回复 | 直到 5 年前

Jelle 5 年前

很可能您需要添加 FormsModule 作为测试文件设置的提供者。

Qortex 5 年前

用于测试的模块不是用于常规执行的模块。

因此,你的 module.ts 未使用(如果在此处显示的内容中看起来完全正常,则为事件)。

相反,模块是在规范文件中定义的。

您的规范文件通常具有:

describe('...', () => {
  // ...
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ... ],
      imports: [MAKE SURE FormsModule IS SHOWN HERE]
    })
    .compileComponents();
  }));

您必须确保在测试中导入了正确的模块。

在你的例子中,我猜 FormModule 未在测试模块中导入。所以你在你的 form 没有声明,执行完全失败。

Keithers 5 年前

这最终奏效了。

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        FormsModule
      ],
      providers: [
        HttpClient,
        HttpHandler
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement;
    fixture.detectChanges;
  });

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


});