Karma/Jasmine failure: "ReferenceError: $ is not defined" in Angular 11-CodePudding

This failure is only in testing mode with "ng test" not with "ng build" or "ng serve" in Angular 11 application. I tried all the available solutions but no one is working for me.

component.ts related code of jquery

declare var $: any;

angular.json to include scripts and styles

 "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/angular-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
          
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/assets/css/jquery-ui.min.css",
              "src/assets/css/style.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js",
              "src/assets/js/jquery-ui.min.js",
              "src/assets/js/sidebarResponsive.js"
            ]

CodePudding user response：

In angular.json, add jquery in "test", not in "build":

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
  ...
  "scripts": ["node_modules/jquery/dist/jquery.js"]
}