Jasmine/Karma测试：如何模拟window对象上的外部库属性

在现代javascript应用开发中，尤其是在构建sdk或与遗留系统集成时，经常会遇到需要与全局window对象上定义的外部库进行交互的情况。例如，一个sdk可能通过window.ats.retrieveenvelope()这样的方式调用外部服务。然而，在进行单元测试时，直接依赖这些外部库会引入不可控的外部因素，导致测试结果不稳定、运行缓慢，甚至无法在无头环境中运行。因此，有效地模拟（mock）这些全局依赖变得至关重要。

理解模拟全局属性的挑战

在Jasmine等测试框架中，我们通常使用spyOn来模拟对象上的方法。然而，当尝试模拟window对象上的属性时，直接应用spyOn或Object.defineProperty可能会遇到一些挑战：

1. spyOn(window.ats, 'retrieveEnvelope'): 这种方式适用于ats本身是一个可控的对象，并且retrieveEnvelope是其方法。但如果window.ats本身不存在，或者ats属性在window上是以某种特殊方式（例如只读或不可配置）定义的，spyOn可能会失败。
2. spyOn(window, 'ats'): spyOn通常用于模拟对象的方法，而不是整个属性。尝试对window对象本身的一个属性进行spyOn，通常无法达到模拟该属性内部方法的效果。
3. Object.defineProperty(window, 'ats', ...): 这种方法理论上可以重新定义window上的属性。但是，如果window.ats已经被定义为不可配置（configurable: false），或者在某些浏览器环境中，直接修改window对象的内置属性会受到限制，那么这种方法也会失败。
4. 创建局部模拟对象: 尽管可以创建一个局部模拟对象，如const windowStud = { ats: { ... } } as Window & typeof globalThis;，但它并不能真正替换全局的window对象，因此在测试代码中实际调用的仍然是真实的window对象。

这些方法失败的根本原因在于，window对象是一个特殊的全局对象，其属性的定义和行为可能受到浏览器环境的限制，并且直接对其进行spyOn或defineProperty操作可能不符合其预期。

健壮的解决方案：利用 beforeEach 和 afterEach

最直接且有效的方法是在每个测试运行前，手动将模拟的外部库属性直接赋值到window对象上，并在测试运行后进行清理，以确保测试之间的隔离性。Jasmine和Karma提供了beforeEach和afterEach钩子来完成这一任务。

AGI-Eval评测社区

AI大模型评测社区

63

查看详情

核心思路： 在beforeEach块中，我们直接在window对象上创建或覆盖ats属性及其方法。 在afterEach块中，我们将window.ats重置为undefined或其原始值（如果需要），以避免对后续测试产生副作用。

// 假设这是你的业务代码，它依赖于 window.ats
class MySDK {
  private getFromATS(): string {
    // 这里的 window.ats 在测试环境中将被我们的模拟对象替代
    return window.ats.retrieveEnvelope(function (envelope: string) {
      console.log('Located ATS.js');
      return JSON.parse(envelope).envelope;
    });
  }

  public fetchData(): string {
    return this.getFromATS();
  }
}

// 单元测试文件 (e.g., my-sdk.spec.ts)
describe('MySDK', () => {
  let sdk: MySDK;
  let originalWindowAts: any; // 用于存储原始的 window.ats，如果需要恢复

  // 在每个测试用例运行之前执行
  beforeEach(() => {
    // 可选：保存原始的 window.ats，以便在 afterEach 中恢复
    // originalWindowAts = window.ats;

    // 直接在 window 对象上定义模拟的 ats 属性
    // 这里的类型断言 `any` 是为了避免 TypeScript 对 `window` 对象的严格类型检查
    (window as any).ats = {
      retrieveEnvelope: function (callback: (envelope: string) => any) {
        // 模拟外部库的返回值，这里直接调用回调函数并传入模拟数据
        const mockEnvelope = '{"envelope":"asdfasdfasdf"}';
        return callback(mockEnvelope);
      },
    };

    sdk = new MySDK();
  });

  // 在每个测试用例运行之后执行
  afterEach(() => {
    // 清理模拟的 ats 属性，确保测试之间的隔离性
    // 将其设置为 undefined 可以有效移除该属性，避免影响后续测试
    (window as any).ats = undefined;

    // 如果之前保存了原始值，也可以选择恢复
    // window.ats = originalWindowAts;
  });

  it('should retrieve data from mocked ATS library', () => {
    // 验证 getFromATS 方法是否正确调用了模拟的 retrieveEnvelope
    // 注意：这里我们不是 spyOn retrieveEnvelope，而是直接替换了它
    // 所以我们测试的是 MySDK 的行为，而不是 retrieveEnvelope 本身
    const result = sdk.fetchData();
    expect(result).toBe('asdfasdfasdf'); // 验证解析后的 envelope 内容
  });

  // 可以添加更多测试用例，它们都会使用这个模拟的 window.ats
  it('should handle different mock data if needed', () => {
    // 在这个测试用例中，如果需要不同的模拟数据，可以在这里再次覆盖 window.ats
    (window as any).ats = {
      retrieveEnvelope: function (callback: (envelope: string) => any) {
        return callback('{"envelope":"another_mock_data"}');
      },
    };
    const result = sdk.fetchData();
    expect(result).toBe('another_mock_data');
  });
});

注意事项与最佳实践

• 测试隔离性: beforeEach和afterEach的组合是确保测试隔离性的关键。beforeEach为每个测试用例提供一个干净的模拟环境，而afterEach则负责清理，防止模拟数据泄露到其他测试用例中。
• 类型安全: 在TypeScript项目中，直接修改window对象可能导致类型检查错误。使用类型断言(window as any).ats可以绕过编译器的检查，但请确保你清楚自己在做什么。对于更复杂的场景，可以考虑声明一个全局类型定义文件（d.ts）来扩展Window接口。
• 恢复原始值: 在某些情况下，如果window.ats在测试前已经存在且对其他非测试代码有影响，你可能需要在afterEach中将其恢复到原始值，而不是简单地设置为undefined。这可以通过在beforeEach中保存原始值来实现。
• 依赖注入: 尽管本教程旨在避免修改核心业务代码，但从长远来看，采用依赖注入（Dependency Injection, DI）是管理外部依赖的更佳实践。通过DI，你可以将外部库作为参数传递给你的类或函数，而不是直接从全局window对象获取。这样，在测试时，你只需传入一个模拟的依赖项，而无需触及全局window对象。这会使代码更易于测试、维护和重构。
• 测试粒度: 这种模拟方式适用于测试那些直接与window对象交互的组件。如果你的组件通过更抽象的服务层与外部库交互，那么你应该在服务层进行模拟，而不是直接模拟window。

总结

在Jasmine和Karma中模拟window对象上的外部库属性，最可靠的方法是利用beforeEach和afterEach钩子。通过在测试前直接设置模拟属性，并在测试后进行清理，可以有效地隔离测试环境，确保单元测试的准确性和可重复性。虽然存在其他模拟尝试，但直接的属性赋值和清理策略因其简单和有效性而成为首选。在设计应用程序时，考虑依赖注入模式可以从根本上简化测试和依赖管理。

以上就是Jasmine/Karma测试：如何模拟window对象上的外部库属性的详细内容，更多请关注php中文网其它相关文章！