Angular - Jest can handle import entry point

Question

Currently im trying to create simple test for a component that is using rete.js, but for some reason the test if falling because cant handle one of the import path that is need it.

Component

import { Component, ElementRef, Injector, ViewChild } from '@angular/core';
import { EditorCreatorService } from './edtitor-creator';

@Component({
  selector: 'exb-visual-workflow-editor',
  templateUrl: 'visual-workflow-editor.component.html',
  styleUrls: ['visual-workflow-editor.component.scss'],
})
export class VisualWorkflowEditorComponent {
  @ViewChild('rete')
  container!: ElementRef;

  constructor(private injector: Injector, private readonly editorCreatorService: EditorCreatorService) {}

  ngAfterViewInit(): void {
    const el = this.container.nativeElement;

    if (el) {
      this.editorCreatorService.createEditor(el, this.injector);
    }
  }
}

service

import { NodeEditor, GetSchemes, ClassicPreset } from 'rete';
import { Injector, Injectable } from '@angular/core';
import { AreaPlugin } from 'rete-area-plugin';
import { ConnectionPlugin, Presets as ConnectionPresets } from 'rete-connection-plugin';

import { AngularPlugin, AngularArea2D, Presets as AngularPresets } from 'rete-angular-plugin/16'; -----> Import Error

import { CustomSocketComponent } from './customization/custom-socket/custom-socket.component';
import { CustomNodeComponent } from './customization/custom-node/custom-node.component';
import { CustomConnectionComponent } from './customization/custom-connection/custom-connection.component';

import { addCustomBackground } from './customization/custom-background';

type Schemes = GetSchemes<ClassicPreset.Node, ClassicPreset.Connection<ClassicPreset.Node, ClassicPreset.Node>>;
type AreaExtra = AngularArea2D<Schemes>;

const socket = new ClassicPreset.Socket('socket');

@Injectable()
export class EditorCreatorService {

  async createEditor(container: HTMLElement, injector: Injector) {
    const editor = new NodeEditor<Schemes>();
    const area = new AreaPlugin<Schemes, AreaExtra>(container);
    const connection = new ConnectionPlugin<Schemes, AreaExtra>();

    const angularRender = new AngularPlugin<Schemes, AreaExtra>({ injector });

    angularRender.addPreset(
      AngularPresets.classic.setup({
        customize: {
          node() {
            return CustomNodeComponent;
          },
          connection() {
            return CustomConnectionComponent;
          },
          socket() {
            return CustomSocketComponent;
          },
        },
      }),
    );

    connection.addPreset(ConnectionPresets.classic.setup());

    addCustomBackground(area);

    editor.use(area);
    area.use(connection);

    area.use(angularRender);

    const aLabel = 'Custom';
    const bLabel = 'Custom';

    const a = new ClassicPreset.Node(aLabel);
    a.addOutput('a', new ClassicPreset.Output(socket));
    a.addInput('a', new ClassicPreset.Input(socket));
    await editor.addNode(a);

    const b = new ClassicPreset.Node(bLabel);
    b.addOutput('a', new ClassicPreset.Output(socket));
    b.addInput('a', new ClassicPreset.Input(socket));
    await editor.addNode(b);

    await area.translate(a.id, { x: 0, y: 0 });
    await area.translate(b.id, { x: 300, y: 0 });

    await editor.addConnection(new ClassicPreset.Connection(a, 'a', b, 'a'));

    return {
      destroy: () => area.destroy(),
    };
  }

}

Test

import { EditorCreatorService } from './edtitor-creator';
import { VisualWorkflowEditorComponent } from './visual-workflow-editor.component';
import { render, RenderResult } from '@testing-library/angular';

describe('WorkflowEditorComponent', () => {
  let component: RenderResult<VisualWorkflowEditorComponent>;
  let createEditorSype: jest.SpyInstance;
  let editorCreatorServiceMock: Partial<EditorCreatorService>;

  beforeEach(async () => {
    editorCreatorServiceMock = {
      createEditor: jest.fn().mockReturnValue({}),
    };

    component = await render(VisualWorkflowEditorComponent, {
      providers: [
        {
          provide: editorCreatorServiceMock,
        },
      ],
    });
    createEditorSype = jest.spyOn(editorCreatorServiceMock, 'createEditor');
  });

  it('should create', () => {
    expect(createEditorSype).toHaveBeenCalledTimes(1);
  });
});

After mocking the service instead of injecting it in the test, the error for the import still happening from some reason.

Answer 1

As mentioned in on the of the comment the issue was that jest could not resolve the nested package so i have to map the path in the jest.config.js.

moduleNameMapper: {
  '^lodash-es$': 'lodash',
  '^rete-angular-plugin/16$': 'rete-angular-plugin',
  '^@exb/(.*)$': `${libsDir}/$1/src/public-api.ts`
},