ReferenceError: $ 未定义 - Jasmine答案

【问题标题】：ReferenceError: $ is not defined - JasmineReferenceError: $ 未定义 - Jasmine
【发布时间】：2017-09-25 06:40:05
【问题描述】：

我以前从未使用过 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
        });
    
    });
   
});

【问题讨论】：

标签： javascript jquery ajax unit-testing jasmine

【解决方案1】：

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

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

    declare var $: any;

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

    npm install karma-jquery --save-dev

在 karma.conf.js 文件的 'plugins' 数组中添加 'karma-jquery'

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

    plugins: ['karma-jquery']

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

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

【讨论】：

这是合适的并且优于 Angular 测试的公认答案。

【解决方案2】：

你需要包含 jQuery。

在这种情况下，$ 实际上是一个函数（来自 jQuery 库），并且由于尚未加载 jQuery，您会收到未定义此函数的错误。

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

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

【讨论】：

【解决方案3】：

我用的是这个方法，很简单！

到文件 karma.conf.ts 我已经把 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
  });
};

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

【讨论】：