How do I set up Angular with Jest in October 2019?

user_11662712 0
Viewed 4117

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:

  1. Create a new Angular application using ng new my-application.
  2. Change directory: cd my-application.
  3. Run npm start (ng serve) and npm test (ng test) to see if everything works - it works.
  4. Install Jest using npm install --save-dev jest jest-preset-angular @types/jest
  5. Add this to package.json:
{
  ...
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": ["<rootDir>/src/setupJest.ts"]
  }
}
  1. Change the npm scripts in package.json to the following:
"test": "jest",
"test:watch": "jest --watch",
  1. Into the folder 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!

angular jestjs typescript unit-testing
1 Answers

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"
    ]
  }
user_1092880
Related