angular - 如果我模拟一个 Angular 组件，如何防止使用原始组件？

Question

我试图在单元测试中模拟一个 Angular 组件，但原始组件仍然被使用，模拟似乎不起作用。我正在测试MainComponent并想模拟SubComponent。这是我正在尝试的：

import { MockComponent } from 'ng-mocks';
import { MainComponent } from './main.component';
import { FormsModule } from '@angular/forms';
import { AgGridModule } from 'ag-grid-angular';
import { SubComponent } from '../shared/components/sub/sub.component';
import { MaterialModule } from '../material.module';

describe('MainComponent', () => {
  let spectator: Spectator<MainComponent>;

  const createComponent = createComponentFactory({
    component: MainComponent,
    declarations: [MainComponent, MockComponent(SubComponent)],
    imports: [FormsModule, MaterialModule, AgGridModule],
    providers: [],
  });

  beforeEach(() => {
    spectator = createComponent();
  });

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

});

据我了解，这应该 mock SubComponent，但是，我收到了这个错误：

Cannot find module 'canvasjs' from 'sub.component.ts'（子组件导入 CanvasJS）

如果 SubComponent 被模拟，那么这些测试根本不应该访问文件 sub.component.ts ，对吗？如何模拟 SubComponent 以便不访问该组件的代码？

标签： angulartypescriptunit-testingmockingcanvasjs