javascript - ReferenceError: $ is not defined - Jasmine - Stack Overflow

admin管理员组

文章数量:1221396

I never used Jasmine before but I'm required for this little project that I'm working on. Can't quite figure it out, any help would be appreciated. I have looked at various tutorials and googeled the problem but being new to this does not help.

JS source file

> $(document).ready(function(){
>    
> 
> $.ajax({ type: 'GET', dataType: "json", url: "db.php/realmadrids", 
> success: showResponse,  error: showError });
> 
> 
> 
>  
> 
> 
> console.debug("error");   function showResponse(responseData){
> 
>   //$("#get1").click(function getPlayers(responseData) { 
>   console.log('Image is clicked');    console.log(responseData);
>     $.each(responseData.realmadrid, function(index, realmadrid){
>       console.log(' is ');
>         $("#playercontentRealMadrid").append("</br><strong> Full Name: </strong>" +realmadrid.PlayerName+ " "+realmadrid.PlayerLastName+"
> </br> <strong>Player Position: </strong>" +realmadrid.PlayerPosition+"
> </br><strong>Player Age: </strong>" +realmadrid.Age+"
> </br><strong>Player Height: </strong>" +realmadrid.Height+"
> </br><strong>Player Weight: </strong>" +realmadrid.Weight+"
> </br><strong>Team Name: </strong>" +realmadrid.TeamName+"</br>");
>     
>         console.log('Data should output'); // });   });
> 
> console.log(responseData);
>     }
>     console.debug("hello");
> 
> function showError(){ alert("Sorry, but something went wrong. Fix
> it!!!!") }
> 
> });

Here is my test code:

//Test Suite
describe("Spy on my own AJAX call", function(){
    
    it("should make AJAX request with successful setting", function() {
    
        spyOn($, "ajax");
        
        expect($.ajax).toHaveBeenCalledWith({
            url:'db.php/realmadrids',
            type:'GET',
            dataType: "json",
            sucess: showResponse,
            error: showError
        });
    
    });
   
});

I never used Jasmine before but I'm required for this little project that I'm working on. Can't quite figure it out, any help would be appreciated. I have looked at various tutorials and googeled the problem but being new to this does not help.

JS source file

> $(document).ready(function(){
>    
> 
> $.ajax({ type: 'GET', dataType: "json", url: "db.php/realmadrids", 
> success: showResponse,  error: showError });
> 
> 
> 
>  
> 
> 
> console.debug("error");   function showResponse(responseData){
> 
>   //$("#get1").click(function getPlayers(responseData) { 
>   console.log('Image is clicked');    console.log(responseData);
>     $.each(responseData.realmadrid, function(index, realmadrid){
>       console.log(' is ');
>         $("#playercontentRealMadrid").append("</br><strong> Full Name: </strong>" +realmadrid.PlayerName+ " "+realmadrid.PlayerLastName+"
> </br> <strong>Player Position: </strong>" +realmadrid.PlayerPosition+"
> </br><strong>Player Age: </strong>" +realmadrid.Age+"
> </br><strong>Player Height: </strong>" +realmadrid.Height+"
> </br><strong>Player Weight: </strong>" +realmadrid.Weight+"
> </br><strong>Team Name: </strong>" +realmadrid.TeamName+"</br>");
>     
>         console.log('Data should output'); // });   });
> 
> console.log(responseData);
>     }
>     console.debug("hello");
> 
> function showError(){ alert("Sorry, but something went wrong. Fix
> it!!!!") }
> 
> });

Here is my test code:

//Test Suite
describe("Spy on my own AJAX call", function(){
    
    it("should make AJAX request with successful setting", function() {
    
        spyOn($, "ajax");
        
        expect($.ajax).toHaveBeenCalledWith({
            url:'db.php/realmadrids',
            type:'GET',
            dataType: "json",
            sucess: showResponse,
            error: showError
        });
    
    });
   
});

• javascript
• jquery
• ajax
• unit-testing
• jasmine

Share Improve this question Follow edited Nov 11, 2020 at 15:06 peterh 1 asked Apr 27, 2017 at 12:47 Kasia WichrowskaKasia Wichrowska 32122 gold badges66 silver badges1717 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 10

I have the same issue in my Angular 7 project. The below steps solved the issue.

add below code on top of the spec.ts file

    declare var $: any;

A Karma plugin - adapter for jQuery framework.

    npm install karma-jquery --save-dev

Add the 'karma-jquery' in 'plugins' array in the karma.conf.js file

    module.exports = function(config) {
    config.set({

    plugins: ['karma-jquery']

Add version of the jquery in frameworks array in the same file.

    frameworks: ['jasmine', '@angular-devkit/build-angular','jquery-3.2.1']

You need to include jQuery.

In this case $ is actually a function (from the jQuery library) and because jQuery hasn't been loaded your getting the error that this function is not defined.

Include jQuery in the same manner that you are including the Jasmine library. One approach would be to use the CDN:

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

I'm using this approach, it's simple!

Into file karma.conf.ts I've put the path of jquery.

module.exports = function(config) {
  config.set({

    // list of files / patterns to load in the browser
    files: [
      './node_modules/jquery/dist/jquery.min.js',
      //..rest files      
    ],

    //rest karma options
  });
};

Based on https://stackoverflow.com/a/19073586/231391

For me, adding the script to karma.conf.ts file didn't make any difference, but updating the angular.json file in the "test" section, to include the jQuery script, made it work:

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.spec.json",
    "karmaConfig": "src/karma.conf.js",
    "styles": ["src/styles.scss"],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js"  // <-- here
    ],
    "assets": ["src/assets"],
    "codeCoverage": true
  }
},

Thanks to https://stackoverflow.com/a/55261096/1562369

本文标签： javascriptReferenceErroris not definedJasmineStack Overflow