Angular 5：如何在Jest测试中引入jQuery解决$未定义问题

这个问题我在Angular+Jest项目里碰到过好多次，核心原因就是Jest的测试沙箱环境没有加载jQuery和semantic-ui-calendar这些第三方依赖，导致组件初始化调用CalendarService时抛出ReferenceError: $ is not defined。下面给你几个可行的解决方案，按推荐程度排序：

我们测试组件的核心目标是验证组件自身的逻辑，而非第三方日历插件的功能。所以最合理的方式是把CalendarService完全Mock掉，不让它执行依赖jQuery的真实代码。

步骤如下：

1. 在search.component.spec.ts顶部，用Jest的jest.mock工具模拟CalendarService：

// 模拟整个CalendarService类，替换init方法为空实现
jest.mock('./calendar.service.ts', () => ({
  CalendarService: jest.fn().mockImplementation(() => ({
    init: jest.fn()
  }))
}));

2. 你还可以在测试用例里验证组件是否正确调用了init方法：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchComponent } from './search.component';
import { CalendarService } from './calendar.service';

describe('SearchComponent', () => {
  let component: SearchComponent;
  let fixture: ComponentFixture<SearchComponent>;
  let calendarService: jest.Mocked<CalendarService>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SearchComponent],
      providers: [CalendarService]
    }).compileComponents();

    fixture = TestBed.createComponent(SearchComponent);
    component = fixture.componentInstance;
    // 获取Mock后的Service实例
    calendarService = TestBed.inject(CalendarService) as jest.Mocked<CalendarService>;
    fixture.detectChanges();
  });

  it('should trigger calendarService.init during component initialization', () => {
    expect(calendarService.init).toHaveBeenCalled();
  });
});

这个方案的优势是完全隔离第三方依赖，测试速度更快，也不会因为第三方库的更新影响组件测试结果。

如果你确实需要测试CalendarService与第三方插件的交互逻辑（比如验证日历配置是否正确），可以在Jest环境中手动加载这些依赖：

1. 先确保已安装相关依赖包：

npm install jquery semantic-ui-calendar --save-dev

2. 创建Jest全局配置文件jest.setup.ts，内容如下：

import * as $ from 'jquery';
import 'semantic-ui-calendar';

// 将$挂载到全局对象，避免第三方库找不到window.$
(global as any).$ = $;
(global as any).jQuery = $;

3. 修改jest.config.ts（或angular.json中的Jest配置节点），指定全局setup文件：

export default {
  // 其他原有配置...
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts']
};

这样所有测试文件都会自动加载jQuery，无需在每个测试文件中重复导入。

如果不想修改测试代码，也可以在Service中做环境兼容，但这种方式会把测试逻辑混入生产代码，不够干净：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CalendarService {
  init() {
    // Jest会自动将NODE_ENV设置为test，以此判断是否跳过jQuery逻辑
    if (process.env.NODE_ENV !== 'test') {
      // 原有jQuery初始化代码
      $(myElement).calendar(settings);
    }
  }
}

内容的提问来源于stack exchange，提问作者j.2bb