Angular中使用Jest测试调用URL API的组件问题排查

问题根源 #

你的业务代码是直接通过new URL('...')调用URL构造函数创建实例，而非依赖注入已有的URL实例。之前的测试代码只是提供了一个URL实例作为依赖，但完全没拦截new URL()的调用，测试时依然会执行原生URL构造函数，而测试环境（如Karma/Jest）可能对浏览器原生URL API支持不完全，或者传入的参数不符合构造函数要求，导致报错。

解决方案 #

针对Angular（Karma/Jasmine）环境 #

需要mock URL构造函数，让它返回带有模拟searchParams的对象，具体代码如下：

describe('MyService', () => {
  let mockSearchParams: jasmine.SpyObj<URLSearchParams>;
  let mockUrlConstructor: jasmine.Spy;

  beforeEach(() => {
    // 模拟searchParams对象，实现set方法的spy
    mockSearchParams = jasmine.createSpyObj('URLSearchParams', ['set']);
    // 模拟URL构造函数，调用时返回包含searchParams的对象
    mockUrlConstructor = jasmine.createSpy('URL').and.returnValue({
      searchParams: mockSearchParams
    });

    TestBed.configureTestingModule({
      providers: [
        // 用mock的构造函数替换原生URL
        { provide: URL, useValue: mockUrlConstructor }
      ]
    });
  });

  it('should set action parameter correctly', () => {
    const service = TestBed.inject(MyService);
    // 调用你要测试的业务方法，传入测试用的action值
    service.targetMethod('test-action');

    // 验证URL构造函数的调用参数是否符合预期
    expect(mockUrlConstructor).toHaveBeenCalledWith('...');
    // 验证searchParams.set是否被正确调用
    expect(mockSearchParams.set).toHaveBeenCalledWith('action', 'test-action');
  });
});

针对Jest环境 #

可以通过全局mock覆盖原生URL构造函数：

describe('MyService', () => {
  let mockSearchParams: { set: jest.Mock };

  beforeEach(() => {
    // 创建模拟的searchParams，set方法用jest mock函数
    mockSearchParams = { set: jest.fn() };
    // 全局替换URL构造函数
    global.URL = jest.fn(() => ({
      searchParams: mockSearchParams
    })) as jest.Mock;
  });

  afterEach(() => {
    // 清空mock调用记录，避免用例间污染
    jest.clearAllMocks();
  });

  it('should set action param in URL', () => {
    const service = new MyService();
    service.targetMethod('test-action');

    expect(global.URL).toHaveBeenCalledWith('...');
    expect(mockSearchParams.set).toHaveBeenCalledWith('action', 'test-action');
  });
});

关键要点 #

• 区分依赖注入实例和直接调用构造函数两种场景：你的代码属于后者，必须mock构造函数而非提供实例
• 必须模拟searchParams对象及其用到的方法（这里是set），确保业务代码调用时不会抛出错误
• 测试时要验证构造函数和方法的调用参数，确保业务逻辑符合预期

内容的提问来源于stack exchange，提问作者Muhammad Rehan