Jest-preset-angular: Usage with Angular library

[ArielGueta]

Thanks for the great library. I'm wondering if there is an option or a guide for applying jest testing with this library for a library created with the Angular CLI?

Thanks.

[wtho]

It is almost the same as with an Angular app. Have a look at the app in the example folder in this repository.

I assume you generated an angular app, and inside this app folder you created a library using ng generate library, which will then reside inside the projects folder.

It is still a personal choice if you want to test your library with your app or test it standalone. In my example I assume the latter, as the former is basically the same configuration as the app in example.

1. Remove jasmine and karma from your dependencies and add jest and jest-preset-angular
2. Copy /src/tsconfig.spec.ts, /src/setupJest.ts and /src/jestGlobalMocks.ts to your /projects/<lib-name>/src/ folder -- please note you might have to adjust the path to the base tsconfig.json if you want to use the one in the root of your project.
3. Set the test command in your package.json to jest
4. Configure jest (e. g. in your package.json):
   { ... "devDependencies": { ... }, "jest": { "preset": "jest-preset-angular", "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts" } }
5. Run npm test

If you want more configuration, have a look at our documentation.

[thymikee]

Thanks @ahnpnl

[charliekassel]

Sorry to hijack this issue but I have a question regarding using this with angular libraries.
The config seems to be looking for the spec tsconfig file in src/tsconfig.spec.json however each library created has it's own tsconfig.spec.json file in its respective dir.
So running tests at project root level produces this error:

Unable to find tsconfig file given "src/tsconfig.spec.json"

Is there a way to configure the path of tsconfig?

[ahnpnl]

Hi @charliekassel, your question is more likely related to config of ts-jest to use in the case of Angular libraries as well as monorepo. Please check the answer from @wtho above and the explanation in ts-jest at https://github.com/kulshekhar/ts-jest/issues/899

Regarding to tsconfig path, it is always possible to override the default path which is set in this preset. This preset used both ts-jest and jest configuration which you can find from their documentation.