Karma/Jasmine 中模拟 window 对象上的外部库

在前端开发中，尤其是在构建 SDK 或集成第三方服务时，我们经常会遇到直接通过 window 对象访问外部库的情况。例如，一个常见的模式是：

// 示例：使用 window.ats 访问外部库
class MySDK {
  private getFromATS(): string {
    return window.ats.retrieveEnvelope(function (envelope: string) {
      console.log('Located ATS.js');
      return JSON.parse(envelope).envelope;
    });
  }
}

在编写单元测试时，直接依赖这些外部库会带来挑战。为了确保测试的独立性和可控性，我们需要模拟 window.ats 这样的全局对象及其方法。

挑战：模拟全局 window 对象上的属性

尝试模拟 window 对象上的外部库时，开发者常会遇到一些问题。以下是一些常见的尝试及其局限性：

1. 使用 spyOn 模拟 window.ats 的方法：

   // Method 1: 尝试对 window.ats.retrieveEnvelope 进行 spyOn
   spyOn(window.ats, 'retrieveEnvelope').and.returnValue(...);

   登录后复制

   这种方法的问题在于，如果 window.ats 在测试运行前尚未定义，spyOn 将会失败，因为它期望目标对象和方法已经存在。

2. 使用 spyOn 模拟 window 上的属性：

   // Method 2: 尝试对 window.ats 进行 spyOn
   spyOn(window, 'ats').and.returnValue(...);

   登录后复制

   spyOn 主要用于监视或替换对象上的方法，而不是直接替换整个属性值。尝试对 window 上的 ats 属性进行 spyOn 通常不会达到预期的效果，因为它不会真正地将 window.ats 替换为一个全新的模拟对象。

3. 尝试重新定义 window 或其属性：

   

   天工大模型

   中国首个对标ChatGPT的双千亿级大语言模型

   115

   查看详情

   // Method 3: 尝试重新定义 window 或使用 Object.defineProperty
   window = Object.create(window); // 无效
   Object.defineProperty(window, 'ats', { value: {...}, writable: true }); // 可能有效，但过于复杂且不推荐

   登录后复制

   直接重新定义 window 对象在浏览器环境中通常是无效或危险的。而 Object.defineProperty 虽然可以用于定义属性，但在测试中直接操作全局对象的方式不够简洁，且可能导致清理困难。

4. 创建局部模拟对象但不应用到全局：

   // Method 4: 创建一个局部模拟对象
   const windowStud = { ats: { retrieveEnvelope: function() {} } } as Window & typeof globalThis;

   登录后复制

   这种方法创建了一个模拟对象，但并没有将其赋值给全局的 window 对象，因此测试代码仍然会访问真实的 window.ats（如果存在）。

有效解决方案：利用 beforeEach 和 afterEach

最直接且有效的方法是利用 Jasmine 的测试生命周期钩子 beforeEach 和 afterEach。在每个测试用例运行之前，我们直接在全局 window 对象上定义模拟的 ats 属性；在每个测试用例运行之后，我们再将其清理，确保测试环境的纯净。

实现步骤

1. 在 beforeEach 中注入模拟对象： 在每个测试用例执行前，将一个包含模拟方法的对象赋值给 window.ats。模拟方法应尽可能地模仿真实方法的行为，例如，如果真实方法接收一个回调函数并调用它，那么模拟方法也应该这样做。

   beforeEach(() => {
     // 设置模拟的 window.ats 对象
     window.ats = {
       retrieveEnvelope: function (callback: (envelope: string) => void) {
         // 模拟真实库的行为，调用回调函数并传入模拟数据
         return callback('{"envelope":"asdfasdfasdf"}');
       },
     };
   });

   登录后复制

   在上述代码中，retrieveEnvelope 方法被模拟，它接收一个回调函数 callback，并立即使用一个预设的 JSON 字符串调用该回调。这样，依赖 window.ats.retrieveEnvelope 的代码就可以在不实际调用外部库的情况下，接收到模拟的数据。

2. 在 afterEach 中清理模拟对象： 在每个测试用例执行后，将 window.ats 重置为 undefined 或其原始值（如果需要）。这对于防止测试之间的副作用至关重要，确保每个测试用例都在一个干净的环境中运行。

   afterEach(() => {
     // 将 window.ats 重置为 undefined，避免影响后续测试
     window.ats = undefined;
   });

   登录后复制

完整示例

// 假设你的代码结构如下
// my-sdk.ts
class MySDK {
  public getEnvelope(): string {
    return window.ats.retrieveEnvelope((envelope: string) => {
      console.log('Located ATS.js');
      return JSON.parse(envelope).envelope;
    });
  }
}

// my-sdk.spec.ts
describe('MySDK', () => {
  let sdk: MySDK;

  beforeEach(() => {
    // 在每个测试用例前，设置模拟的 window.ats
    window.ats = {
      retrieveEnvelope: function (callback: (envelope: string) => void) {
        // 模拟外部库返回的数据
        const mockEnvelopeData = '{"envelope":"mocked_envelope_data"}';
        // 调用回调函数，模拟异步操作或数据返回
        return callback(mockEnvelopeData);
      },
    };
    sdk = new MySDK();
  });

  afterEach(() => {
    // 在每个测试用例后，清理 window.ats
    window.ats = undefined;
  });

  it('should retrieve envelope data from mocked window.ats', () => {
    const result = sdk.getEnvelope();
    // 验证结果是否符合模拟数据
    expect(result).toBe('mocked_envelope_data');

    // 如果需要验证 retrieveEnvelope 是否被调用，可以使用 spyOn 结合 beforeEach 的方式
    // const retrieveSpy = spyOn(window.ats, 'retrieveEnvelope').and.callThrough();
    // sdk.getEnvelope();
    // expect(retrieveSpy).toHaveBeenCalled();
  });

  // 更多测试用例...
});

注意事项与最佳实践

• 测试隔离性： beforeEach 和 afterEach 的组合是确保测试用例之间相互隔离的关键。每次测试都从一个预期的状态开始，并在结束时清理，避免了“泄漏”或“污染”其他测试。
• 模拟的精确性： 模拟对象的方法应该尽可能地模仿真实库的行为，包括参数、返回值和回调机制。如果真实库是异步的，模拟也应该模拟异步行为（例如使用 setTimeout 或返回 Promise）。
• 粒度控制： 对于更复杂的场景，你可能需要更细粒度的控制，例如使用 jasmine.createSpyObj 来创建具有多个方法的模拟对象，或者对模拟对象上的特定方法使用 spyOn 来验证其调用情况。
• 依赖注入（可选）： 虽然本教程侧重于不修改现有代码的模拟方法，但从长远来看，如果项目允许，将外部依赖通过依赖注入的方式传入类中（而不是直接从 window 获取），是更推荐的架构实践。这会使测试变得更加简单和直观，因为你只需要注入一个模拟的依赖项，而不是修改全局对象。

总结

在 Karma 和 Jasmine 环境下模拟 window 对象上的外部库，最可靠的方法是利用 beforeEach 和 afterEach 钩子。通过在测试前直接向 window 对象注入模拟的属性和方法，并在测试后进行清理，我们可以有效地隔离单元测试，确保其独立性和可重复性。这种方法简单、直接，且对现有生产代码无侵入性，是处理此类测试场景的有效策略。

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