Testing an Angular shared library with Jest

I have an angular library with the following structure

projects/
|..... app/
|..... src/
|..... app/
|..... app.component.spec.ts
|..... app.component.ts
|..... app.module.ts
|..... lib/
|..... sso/
|...... index.ts
|...... ng-package.json
|...... ...
|...... sso.service.ts
|...... ss.module.ts
|..... ui/
|...... menu/
|...... menu.component.ts
|...... menu.service.ts
|...... menu.module.ts
|...... index.ts
|...... ng-package.json
|..... ng-package.json
|..... package.json
|..... jest.config.ts
|..... package.json


I want to test my app.component

// app.component.ts

import {SSOService} from "my-lib/sso";

@Component({
selector: 'app-root',
template: `
<my-menu>
<router-outlet></router-outlet>
</my-menu>
`,
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(protected ssoService: SSOService) { }
}



Here my current test

// app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import {SSOService} from "my-lib/sso";
import {MenuComponent} from "my-lib/ui";

describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent, MenuComponent
],
providers: [
{
provide: SSOService,
useValue: {
setRoles: jest.fn()
}
}
]
}).compileComponents();
});

it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
});



I had to mock my sso_service even it's in the same project! But still have the same issue with MenuComponent

● Test suite failed to run

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

289 | }] });
290 |
> 291 | registerLocaleData(FR);
| ^
292 | /**
293 | * Custom date adapter for Angular Material.
294 | *

at registerLocaleData (node_modules/@angular/core/fesm2022/core.mjs:22410:25)
at registerLocaleData (node_modules/@angular/common/fesm2022/common.mjs:2562:12)
at Object.<anonymous> (dist/lib/fesm2022/my-lib-ui.mjs:291:1)
at Object.<anonymous> (projects/app/src/app/app.component.spec.ts:5:1)


I don't want to mock the component too, is there an issue with library or the Jest Config maybe ?

PS: the tests works well with karma before moving to jest

Please find below the different config files
​

// lib/ui/index.ts
import { CommonMenuService } from './menu/menu.service';

export * from './menu/menu.component';
export * from './menu/menu.module';
export * from './menu/menu.service';


// lib/ui/ng-package.json
{
"lib": {
"entryFile": "index.ts"
}
}


// lib/ui/pacakge.json
{
"name": "my-lib",
"version": "2.5.2",
"peerDependencies": {
"@angular/cdk": "^17.0.0",
"@angular/common": "^17.0.1",
"@angular/core": "^17.0.1",
"@angular/material": "^17.0.0",
"@awesome-cordova-plugins/in-app-browser": "^6.3.0",
"@capacitor/device": "^5.0.6",
"angular-oauth2-oidc": "^15.0.1",
"jwt-decode": "^4.0.0"
},
"dependencies": {
"tslib": "^2.6.2"
},
"sideEffects": false,
"exports": {
".": {
"sass": "./styles/_index.scss"
}
}
}



This is my Jest.config

// jest.config.ts

import type { Config } from 'jest';

const config: Config = {
clearMocks: true,
collectCoverage: true,
coverageDirectory: 'coverage',
coverageProvider: 'v8',
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};

export default config;



and my tsconfig.json looks like this

// tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"paths": {
"my-lib/*": ["projects/lib/*"],
"my-lib": ["projects/lib"]
},
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": ["ES2022", "dom"]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

Continue reading...