I am currently working within a Typescript Monorepo and I wish to integrate an Angular 8 frontend along with Jest testing into the Monorepo. However, I am facing some challenges.
The tools I am using are:
Angular CLI: 8.3.5
My Approach
I plan to use this repository as my starting point!
1. Setting Up Angular Application
To create the Angular application, I executed the following command in <root>/services:
ng new frontend
After creating the Angular application, I was able to successfully run ng test with positive results:
https://i.sstatic.net/ZBFrJ.png
Everything seemed to be functioning correctly.
2. Incorporating Jest
I opted to utilize https://github.com/briebug/jest-schematic for easily integrating Jest with my Angular application.
yarn global add @briebug/jest-schematic
ng add @briebug/jest-schematic
This led to certain modifications taking place:
https://i.sstatic.net/WnAXN.png
However, when executing jest, it resulted in the given error:
$ jest
FAIL src/app/app.component.spec.ts
● Test suite failed to run
File not found: <rootDir>/src/tsconfig.spec.json (resolved as: /home/flo/Desktop/stackoverflow-monorepo-angular-jest/services/frontend/src/tsconfig.spec.json)
at ConfigSet.resolvePath (node_modules/ts-jest/dist/config/config-set.js:712:19)
at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:202:67)
at ConfigSet.tsJest (node_modules/ts-jest/dist/util/memoize.js:43:24)
at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:297:41)
at ConfigSet.versions (node_modules/ts-jest/dist/util/memoize.js:43:24)
at ConfigSet.get (node_modules/ts-jest/dist/config/config-set.js:583:32)
at ConfigSet.jsonValue (node_modules/ts-jest/dist/util/memoize.js:43:24)
at ConfigSet.get [as cacheKey] (node_modules/ts-jest/dist/config/config-set.js:598:25)
at TsJestTransformer.getCacheKey (node_modules/ts-jest/dist/ts-jest-transformer.js:126:36)
at ScriptTransformer._getCacheKey (node_modules/@jest/transform/build/ScriptTransformer.js:266:23)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.267s
Ran all test suites.
3. Addressing Errors
Jest was attempting to locate the tsconfig.spec.json file in the incorrect directory. Thankfully, I came across a solution. I needed to modify the jest.config.js:
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
globals: {
'ts-jest': {
tsConfig: '<rootDir>/tsconfig.spec.json',
diagnostics: false,
stringifyContentPathRegex: '\\.html$',
astTransformers: [require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')],
},
},
};
Upon running jest again, it performed as expected:
https://i.sstatic.net/MTXBL.png
4. My Challenge
I have now added the Angular HttClient to my AppComponent:
// app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'frontend';
constructor(private http: HttpClient) {}
}
Furthermore, I included the HttpClientModule in both app.module.ts and in the imports section of app.component.spec.ts.
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
// app.component.spec.ts
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { HttpClientModule, HttpClient } from '@angular/common/http';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule, HttpClientModule],
declarations: [AppComponent],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'frontend'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('frontend');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain('frontend app is running!');
});
});
However, upon running jest, I encountered the following errors:
$ jest
FAIL src/app/app.component.spec.ts
AppComponent
✕ should create the app (449ms)
✕ should have as title 'frontend' (10ms)
✕ should render title (10ms)
● AppComponent › should create the app
Can't resolve all parameters for AppComponent: (?).
at syntaxError (../../../packages/compiler/src/util.ts:100:17)
at CompileMetadataResolver._getDependenciesMetadata (../../../packages/compiler/src/metadata_resolver.ts:957:27)
at CompileMetadataResolver._getTypeMetadata (../../../packages/compiler/src/metadata_resolver.ts:836:20)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (../../../packages/compiler/src/metadata_resolver.ts:377:18)
...
...
...
...
...
Test Suites: 1 failed, 1 total
Tests: 3 failed, 3 total
Snapshots: 0 total
Time: 1.682s, estimated 2s
Ran all test suites.
error Command failed with exit code 1.
While the tests function properly with Jasmine + Karma, there appears to be an issue related to dependency injection while utilizing jest for testing.
You can access the repository here: https://github.com/flolude/stackoverflow-monorepo-angular-jest/commit/9a2d8cac0dfa25a5f6620f38238c3f577b2acb63 to explore it yourself.