Updating to Jest 30 is Frustrating (it's JSDOM)

It's time to update from Jest 29 to 30 for me.
Except I can't. At least not completely.

The Easy Part

They changed the snapshot files: the link in the header changed. I find short-links disturbing anyway.

- // Jest Snapshot v1, https://goo.gl/fbAQLP
+ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

Then they removed some deprecated matcher aliases. (expect(fn).toBeCalled() → expect(fn).toHaveBeenCalled()) It took a while but was manageable.

Then I got really confused when I found out some modules are not mocked anymore. As it turns out jest.mock("./path/to/module") is case-sensitive now.

The Hard Part

Jest updated JSDOM from Version 20 to 26.

It added show-stopping CSS-bugs for me (el.style.boxShadow = undefined became el.style.boxShadow === "undefined" instead of the expected el.style.boxShadow === ""), fixed them in Version 27 and introduced new show-stopping CSS-bugs for me.

While this is manageable, my tests regarding navigation began to fail...

The impossible Part

JSDOM does not implement window.location which is fine.
Up until now it was possible to mock window.location, but this stopped working in JSDOM v21.

// does not work anymore
delete window.location;
Object.defineProperty(window, 'location', { // TypeError: Cannot redefine property: location
  writable: true,
  value: { search: '' },
});

Possible workarounds are discussed, but none are satisfactory.

• JSDOM does not plan to do anything about this.
• Using reconfigure({url: "..."}) does not help me, because I want to know if the location was changed to the desired value.
• Some even suggest to patch the jsdom package. I really don't want to do this. (But it may help for a while).
• I wanted to be clever and thought we might manipulate the JSDOM Window Object with Proxies and apply them using @jest/environment-jsdom-abstract - but I was wrong....

The "Solution"

So at this point its Jest 30 with JSDOM 20 (from Jest 29). 🤮

// package.json
{
    // ...
    "devDependencies": {
        "jest": "^30.2.0",
        "jest-environment-jsdom": "^29.7.0",
    }
}

Uh and on the End-To-End test side, things became complicated since chrome complains when websites try to connect to localhost and local ip-adresses.

Testing is a nightmare right now.