In my current task, I am faced with the challenge of unit testing a component that relies on a subcomponent. The subcomponent utilizes CanvasJS for displaying plots, but this poses issues when running Jest Unit Tests.
As of now, in my spec file, the following implementation is in place:
import { SubComponent } from '../shared/components/sub/sub.component';
import { SubComponentMock } from '../shared/mocks/component/SubComponentMocks';
...
const createComponent = createComponentFactory({
component: PageComponent,
declarations: [ViewComponent],
imports: [],
providers: [
{ provide: SubComponent, useClass: SubComponentMock },
],
});
beforeEach(() => {
jest.restoreAllMocks();
spectator = createComponent();
});
it('should create', () => {
expect(spectator.component).toBeTruthy();
});
Within my SubComponentMocks file resides a class named SubComponentMock, which mirrors the functions present in SubComponent. However, encountering the error message:
Cannot find module 'canvasjs' from 'sub.component.ts'I find myself questioning why the mock does not prevent the test from attempting to locate the canvasjs module at all. Ideally, the test should solely interact with SubComponentMocks and avoid referencing the canvasjs module in sub.component.ts. Is there a way to fully mock the component and circumvent the need to search for the canvasjs module during testing?