本文详细介绍了在 Karma 和 Jasmine 环境下，如何有效地模拟 window 对象上定义的外部 JavaScript 库。通过利用 Jasmine 的测试生命周期钩子 beforeEach 和 afterEach，可以直接在测试前注入模拟对象，并在测试后进行清理，确保测试的隔离性和可靠性，避免了对生产代码的侵入性修改。
在前端开发中，尤其是在构建 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 进行 spyOnspyOn(window.ats, 'retrieveEnvelope').and.returnValue(...);
这种方法的问题在于，如果 window.ats 在测试运行前尚未定义，spyOn 将会失败，因为它期望目标对象和方法已经存在。
使用 spyOn 模拟 window 上的属性：
// Method 2: 尝试对 window.ats 进行 spyOnspyOn(window, 'ats').and.returnValue(...);
spyOn 主要用于监视或替换对象上的方法，而不是直接替换整个属性值。尝试对 window 上的 ats 属性进行 spyOn 通常不会达到预期的效果，因为它不会真正地将 window.ats 替换为一个全新的模拟对象。
尝试重新定义 window 或其属性：
// Method 3: 尝试重新定义 window 或使用 Object.definePropertywindow = 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.tsclass MySDK { public getEnvelope(): string { return window.ats.retrieveEnvelope((envelope: string) => { console.log('Located ATS.js'); return JSON.parse(envelope).envelope; }); }}// my-sdk.spec.tsdescribe('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 对象上的外部库的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516157.html
微信扫一扫 
支付宝扫一扫 
