笑话回顾:安全模拟全局对象的属性和方法
长话短说:
- 您希望避免覆盖/模拟的属性/方法影响其他测试。
- 对于本地对象(由该测试创建并拥有),您可以(并且应该)使用
- localObject.theAnswer = 42 和
- localObject.calcTheAnswer = jest.fn(() => 42).
- 对于全局对象,您应该使用
- jest.replaceProperty(globalObject, "theAnswer", 42) 和
- jest.spyOn(globalObject, "calcTheAnswer").mockReturnValue(42).
- 确保在 afterEach() 挂钩中调用 jest.restoreAllMocks()。
什么?
在一个完美的世界 代码库中,不需要操作全局对象,但是世界 代码库很混乱 - 所以正在测试。
您要不惜一切代价避免一个测试影响另一个测试。无论测试的顺序如何,或者是否跳过某些测试,测试都应该有意义。
模拟属性
模拟值的一种简单方法是将属性设置为测试中所需的任何值。
只要您更改此特定测试拥有(创建)的本地对象中的值就可以了:
describe("override properties of local objects", () => { it("works and is harmless", () => { const myArray = [1]; myArray.length = 0; expect(myArray).toHaveLength(0); }); it("does not affect the next test", () => { const myArray = [1]; expect(myArray).toHaveLength(1); }); });
如果你对全局对象这样做,它会变得混乱:
describe("don't override properties of global objects", () => { it("works before the property is overridden", () => { expect(window.innerWidth).toBeGreaterThan(0); }); it("works, but is evil", () => { window.innerWidth = 0; expect(window.innerWidth).toBe(0); }); it("fails in the test after the property was overridden", () => { expect(() => { expect(window.innerWidth).toBeGreaterThan(0); // <-- ERROR: expect(received).toBeGreaterThan(expected) }).toThrow(Error); }); });
这就是 jest.replaceProperty() 的用途:
describe("use jest.replaceProperty() to override properties of global objects", () => { afterEach(() => { jest.restoreAllMocks(); }); it("works before the property is overridden", () => { expect(window.innerWidth).toBeGreaterThan(0); }); it("works and is harmless", () => { jest.replaceProperty(window, "innerWidth", 0); expect(window.innerWidth).toBe(0); }); it("does not affect the next test", () => { expect(window.innerWidth).toBeGreaterThan(0); }); });
模拟方法
方法可以像属性一样被模拟。
describe("override methods of local objects using jest.fn()", () => { it("works and is harmless", () => { const mySet = new Set([1]); mySet.has = jest.fn().mockReturnValue(false); expect(mySet.has(1)).toBeFalsy(); }); it("does not affect the next test", () => { const mySet = new Set([1]); expect(mySet.has(1)).toBeTruthy(); }); });
如果您在全局对象上使用 myObject.someFunction = jest.fn(),您的测试可能会相互依赖并失去其意义:
describe("don't override methods of global objects using jest.fn()", () => { it("works before the method is overridden", () => { expect(document.getElementById("foo")).toBeNull(); }); it("works, but is evil", () => { const el = document.createElement("div"); document.getElementById = jest.fn().mockReturnValue(el); expect(document.getElementById("foo")).toBe(el); }); it("fails in the test after the property was overridden", () => { expect(() => { expect(document.getElementById("foo")).toBeNull(); // <-- ERROR: expect(received).toBeNull() }).toThrow(Error); }); });
我们应该如何模拟全局对象中的方法?这就是 jest.spyOn() 的优点:
describe("use jest.spyOn() to override methods of global objects", () => { afterEach(() => { jest.restoreAllMocks(); }); it("works before the method is overridden", () => { expect(document.getElementById("foo")).toBeNull(); }); it("works and is harmless", () => { const el = document.createElement("div"); jest.spyOn(document, "getElementById").mockReturnValue(el); expect(document.getElementById("foo")).toBe(el); }); it("does not affect the next test", () => { expect(document.getElementById("foo")).toBeNull(); }); });
你必须清理
如果您想确保所有测试都发现系统处于相同(新鲜、干净)状态,则需要在每次测试后恢复模拟的状态。
最简单的解决方案是设置restoreMocks配置属性。
最直接的选择是在 afterEach() 中调用 jest.restoreAllMocks()
如何为所有测试模拟某些内容
有时您想模拟文件中所有测试的内容。如果您在顶层或在describe()块中使用jest.spyOn()和jest.replaceProperty(),则在执行第一个测试后所有Mock将被重置。
在顶层,您可以安全地重写属性和方法,无需 jest.spyOn() 和 jest.replaceProperty()。
如果您只想为describe() 块模拟事物,则需要在beforeEach() 挂钩中进行这些调用。
以上是笑话回顾:安全模拟全局对象的属性和方法的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...
