Angular 6 + Universal Karma 测试导入模块

Question

问题

我目前正在尝试使用 Karma 测试我的 Angular 6 应用程序，但我不断遇到如下错误：

Can't bind to 'ngModel' since it isn't a known property of 'mat-select'.

当我在这个单一组件中导入它时它确实有效，但在另一个组件中我必须再次导入它..

现在导入的测试文件之一的示例：

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

import { AdminOverviewComponent } from './admin-overview.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule, MatTableModule, MatSelectModule } from '@angular/material';

describe('AdminOverviewComponent', () => {
  let component: AdminOverviewComponent;
  let fixture: ComponentFixture<AdminOverviewComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AdminOverviewComponent ],
      imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatTableModule, MatSelectModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AdminOverviewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

是否可以将我在 app.module.ts 中声明的所有模块导入到 Karma 生成的所有模块中？

谢谢。

Answer 1

每个测试 spec 文件应该独立于其他文件。因此，您必须在每个测试 spec 文件中重新配置所有内容（组件测试所需的内容）。

据我所知，没有这样的全局配置来导入模块、声明组件等。

在你的情况下你必须这样做，

imports : [FormsModule] 在所有使用 ngModel 的规范中

Answer 2

我知道这是旧的，但是，万一有人来看这里……

Angular 自动添加一个 /src/test.ts- 默认情况下它看起来像这样：

declare const require: any;

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

您可以在此处添加任何全局模块 - 例如 FormsModule，如下所示：

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  [
    BrowserDynamicTestingModule,
    MatIconTestingModule, // Say i'm annoyed that tests fail whenever I add an icon.. I'll add this here
    NoopAnimationsModule,
    // Add any additional modules here
  ],
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

这个列表不应该那么大 - 通常您希望您的规格是独立的，但我发现这是避免一遍又一遍地重复相同导入的实用方法

Angular 6 + Universal Karma 测试导入模块

Angular 6 + Universal Karma testing importing modules

javascript

karma-jasmine

angular-universal

angular

问题