本文详细介绍了在Karma和Jasmine环境下，如何有效模拟JavaScript中定义在window对象上的外部库属性。通过深入探讨常见的模拟失败案例，并提供一种利用beforeEach和afterEach钩子进行属性设置与清理的健壮解决方案，确保单元测试的隔离性和准确性。本教程旨在帮助开发者在不修改核心业务代码的前提下，实现对全局依赖的可靠测试。
在现代javascript应用开发中，尤其是在构建sdk或与遗留系统集成时，经常会遇到需要与全局window对象上定义的外部库进行交互的情况。例如，一个sdk可能通过window.ats.retrieveenvelope()这样的方式调用外部服务。然而，在进行单元测试时，直接依赖这些外部库会引入不可控的外部因素，导致测试结果不稳定、运行缓慢，甚至无法在无头环境中运行。因此，有效地模拟（mock）这些全局依赖变得至关重要。
理解模拟全局属性的挑战
在Jasmine等测试框架中，我们通常使用spyOn来模拟对象上的方法。然而，当尝试模拟window对象上的属性时，直接应用spyOn或Object.defineProperty可能会遇到一些挑战：
spyOn(window.ats, ‘retrieveEnvelope’): 这种方式适用于ats本身是一个可控的对象，并且retrieveEnvelope是其方法。但如果window.ats本身不存在，或者ats属性在window上是以某种特殊方式（例如只读或不可配置）定义的，spyOn可能会失败。spyOn(window, ‘ats’): spyOn通常用于模拟对象的方法，而不是整个属性。尝试对window对象本身的一个属性进行spyOn，通常无法达到模拟该属性内部方法的效果。Object.defineProperty(window, ‘ats’, …): 这种方法理论上可以重新定义window上的属性。但是，如果window.ats已经被定义为不可配置（configurable: false），或者在某些浏览器环境中，直接修改window对象的内置属性会受到限制，那么这种方法也会失败。创建局部模拟对象: 尽管可以创建一个局部模拟对象，如const windowStud = { ats: { … } } as Window & typeof globalThis;，但它并不能真正替换全局的window对象，因此在测试代码中实际调用的仍然是真实的window对象。
这些方法失败的根本原因在于，window对象是一个特殊的全局对象，其属性的定义和行为可能受到浏览器环境的限制，并且直接对其进行spyOn或defineProperty操作可能不符合其预期。
健壮的解决方案：利用 beforeEach 和 afterEach
最直接且有效的方法是在每个测试运行前，手动将模拟的外部库属性直接赋值到window对象上，并在测试运行后进行清理，以确保测试之间的隔离性。Jasmine和Karma提供了beforeEach和afterEach钩子来完成这一任务。
核心思路：在beforeEach块中，我们直接在window对象上创建或覆盖ats属性及其方法。在afterEach块中，我们将window.ats重置为undefined或其原始值（如果需要），以避免对后续测试产生副作用。
// 假设这是你的业务代码，它依赖于 window.atsclass 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对象上的外部库属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516153.html
微信扫一扫 
支付宝扫一扫 
