如何使用浅渲染而不是使用 NO_ERRORS_SCHEMA 编写 Angular Jasmine 简单的“应该创建”测试用例

我有一些 Angular (v6) 组件，其模板包含 RouterLink 参考。这些组件具有默认生成的名为“should create”的测试用例，该测试用例会出现以下错误：

无法绑定到“routerLink”，因为它不是“a”的已知属性。 （“12”>

我可以使用 NO_ERRORS_SCHEMA 修复此问题，例如：

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NotFoundComponent ],
      schemas: [NO_ERRORS_SCHEMA]
    })
    .compileComponents();
  }));

但使用这种方法的问题是，它有点过于残酷，并且隐藏了模板的所有错误（正如我在阅读这个问题时发现的那样：Angular 的 NO_ERRORS_SCHEMA 有问题吗？ https://stackoverflow.com/questions/41681372/problems-with-angulars-no-errors-schema)

这个问题包含各种解决方案，其中1需要使用名为的测试帮助程序库浅渲染.

我需要找出如何使用浅渲染而不是 NO_ERROR_SCHEMA 编写等效的“应该创建”测试用例。记录的示例不涵盖这种情况，因此我只是尝试使用其他适当的示例进行实验。这是我的代码：

成分：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'apclib-lock',
  templateUrl: './lock.component.html',
  styleUrls: ['./lock.component.css']
})
export class LockComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

组件规格：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { LockComponent } from './lock.component';
import { Shallow } from 'shallow-render';
import { AuthenticationModule } from '../authentication.module';

describe('LockComponent', () => {
  let component: LockComponent;
  let fixture: ComponentFixture<LockComponent>;
  let shallow: Shallow<LockComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ LockComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(LockComponent);
    component = fixture.componentInstance;
    shallow = new Shallow<LockComponent>(LockComponent, AuthenticationModule);
    fixture.detectChanges();
  });

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

模板：

<section id="wrapper">
  <div class="login-register" style="background-image:url(../assets/images/background/login-register.jpg);">
    <div class="login-box card">
      <div class="card-body">
        <form class="form-horizontal form-material" id="loginform" action="index.html">

          <div class="form-group text-center">
            <div class="col-xs-12">
              <a class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" [routerLink]="['/dashboard/dashboard1']">Log In</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

ERROR:

Chrome 67.0.3396 (Mac OS X 10.13.5) LockComponent 应创建 FAILED 无法绑定到“routerLink”，因为它不是“a”的已知属性。 （“12”> ][routerLink]="['/dashboard/dashboard1']">登录 “）：ng:///DynamicTestModule/LockComponent.html@21:95

我正在尝试以正确的方式做事，并且使用 NO_ERRORS_SCHEMA 残酷地隐藏模板错误似乎不是正确的做法，所以我只需要找出如何使用浅渲染来消除简单的创建测试用例的错误。

PS: in https://github.com/getsaf/shallow-render/wiki/Examples https://github.com/getsaf/shallow-render/wiki/Examples很高兴看到一个名为“带有 RouterLink 的组件”的示例，因为这是其他开发人员遇到的常见错误，也是我尝试切换到浅渲染的主要原因。

您似乎正在尝试结合使用 Shallow 和 TestBed。浅是一个替代品用于测试床。好消息是这使得测试更容易编写。

import { Shallow } from 'shallow-render';
import { LockComponent } from './lock.component';
import { AuthenticationModule } from '../authentication.module';

describe('LockComponent', () => {
  let shallow: Shallow<LockComponent>;

  beforeEach(() => {
    shallow = new Shallow<LockComponent>(LockComponent, AuthenticationModule);
  });

  it('should create', async () => {
    const {instance} = await shallow.render();

    expect(instance).toBeTruthy();
  });
});

旁注：我不太喜欢 Angular 的“应该创建”默认测试，因为它们实际上并没有使用该组件或验证其任何行为。我绝对建议测试组件行为而不是简单的创建测试。

如果您有兴趣测试链接的行为，RouterModule可能有点奇怪，你may想要/需要使用 Angular 的RouterTestingModule https://angular.io/api/router/testing/RouterTestingModule。如果你走这条路，我在官方有一个示例规范堆栈闪电战 https://stackblitz.com/edit/shallow-render?file=examples%2Fcomponent-with-routing.spec.ts您可以参考。我刚刚更新它以使用RouterLinkDirective读完这个问题后。