'Angular 12 setting up Unit test with JEST when running no tests found

Edit: My Jest was not setup on my Angular project properly. so if you are experience this then your Jest was not setup properly, if anyone has a good guide on setting up jest please provide a link thanks

Trying to setup unit tests for an Angular 12 project with Jest unit testing framework

I have followed a handful of tutorials and I am currently stuck. I am able to run the test pack via the command line with using jest, however no tests are found. I get the following message from the command line.

enter image description here

From the blogs I found on how to set Jest up have suggested that I place part of my jest config in the package.json file

  "name": "ramp-weather",
  "version": "0.0.0",
  "scripts": {
    "postinstall": "ngcc",
    "ng": "ng",
    "start": "webpack serve ",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "jest --runInBand --coverage color"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "material-design-icons": "^3.0.1",
    "rxjs": "6.6.0",
    "ts-jest": "^27.0.7",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.8",
    "@angular/cli": "~12.2.8",
    "@angular/compiler-cli": "~12.2.0",
    "@babel/preset-env": "^7.16.0",
    "@babel/preset-typescript": "^7.16.0",
    "@types/jest": "^27.0.2",
    "@types/node": "^12.11.1",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^6.5.1",
    "exports-loader": "^3.0.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "image-webpack-loader": "^8.0.1",
    "jest": "^27.3.1",
    "jest-preset-angular": "^10.1.0",
    "null-loader": "^4.0.1",
    "raw-loader": "^4.0.2",
    "source-map-loader": "^1.0.0",
    "style-loader": "^3.3.1",
    "to-string-loader": "^1.2.0",
    "ts-loader": "^9.2.6",
    "ts-node": "^10.4.0",
    "typescript": "4.2.3",
    "webpack": "^5.63.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.3.1"
  },
  "jest": {
    "preset": "ts-jest",
    "setupFilesAfterEnv": [
      "<rootDir>/src/setup-jest.ts"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/dist/"
    ],
    "moduleDirectories": [ "node_modules", "src" ],
    "globals": {
      "ts-jest": {
        "tsConfig": "<rootDir>/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$"
      }
    }
  }
}

My Jest setup only has the following import //setup-jest file import 'jest-preset-angular/setup-jest';

Below is my configts.json file

  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist/out-tsc",
    "rootDir": ".",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": ["es2018", "dom"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "allowSyntheticDefaultImports": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  },
  "include": ["src/**/*"]
}

I have been trying a number of combinations to get the tests to be picked up. but no luck. Any suggestions would be amazingly helpful. I thought it had to do with my baseUrl and rootDir as seen in the tsconfig.json file above, however I haven't been successful with my attempts.

angularunit-testinginstallationjestjsangular12


Solution 1:[1]

I faced the same problem, but fixed it by setting up jest using this schematic. https://github.com/briebug/jest-schematic#readme

Or manually configure the same by referring this https://github.com/just-jeb/angular-builders/tree/master/packages/jest#readme

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tarun Chopra

Related Questions