Published 04 May, 2022

How to fix Error: Not implemented: navigation (except hash changes)

Category Javascript
Modified : Feb 01, 2023

Javascript is the most used language on the web. It's speed, asynchronous capabilities and a set of amazing other features makes it an unbeatable candidate among all other languages out there. Also, you don't need other tools in order to test, run or develop Javascript applications. The best part is that there are tons of libraries to make life easier.

There are 3 suggested solutions in this post and each one is listed below with a detailed description on the basis of most helpful answers as shared by the users. I have tried to cover all the aspects as briefly as possible covering topics such as Javascript, Jestjs, Unit Testing, Vuejs2 and a few others. I have categorized the possible solutions in sections for a clear and precise explanation. Please consider going through all the sections to better understand the solutions.

Solution 1

I faced a similar issue in one of my unit tests. Here's what I did to resolve it.

  • Replace window.location.href with window.location.assign(url) OR window.location.replace(url)

  • JSDOM will still complain about window.location.assign not implemented.

    Error: Not implemented: navigation (except hash changes)

  • Then, in one of your unit tests for the above component / function containing window.assign(url) or window.replace(url) define the following

    • sinon.stub(window.location, 'assign');
    • sinon.stub(window.location, 'replace');
    • Make sure you import sinon import sinon from 'sinon';


Hopefully, this should fix the issue for you as it did for me.


The reason JSDOM complains about the Error: Not implemented: navigation (except hash changes) is because JSDOM does not implement methods like window.alert, window.location.assign, etc.


References:


Solution 2

Alternative version that worked for me with jest only:

let assignMock = jest.fn();

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

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

Reference: https://remarkablemark.org/blog/2018/11/17/mock-window-location/


Solution 3

Here's the final solution you can try out in case no other solution was helpful to you. This one's applicable and useful in some cases and could possiblty be of some help. No worries if you're unsure about it but I'd recommend going through it.

Alternate solution: You could mock the location object

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

Concluding Remarks

Javascript is awesome in many ways. These were a few of many solutions that were found helpful for your issue. Hope it turns out helpful for you. Please upvote the solutions if it worked for you.

Computers do not solve problems, they execute solutions.
Unknown