Angular 7 & Jest & Babel Integration over Jasmine/Karma - AngularSnapshotSerializer.js in the snapshotSerializers option was not found

Question

Steps to integrate of Jest & Babel with Angular 7+:

1. Run the following commands to install:

   # Remove Jesmin/Karma
   npm remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
   
   npm uninstall jasmine @types/jasmine
   
   rm ./karma.conf.js ./src/test.ts
   
   # Install jest    
   npm install --save [email protected] @angular-builders/jest@7 @types/jest@24 jest-preset-angular@8 
   
   # Install babel
   npm install --save-dev babel-jest babel-polyfill
   npm install --save @babel/core @babel/preset-env @babel/preset-flow @babel/preset-typescript    
   

2. On package.json, added the following code:

   "scripts": {
     ...
     ...
     "test": "ng test",
     "test:watch": "jest --watch",
     ...
     ...
   }
   ...
   ...   
   "jest": {
     "preset": "jest-preset-angular",
     "setupFilesAfterEnv": [
       "<rootDir>/setupJest.ts"
     ]
   }
   

3. Also, updated the following on the angular.json:

   ...
   ... 
   "test": {
      "builder": "@angular-devkit/build-angular:karma",
   ...
   ...
   

   Replace with:

   ...
   ... 
   "test": {
      "builder": "@angular-builders/jest:run",
   ...
   ...
   

4. Create the <root>/setupJest.ts with below content:

   import 'jest-preset-angular';   
   

5. Create the <root>/babel.config.js with below content:

   module.exports = function(api) {
   
       const presets = [
           '@babel/preset-typescript',
            [
               "@babel/preset-env", {
                   "targets": {
                       "node": "current"
                   }
               }
           ],
           '@babel/preset-flow'
       ];
   
       return {
           presets,
       };
   };
   

6. And, finally tried running the ng-test from a terminal, however, I was stuck with the following error (see picture below):

Answer 1

7. Eventually, managed to fix the issue by adding the file <root>/src/jest.config.js with below content:

   module.exports = {
       "transform": {
           "^.+\\.(ts|js|html)$": "ts-jest",
           "^.+\\.[t|j]sx?$": "babel-jest"
       },
       moduleFileExtensions: ['ts', 'html', 'js', 'json'],
       moduleNameMapper: {
           '^src/(.*)$': '<rootDir>/src/$1',
           '^app/(.*)$': '<rootDir>/src/app/$1',
           '^assets/(.*)$': '<rootDir>/src/assets/$1',
           '^environments/(.*)$': '<rootDir>/src/environments/$1',
       },
       transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
       snapshotSerializers: [
           'jest-preset-angular/build/AngularSnapshotSerializer.js',
           'jest-preset-angular/build/HTMLCommentSerializer.js',
       ],
   };
   

Thereafter, ran ng test again and can see the test running thru.

I hope it helps!