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

Question

我正在对包含 window.location.href 的文件实施单元测试，我需要检查它。

我的玩笑版本是 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)

导航.js 文件

exports.evaluateJavaScriptURL = (window, urlRecord) => {
  const urlString = whatwgURL.serializeURL(urlRecord);
  const scriptSource = whatwgURL.percentDecode(Buffer.from(urlString)).toString();
  if (window._runScripts === "dangerously") {
    try {
      return window.eval(scriptSource);
    } catch (e) {
      reportException(window, e, urlString);
    }
  }
  return undefined;
};
exports.navigate = (window, newURL, flags) => {
  // This is NOT a spec-compliant implementation of navigation in any way. It implements a few selective steps that
  // are nice for jsdom users, regarding hash changes and JavaScript URLs. Full navigation support is being worked on
  // and will likely require some additional hooks to be implemented.

  const document = idlUtils.implForWrapper(window._document);
  const currentURL = document._URL;

  if (!flags.reloadTriggered && urlEquals(currentURL, newURL, { excludeFragments: true })) {
    if (newURL.fragment !== currentURL.fragment) {
      navigateToFragment(window, newURL, flags);
    }
    return;
  }

  // NOT IMPLEMENTED: Prompt to unload the active document of browsingContext.

  // NOT IMPLEMENTED: form submission algorithm
  // const navigationType = 'other';

  // NOT IMPLEMENTED: if resource is a response...
  if (newURL.scheme === "javascript") {
    window.setTimeout(() => {
      const result = exports.evaluateJavaScriptURL(window, newURL);
      if (typeof result === "string") {
        notImplemented("string results from 'javascript:' URLs", window);
      }
    }, 0);
    return;
  }
  navigateFetch(window);
};

not-implemented.js

 module.exports = function (nameForErrorMessage, window) {
  if (!window) {
    // Do nothing for window-less documents.
    return;
  }

  const error = new Error(`Not implemented: ${nameForErrorMessage}`);
  error.type = "not implemented";

  window._virtualConsole.emit("jsdomError", error);
};

我在这些文件中看到了一些奇怪的逻辑。

1. const scriptSource = whatwgURL.percentDecode(Buffer.from(urlString)).toString();
2. 然后检查字符串并返回错误

原文由 Tran Son Hoang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

• 将 window.location.href 替换为 window.location.assign(url) 或 window.location.replace(url)

• JSDOM 仍然 会抱怨 window.location.assign 没有实现。

Error: Not implemented: navigation (except hash changes)

• 然后，在包含 window.assign(url) 或 window.replace(url) 的上述组件/函数的单元测试之一中定义以下内容

  • sinon.stub(window.location, 'assign');
  • sinon.stub(window.location, 'replace');
  • 确保导入 sinon import sinon from 'sinon';

希望这应该像对我一样为您解决问题。

JSDOM 抱怨 Error: Not implemented: navigation (except hash changes) 的原因是因为 JSDOM 没有实现像 window.alert ， window.location.assign 等方法。

参考：

• http://xxd3vin.github.io/2018/03/13/error-not-implemented-navigation-except-hash-changes.html
• https://www.npmjs.com/package/jsdom#virtual-consoles

原文由 Mihir Kale 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

仅适用于 jest 的替代版本：

 let assignMock = jest.fn();

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

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

参考： https ://remarkablemark.org/blog/2018/11/17/mock-window-location/

原文由 blah 发布，翻译遵循 CC BY-SA 4.0 许可协议