Если я высмеиваю 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();
  });

});

Из того, что я понимаю, это должно издеваться SubComponent, однако я получаю эту ошибку:

Cannot find module 'canvasjs' from 'sub.component.ts' (SubComponent импортирует Canvas JS)

Если SubComponent является поддельным, то эти тесты вообще не должны обращаться к файлу sub.component.ts, верно? Как я могу издеваться над SubComponent, чтобы к нему не обращался код из этого компонента?