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