当JSDOM与Fetch相遇：跨环境的教训
💡
原文英文，约800词，阅读约需3分钟。
📝
内容提要
在跨环境JavaScript开发中，相对URL在浏览器中正常，但在JSDOM中因其默认的window.location.href为about:blank而解析失败。解决方法是显式检测相对URL，并根据globalThis.location.origin进行解析，以确保各环境一致性。正确配置测试环境至关重要，库作者需考虑意外情况。
🎯
关键要点
- 跨环境JavaScript开发中，相对URL在浏览器正常，但在JSDOM中因默认的window.location.href为about:blank而解析失败。
- JSDOM是Node.js代码与虚拟浏览器环境交互的JavaScript实现，广泛用于测试框架如Jest和Vitest。
- 在浏览器中，相对URL会自动解析为window.location.origin，但在某些测试环境中并不保证。
- JSDOM的location对象与浏览器的window.location不完全相同，导致相对URL解析失败。
- 解决方法是显式检测相对URL，并根据globalThis.location.origin进行解析，以确保各环境一致性。
- 测试环境配置必须正确，确保window.location或基础URL在测试运行器中设置。
- 即使环境配置正确，包装器仍需安全处理相对URL，以保证在不同环境中的一致性。
- 跨环境JavaScript开发揭示了看似简单操作中的复杂性，库作者需设计能优雅处理意外情况的库。
❓
延伸问答
为什么在JSDOM中相对URL会解析失败？
在JSDOM中，window.location.href默认是about:blank，这导致相对URL无法正确解析。
如何解决JSDOM中相对URL解析失败的问题？
可以显式检测相对URL，并根据globalThis.location.origin进行解析，以确保一致性。
JSDOM与浏览器的location对象有什么不同？
JSDOM的location对象与浏览器的window.location不完全相同，这可能导致相对URL解析失败。
在测试环境中配置window.location的重要性是什么？
正确配置window.location或基础URL是确保相对URL正常工作的关键，否则会导致解析失败。
开发跨环境JavaScript代码时需要注意什么？
需要注意不同环境中相对URL的解析差异，并确保库能够优雅地处理意外情况。
如何确保库在不同环境中表现一致？
库的设计应考虑到不同环境的差异，并在逻辑中处理相对URL，以保证一致性。
🏷️
标签
➡️
