在前端开发中，尤其是在构建 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 对象上的外部库时，开发者常会遇到一些问题。以下是一些常见的尝试及其局限性：
-
使用 spyOn 模拟 window.ats 的方法：
// Method 1: 尝试对 window.ats.retrieveEnvelope 进行 spyOn spyOn(window.ats, 'retrieveEnvelope').and.returnValue(...);
这种方法的问题在于，如果 window.ats 在测试运行前尚未定义，spyOn 将会失败，因为它期望目标对象和方法已经存在。
-
使用 spyOn 模拟 window 上的属性：
// Method 2: 尝试对 window.ats 进行 spyOn spyOn(window, 'ats').and.returnValue(...);
spyOn 主要用于监视或替换对象上的方法，而不是直接替换整个属性值。尝试对 window 上的 ats 属性进行 spyOn 通常不会达到预期的效果，因为它不会真正地将 window.ats 替换为一个全新的模拟对象。
-
尝试重新定义 window 或其属性：
// Method 3: 尝试重新定义 window 或使用 Object.defineProperty window = Object.create(window); // 无效 Object.defineProperty(window, 'ats', { value: {...}, writable: true }); // 可能有效，但过于复杂且不推荐直接重新定义 window 对象在浏览器环境中通常是无效或危险的。而 Object.defineProperty 虽然可以用于定义属性，但在测试中直接操作全局对象的方式不够简洁，且可能导致清理困难。
-
创建局部模拟对象但不应用到全局：
// Method 4: 创建一个局部模拟对象 const windowStud = { ats: { retrieveEnvelope: function() {} } } as Window & typeof globalThis;这种方法创建了一个模拟对象，但并没有将其赋值给全局的 window 对象，因此测试代码仍然会访问真实的 window.ats（如果存在）。
有效解决方案：利用 beforeEach 和 afterEach
最直接且有效的方法是利用 Jasmine 的测试生命周期钩子 beforeEach 和 afterEach。在每个测试用例运行之前，我们直接在全局 window 对象上定义模拟的 ats 属性；在每个测试用例运行之后，我们再将其清理，确保测试环境的纯净。
实现步骤
-
在 beforeEach 中注入模拟对象： 在每个测试用例执行前，将一个包含模拟方法的对象赋值给 window.ats。模拟方法应尽可能地模仿真实方法的行为，例如，如果真实方法接收一个回调函数并调用它，那么模拟方法也应该这样做。
beforeEach(() => { // 设置模拟的 window.ats 对象 window.ats = { retrieveEnvelope: function (callback: (envelope: string) => void) { // 模拟真实库的行为，调用回调函数并传入模拟数据 return callback('{"envelope":"asdfasdfasdf"}'); }, }; });在上述代码中，retrieveEnvelope 方法被模拟，它接收一个回调函数 callback，并立即使用一个预设的 JSON 字符串调用该回调。这样，依赖 window.ats.retrieveEnvelope 的代码就可以在不实际调用外部库的情况下，接收到模拟的数据。
-
在 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 对象注入模拟的属性和方法，并在测试后进行清理，我们可以有效地隔离单元测试，确保其独立性和可重复性。这种方法简单、直接，且对现有生产代码无侵入性，是处理此类测试场景的有效策略。
