As an Angular developer I want to get rid of Karma/Jasmine and use Jest instead so that I can test my application fast and without any pain. Unfortunately, I ran into unexpected problems.
In the last few hours, I went through all those tutorials showing up on top of the SERPs:
Here is what I did in detail:
ng new my-application
.cd my-application
.npm start
(ng serve
) and npm test
(ng test
) to see if everything works - it works.npm install --save-dev jest jest-preset-angular @types/jest
package.json
:{
...
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": ["<rootDir>/src/setupJest.ts"]
}
}
package.json
to the following:"test": "jest",
"test:watch": "jest --watch",
src
create a file setupJest.ts
with the following content:import 'jest-preset-angular';
The problem:
When I run npm test
now, the test suite fails to run with
File not found: <rootDir>/tsconfig.spec.json
I have no idea what I can do about that because all those tutorials from above do not seem to handle this issue.
Please help me!
Thank you in advance!
Why dont you go and try Jest Schematic from brigbug. I have just completed this over the last few days (November 2019) and its worked well. You just simply run the following from within VS Code and the schematic takes care of everything:
ng add @briebug/jest-schematic
It removed most of jasmine but if you run this command it will uninstall pretty much anything jasmine related. I didnt uninstall jasmine-marbles as im in the process of moving to jest-marbles but if there is anyhting not included just append it to the list.
I belive it also missed out removing jasmine from my types in my tsconfig.spec.json file so I updated it to the following:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"module": "commonjs",
"types": ["jest", "node"],
"emitDecoratorMetadata": true,
"allowJs": true
},
"files": ["polyfills.ts"],
"include": ["**/*.spec.ts", "**/*.d.ts"]
}
I also had to update the globals section of the newly inserted jest section within package.json and changed the tsConfig value adding in '/src/ **/src/**tsconfig.spec.json as the generated one didnt point to my /src directory.
"globals": {
"ts-jest": {
"tsConfig": "<rootDir>/src/tsconfig.spec.json",
"stringifyContentPathRegex": "\\.html$",
"astTransformers": [
"jest-preset-angular/build/InlineFilesTransformer",
"jest-preset-angular/build/StripStylesTransformer"
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With