Unit testing 如何修复错误：未实现：导航（哈希更改除外）

我正在为包含

window.location.href

的文件执行单元测试，我需要检查它

我的jest版本是

22.0.4

。当我在版本>=10的节点上运行测试时，一切正常

但在

v8.9.3

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Not implemented: navigation (except hash changes)

我对此一无所知。我已经在很多页面上搜索，以找出解决方案或任何关于这一点的提示，以找出这里发生了什么

[更新]-我深入查看了源代码，我认为这个错误来自jsdom

at module.exports (webapp/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
at navigateFetch (webapp/node_modules/jsdom/lib/jsdom/living/window/navigation.js:74:3)

navigation.js文件 未实现的.js 我在这些文件中看到一些奇怪的逻辑

const scriptSource=whatwgURL.percentDecode（Buffer.from（urlString））.toString（）

然后检查字符串并返回错误

---

我在一次单元测试中遇到了类似的问题。下面是我为解决这个问题所做的

• 将

  window.location.href

  替换为

  window.location.assign（url）

  或

  window.location.replace（url）

  
  
  
• JSDOM仍将抱怨

  窗口.位置.分配
  未实现
  
  错误：未实现：导航（哈希更改除外）
  
  
  
  

• 然后，在上面包含

  window.assign（url）

  或

  window.replace（url）

  的组件/函数的单元测试中，定义以下内容

  • sinon.stub（window.location，'assign'）

  • sinon.stub（window.location，'replace'）

  • 确保您从“sinon”导入sinon

    导入sinon

希望这能像对我一样解决您的问题

JSDOM抱怨

错误：未实现：导航（散列更改除外）

的原因是，JSDOM没有实现类似

窗口.alert

，

窗口.location.assign等方法



参考资料：




仅适用于我的
jest
替代版本：

let assignMock = jest.fn();

delete window.location;
window.location = { assign: assignMock };

afterEach(() => {
  assignMock.mockClear();
});

参考：
替代解决方案：您可以模拟位置对象

const mockResponse = jest.fn();
    Object.defineProperty(window, "location", {
      value: {
        hash: {
          endsWith: mockResponse,
          includes: mockResponse
        },
        assign: mockResponse
      },
      writable: true
    });

对我通过将
href
替换为
assign
应用了此解决方案，它对用户很有效。您可以将此代码放在setupTests.ts文件中。
let assignMock = jest.fn();

delete window.location;
window.location = { assign: assignMock };

afterEach(() => {
  assignMock.mockClear();
});

const mockResponse = jest.fn();
    Object.defineProperty(window, "location", {
      value: {
        hash: {
          endsWith: mockResponse,
          includes: mockResponse
        },
        assign: mockResponse
      },
      writable: true
    });