Angular 5：如何在 Jest 测试中导入 jQuery？

Posted 2023-03-08

【中文标题】Angular 5：如何在 Jest 测试中导入 jQuery？

【英文标题】：Angular 5 : How to import jQuery in Jest test?

【发布时间】：2018-07-25 06:21:57

【问题描述】：

我有一个使用 CalendarService 的角度组件。 当组件初始化时，我调用一个“calendarService.init()”方法。

这个CalendarService设置了一个semantic-ui-calendar（基于jQuery）的配置，代码如“$(myElement).calendar(settings);”。

当我用 Jest 测试我的组件时，组件的初始化有一个错误：“ReferenceError: $ is not defined”。

我该如何解决？

搜索.component.spec.ts：

describe('SearchComponent', () => 

  let fixture: ComponentFixture<SearchComponent>;
  let component: SearchComponent;
  let element: DebugElement;

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      imports: [
        AppModule
      ],
      providers: [
         provide: APP_BASE_HREF, useValue : '/search' ,
        CalendarService
      ]
    );

    fixture = TestBed.createComponent(SearchComponent);

    let calendarService = TestBed.get(CalendarService);

    component = fixture.componentInstance;
    element = fixture.debugElement;

    fixture.detectChanges();
  ));
);

search.component.ts ：

@Component(
  selector: 'afo-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.less']
)
export class SearchComponent implements OnInit, AfterViewInit 

  constructor(private calendarService: CalendarService)  

  ngOnInit() 
  

  ngAfterViewInit() 
    this.calendarService.init();
  

calendar.service.ts：

@Injectable()
export class CalendarService 

  constructor() 
  

  init() 
    $('.ui.calendar.field').calendar();
  

【参考方案1】：

我找到了解决方案：

我需要在 setupJest.ts 中添加以下行：

import * as $ from 'jquery';
Object.defineProperty(window, '$', value: $);
Object.defineProperty(global, '$', value: $);
Object.defineProperty(global, 'jQuery', value: $);

一开始，我尝试了这个解决方案：

import $ from 'jquery';
window.$ = $;
global.$ = global.jQuery = $;

但是 global.xxx 和 window.xxx 是未知的。

见：

https://github.com/thymikee/jest-preset-angular#allow-vendor-libraries-like-jquery-etc

https://github.com/facebook/jest/issues/708

【讨论】：

OMFG 你太棒了！！如果可以的话，我会把这个答案贴在整个网站上……得分更高的答案都没有奏效。顺便说一句，如果其他人有问题，我发现 Object.defineProperty(window, '$', value: $);引起了问题，我可以跳过它。

但我发现我需要 import $ from 'jquery';而不是 import * as $ from 'jquery';在某些情况下，我需要使用 jsdom 环境。

【参考方案2】：

你导入 jquery 了吗？

declare var jquery:any;   // not required
declare var $ :any;   // not required

【讨论】：

是的，但我终于找到了解决方案。看我的下一个答案；）