angularts-jestangular-libraryangular-unit-test

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


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 ?!


Solution

  • 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();
      });
    });