Question

我有一个完美的表格。当我在项目上运行“ ng test”时，就会出现此问题。我使用的是使用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>

component.ts

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

module.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 { }

component.spec.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');
  });

编辑：对不起，这个家伙不在。创建这个时，我几乎睁不开眼睛。

Answer 1

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

Answer 2

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

因此，您的module.ts未使用（如果您在此处显示的内容看起来还不错，则可以使用。）

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

您的规格文件通常具有：

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

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

在您的示例中，我想FormModule没有导入您的测试模块中。因此，不会声明您在form上使用的特定指令，并且执行正确地会失败。

Answer 3

这最终成功了。

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();
  });


});

如何修复无法正常运行的项目的默认单元测试

3 个答案: