ReferenceError:$未定义 - Jasmine

时间:2017-04-27 12:47:09

标签: javascript jquery ajax unit-testing jasmine

嘿伙计们我之前从未使用过Jasmine,但是我需要这个我正在研究的小项目。无法弄清楚,任何帮助将不胜感激。我已经查看了各种教程,并对这个问题进行了研究,但对此我不熟悉也无济于事。

JS源文件

> $(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!!!!") }
> 
> });

这是我的测试代码:

//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
        });

    });

});

3 个答案:

答案 0 :(得分:2)

你需要包含jQuery。

在这种情况下,$实际上是一个函数(来自jQuery库),并且因为没有加载jQuery,所以你得到的错误是没有定义这个函数。

以与包含Jasmine库相同的方式包含jQuery。一种方法是使用CDN:

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

答案 1 :(得分:2)

我在Angular 7项目中遇到了同样的问题。 以下步骤解决了该问题。

在spec.ts文件顶部添加以下代码

    declare var $: any;

一个Karma插件-jQuery框架的适配器。

    npm install karma-jquery --save-dev

在karma.conf.js文件的“插件”数组中添加“ karma-jquery

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

    plugins: ['karma-jquery']

在同一文件的frameworks数组中添加jquery的版本。

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

答案 2 :(得分:0)

我正在使用这种方法,很简单!

我已将jquery的路径放入文件karma.conf.ts中。

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
  });
};

基于https://stackoverflow.com/a/19073586/231391