Jest unit test issue when importing a Service from Shared Library in Angular

Question

I have the following test suits

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

import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { OrdersComponent } from './orders.component';


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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule, HttpClientTestingModule, MatDialogModule, MatSnackBarModule],
      declarations: [OrdersComponent]
    });
    fixture = TestBed.createComponent(OrdersComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

I'm importing CommonService from my Angular Library my-lib in my OrderComponent

...
import { CommonService } from 'my-lib/ui';

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OrdersComponent implements OnInit, OnDestroy {

I got the following error when running my test

  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'toLowerCase')

    > 16 | import { CommonService } from 'my-lib/ui';
         | ^

 at registerLocaleData (node_modules/@angular/core/fesm2022/core.mjs:20319:25)
      at registerLocaleData (node_modules/@angular/common/fesm2022/common.mjs:2561:12)
      at Object.<anonymous> (node_modules/my-lib/fesm2022/my-lib-ui.mjs:291:1)
      at Object.<anonymous> (src/app/pages/orders/orders.component.ts:16:1)
      at Object.<anonymous> (src/app/pages/orders/orders.component.spec.ts:3:1)

Is there any configuration for Jest to add when using a shared library ? or maybe I've to mock this service ?

It seems to be an internal angular error, maybe I am not exporting the service from the lib in the right way ?!

Answer 1

The only solution I was able to provide for this issue, was by mocking the external services (as show bellow)

Note: I'm using Jest

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

import { OrdersComponent } from './orders.component';
import { CommonService } from 'my-lib/ui';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { OrdersFiltersComponent } from './filters/filters.component';
import { OrdersListComponent } from './list/list.component';

jest.mock('my-lib/ui', () => ({
  CommonService: jest.fn().mockImplementation(() => ({
    setTitle: jest.fn(),
    setSubTitle: jest.fn(),
    showSearchBar: jest.fn(),
  }))
}));
describe('OrdersComponent', () => {
  let component: OrdersComponent;
  let fixture: ComponentFixture<OrdersComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [],
      declarations: [OrdersComponent],
      providers: [
        {
          provide: CommonService,
          useValue: {
            setTitle: jest.fn(),
            setSubTitle: jest.fn(),
            showSearchBar: jest.fn(),
          },
        }
      ],
    });
    fixture = TestBed.createComponent(OrdersComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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