Fixing jsdom “Not implemented: navigation” Error

Background

Recently, I tried adding tests with jsdom for the first time. I managed to get all my tests running, but would still get a very strange, and very long, console.error message that started with: "Error: Not implemented: navigation (except hash changes)" and pointed to the click event for my back button. The click event was incredibly simple, just setting window.location.href to the homepage. But, jsdom seemed to hold issue with it nonetheless. Confused, I consulted the internet and found that this was a problem caused by the nature of jsdom. It didn't include navigation as a feature, so calls to functions or methods that deal with navigation, like window.location.href or window.location.assign(), didn't have support. The error message is just notifying you of that fact. Understandable, and it was fine to ignore, but that was hard to do when the message itself was 31 lines long. Thus, I looked for some solutions and, thankfully, there were several. Essentially, all you needed to do was patch the offending call, in my case window.location.href, and the warning would disappear. There were many ways of doing so and I tried several, only for each and every one to fail. Either the solution did nothing or, even more strangely, window.location would just refuse to be changed, giving error messages saying that it was immutable and could not be redefined. But then why were there multiple people in multiple StackOverflow posts saying that they had done so? Finally, after asking around and looking up some more, I discovered the reason: Starting in jsdom v21, window.location, along with all of its properties, were made non-configurable. This was seemingly to follow web standards and is unlikely to change in the future. Thus, the solution was to either roll back to v20, which is now 3 years old, or to change the package itself, which is what I went with and will be describing how to do now.

Changing jsdom

1. Go into node_modules/jsdom/lib/jsdom/browser/Window.js and search for "LegacyUnforgeable"

2. Under that section, set the “configurable” property of window, document, and location to true

3. Go into node_modules/jsdom/lib/jsdom/living/generated/Location.js and search for "Object.defineProperties(unforgeables"

4. Set everything’s “configurable” property to true

5. Now, in the test file causing the warning, add the following:

import { beforeAll, afterAll } from "@jest/globals";

// Mock window.location.href to avoid JSDom error
const real_location = window.location;
beforeAll(() => {
    delete window.location;
    window.location = { ...real_location, assign: jest.fn(), href: "" }; // add any other call you need to mock here
});

afterAll(() => {
    window.location = real_location;
});

Now, when you run npm test, the message should disappear.

Creating a patch

If you make these changes locally, share your project, and have someone install the requirements with npm install, they will install the original version of jsdom, meaning the warning(s) will still occur on their machine. To avoid this, we'll be using patch-package.

1. Install patch-package with npm install --save-dev patch-package

2. In package.json add:

"scripts": {
  "postinstall": "patch-package"
}

3. Use npx patch-package jsdom to generate a .patch file Now, npm install should install the updated version of jsdom.