Jsdom: Fehler: Nicht implementiert: Navigation

Ich bekomme auch diesen Fehler

Error: Not implemented: navigation (except hash changes)
    at module.exports (...\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
    at navigateFetch (...\node_modules\jsdom\lib\jsdom\living\window\navigation.js:74:3)

jsdom unterstützt keine Navigation, daher wird diese Meldung durch die Einstellung von window.location.href oder ähnlichem ausgegeben. Ich bin mir nicht sicher, ob Jest diese Nachrichten zuvor nur unterdrückt hat oder was.

Dies ist wahrscheinlich etwas, das Sie in Ihren Tests beheben sollten, da dies bedeutet, dass der Testläufer beim Navigieren der Seite zu einer neuen URL völlig überwältigt wäre, wenn Sie diese Tests im Browser ausführen würden, und Sie würden keine Tests sehen Ergebnisse. In jsdom geben wir stattdessen einfach eine Nachricht an die Konsole aus, die Sie ignorieren können, wenn Sie möchten, oder Sie können Ihre Tests korrigieren, damit sie in mehr Umgebungen besser funktionieren.

Wie auch immer, ich würde gerne mehr Dokumentation dazu für Leute hinzufügen, also lasse ich dieses Problem offen, um dies zu verfolgen.

Verstehe voll und ganz, was du sagst. Das jüngste Jest 22-Update wurde von JSDOM 9 auf 11 IIRC umgestellt, sodass das Verhalten in 9.x möglicherweise ganz anders war.

Abgesehen davon würde ich es begrüßen, wenn die Navigation in JSDOM mit einer Art Flag implementiert würde, um das Laden einer anderen Seite zu verhindern (ähnlich wie bei HTML5-Pushstate). Die Bibliothek wird sehr häufig zu Testzwecken verwendet Obwohl es vielleicht eine skurrile Anfrage war, wurde es oft verwendet.

Ich denke nicht, dass wir ein Flag hinzufügen sollten, das dazu führt, dass Ihre Tests in jsdom anders laufen als in Browsern. Dann könnten Ihre Sachen in Browsern kaputt gehen (zB könnten sie Benutzer auf eine andere Seite umleiten, anstatt die Aktion auszuführen, die Ihre Tests sehen) und Sie würden es nicht einmal bemerken!

Nun, in diesem Fall würde es nichts anderes tun, als den aktuellen Seitenkontext nicht zu entladen. Ich würde immer noch erwarten, dass window.location.href aktualisiert wird usw.

@domenic Ich habe das gleiche Problem und habe mich gefragt, ob es eine Best Practice gibt, um JSDOM mit einer App einzurichten, die window.location festlegt. Soweit ich das beurteilen kann, gibt JSDOM beim Versuch, window.location zu setzen, einen Fehler aus und protokolliert einen Fehler beim Versuch, window.location.href - ich lese jedoch auf mdn, dass die beiden Synonyme sein sollten. Sollte ich den Standort auf eine andere Weise aktualisieren, die einfacher zu stubieren ist?
Dankbar für Hilfe 😅

Erlauben Sie mir, die Antwort auf meine eigene Frage zu posten 😁
Ich ersetze einfach die Verwendungen von window.location = url; und window.location.href = url; durch

window.location.assign(url);

und dann habe ich in meinen Tests gemacht:

sinon.stub(window.location, 'assign');
expect(window.location.assign).to.have.been.calledWith(url);

Funktioniert wie ein Zauber - hoffe es kann jemand anderem helfen 👍

Stimmen Sie zu, dass dies sofort funktionieren sollte. Wir verspotten window.location bei FB, aber das steht in Konflikt mit der History Implementierung von jsdom.

Als kleines Team würden wir uns sicherlich über Hilfe von den größeren Projekten freuen, die von uns abhängen, um die Navigation in jsdom richtig zu implementieren.

Wenn jemand interessiert ist, könnte https://github.com/jsdom/jsdom/pull/1913 ein guter Anfang sein.

Eine mögliche Lösung besteht darin, sich auf Abhängigkeitsinjektion/-mock für das window Objekt in Unit-Tests zu verlassen.

Etwas wie:

it('can test', () => {
  const mockWindow = {location: {href: null}};
  fn({window: mockWindow});
  expect(mockWindow.href).toEqual('something');
});

Dies ist nicht ideal, aber wie von @domenic gesagt:

Dies ist wahrscheinlich etwas, das Sie in Ihren Tests beheben sollten, da dies bedeutet, dass der Testläufer völlig überwältigt wäre, wenn Sie die Seite zu einer neuen URL navigieren, wenn Sie diese Tests im Browser ausführen.

Im Moment leben wir damit und ja, wir ändern unseren Implementierungscode für Tests, was als schlechte Praxis gilt, aber wir schlafen auch nachts gut!

Viel Spaß beim Testen

Die Lösung von @hontas hat geholfen:

Ich habe window.location.assign(Config.BASE_URL); in meinem Code verwendet.

Und hier ist der Test:

jest.spyOn(window.location, 'assign').mockImplementation( l => {
   expect(l).toEqual(Config.BASE_URL);
})

window.location.assign.mockClear();

Das gleiche Problem, ich verwende window.location.search = foo; in meinem Code und möchte es mit jsdom (und jest) testen 🤔

PS: Bezogen auf https://github.com/facebook/jest/issues/5266

Nach dem Update auf jsdom 12.2.0 wurde ein Fehler angezeigt:
TypeError: Eigenschaft kann nicht neu definiert werden: zuweisen
auf const assign = sinon.stub(document.location, 'assign')
wie man es repariert?

@yuri-sakharov

Nach dem Update auf jsdom 12.2.0 wurde ein Fehler angezeigt:
TypeError: Eigenschaft kann nicht neu definiert werden: zuweisen
auf const assign = sinon.stub(document.location, 'assign')
wie man es repariert?

sinon.stub(document.location, 'assign')

muss sein:

sinon.stub(window.location, 'assign')

Sie müssen document durch window ersetzen

Ich habe folgende Funktion

export const isLocalHost = () => Boolean(
  window.location.hostname === 'localhost' ||
  // [::1] is the IPv6 localhost address.
  window.location.hostname === '[::1]' ||
  // 127.0.0.1/8 is considered localhost for IPv4.
  window.location.hostname.match(
    /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
  )
);

Damit ich testen kann, ob es funktioniert, spritze ich direkt das hostname

it('#isLocalHost should return true for all the cases of localhost', () => {
    window.location.hostname = 'localhost';
    expect(isLocalHost()).toBeTruthy();

    window.location.hostname = '[::1]';
    expect(isLocalHost()).toBeTruthy();

    window.location.hostname = '127.0.0.1';
    expect(isLocalHost()).toBeTruthy();

    // Reset back the hostname to avoid issues with it
    window.location.hostname = '';
  });

Aber ich bekomme diesen Fehler.

Ich erwarte nicht, dass jsdom die Navigation vollständig implementiert, aber zumindest die Tasten hinzufügt und die Funktionen verspottet.

Ich bin verwirrt, warum ich diesen Fehler immer wieder erhalte, ich möchte nur in der Lage sein, den Wert einzurichten.

@nickhallph
Ich habe es durch window.location wie du geschrieben hast, aber das Ergebnis ist das gleiche
TypeError: Cannot redefine property: assign
Irgendwelche Ideen?

Das gleiche Problem wie bei @yuri-sakharov mit Mokka.

Auf keinen Fall scheine ich in der Lage zu sein, window.location.* mit window.location Mock zu erstellen und die gesamte Codebasis so zu ändern, dass sie davon abhängt.

Die Lösung von @hontas hat geholfen:

Ich habe window.location.assign(Config.BASE_URL); in meinem Code verwendet.

Und hier ist der Test:

jest.spyOn(window.location, 'assign').mockImplementation( l => {
   expect(l).toEqual(Config.BASE_URL);
})

window.location.assign.mockClear();

@zxiest 's Jest-Version von @hontas ' Lösung hat bei mir nicht funktioniert, aber das hat:

window.location.assign = jest.fn();
expect(window.location.assign).toHaveBeenCalledWith('https://correct-uri.com');
window.location.assign.mockRestore();

Wenn Sie Ihren Code nicht ändern möchten, um location.assign - dies scheint mit JSDom 11 und 13 zu funktionieren (obwohl es die Möglichkeit gibt, dass JSDom es in Zukunft kaputt macht ...)

delete window.location;
window.location = {}; // or stub/spy etc.

Die letzte Antwort hat für mich funktioniert, aber ich musste replace :

delete window.location
window.location = { replace: jest.fn() }

Ich hoffe es hilft.

Ich erhalte TypeError: Eigenschaft kann nicht neu definiert werden: Assign with sinon 7.2.3 und jsdom 13.2.0. Keine Ahnung, warum das bei manchen Leuten funktioniert und bei anderen nicht?

Das hat bei mir funktioniert:

    global.window = Object.create(window);
    const url = 'http://localhost';
    Object.defineProperty(window, 'location', {
      value: {
        href: url,
      },
      writable: true,
    });

Wir haben pushState , damit das funktioniert

 window.history.pushState(
        {},
        '',
        'http://localhost/something/123?order=asc'
      );

Dies ist eine schwierige Situation. JSDOM unterstützt die Navigation (außer Breadcrumbs) nicht vollständig und JSDOM erlaubt uns nicht, die Navigation nachzuahmen. Das Endergebnis ist, dass ich keine Tests schreiben kann, die letztendlich versuchen, die Navigation auszulösen .

Wenn JSDOM das Navigieren gelernt hätte (ich bin mir nicht einmal sicher, was das bedeutet), könnte ich vielleicht behaupten, auf der entsprechenden Seite zu sein. Für meine Testanwendungsfälle ist es jedoch viel sauberer/schneller, zu behaupten, dass die Navigation ausgelöst und nicht tatsächlich ausgeführt wurde. Es ist das, was ich in der Vergangenheit beim Testen mit jsdom getan habe und jetzt ist es kaputt.

Erlauben Sie mir, die Antwort auf meine eigene Frage zu posten
Ich ersetze einfach die Verwendungen von window.location = url; und window.location.href = url; durch

window.location.assign(url);

und dann habe ich in meinen Tests gemacht:

sinon.stub(window.location, 'assign');
expect(window.location.assign).to.have.been.calledWith(url);

Funktioniert wie ein Zauber - hoffe, es kann jemand anderem helfen

Das ist, wenn Sie die Kontrolle über die Ziel-URL haben, aber was, wenn Sie eine Google- oder Instagram-Website laden. oder irgendeine Webseite? wie können Sie dieses Problem lösen?

Basierend auf der Antwort von @chrisbateman ist es mir gelungen, dies in einer Jest-Umgebung zum

describe('', () => {
    const originalLocation = window.location;

    beforeEach(() => {
        delete window.location;

        window.location = {
            href: '',
        };
    });

    afterEach(() => {
        window.location = originalLocation;
    });

    it('', () => {
        // test here
    });
});

Ich habe dieses Problem mit dieser Konfiguration gelöst. Ich wollte die Umleitung für Hash-URLs testen:

    beforeEach(() => {
      delete global.window;
      global.window = {
        location: { replace: jest.fn(url => ({ href: url })) },
      };
    });
    it('should redirect hash url', () => {
      window.location.hash = '#/contrat?id=8171675304';
      global.window.location.href =
        'http://localhost:3000/#/contrat?id=8171675304';
      redirectHashUrl();

      expect(window.location.replace).toHaveBeenCalled();
    });

@chrisbateman @hamzahamidi danke, dass die Lösungen gut funktioniert haben.

Vielleicht ist es keine gute Praxis, aber wir haben einige Tests, die auf Standort/Host/Hostname und anderen Standorteigenschaften basieren. Es hat für mich funktioniert, den Standort so zu verspotten, wie wir es wollten, und das anschließende Wiederherstellen.

const realLocation = window.location;

describe('bla bla', () => {
  afterEach(() => {
    window.location = realLocation;
  });

  it('test where I want to use hostname', () => {
    delete window.location;
    window.location = { 
      hostname: 'my-url-i-expect.com'
    };
    // check my function that uses hostname
  });
});

Das hat bei mir funktioniert:

    global.window = Object.create(window);
    const url = 'http://localhost';
    Object.defineProperty(window, 'location', {
      value: {
        href: url,
      },
      writable: true,
    });

es funktioniert nicht auf einem CI wie circleci

Die Lösung von @hontas hat geholfen:

Ich habe window.location.assign(Config.BASE_URL); in meinem Code verwendet.

Und hier ist der Test:

jest.spyOn(window.location, 'assign').mockImplementation( l => {
   expect(l).toEqual(Config.BASE_URL);
})

window.location.assign.mockClear();

Danke Kumpel, du hast mir einen Tag erspart! :)

In meinem Fall teste ich für den Query - String, und da der Gegenstand meiner Spezifikation ist der Query - String selbst, ich will nicht zu umgehen, aber ich bin glücklich , es zu Stub. in meinem Fall hat das gut funktioniert:

    let name = "utm_content"
    window.history.pushState({}, 'Test Title', '/test.html?utm_content=abc');
    expect(ParseUrlUtils.getParam(name)).toBe("abc")

Beachten Sie, dass es hier egal ist, wie der Titel des Fensters lautet und dass es /test.html (was nicht echt ist). das geht vorbei)

Das Problem mit Beispielen ist, dass Methoden und Getter nicht verwendet werden. Was ich mache, ist im Grunde das Location-Objekt durch das URL-Objekt zu ersetzen. URL hat alle Eigenschaften von Location (Suche, Host, Hash usw.).

const realLocation = window.location;

describe('My test', () => {

    afterEach(() => {
        window.location = realLocation;
    });

    test('My test func', () => {

        // @ts-ignore
        delete window.location;

        // @ts-ignore
        window.location = new URL('http://google.com');

        // ...
    });
});

Ich bekomme auch diesen Fehler

Error: Not implemented: navigation (except hash changes)
    at module.exports (...\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
    at navigateFetch (...\node_modules\jsdom\lib\jsdom\living\window\navigation.js:74:3)

Die Lösung von @hontas hat geholfen:

Ich habe window.location.assign(Config.BASE_URL); in meinem Code verwendet.

Und hier ist der Test:

jest.spyOn(window.location, 'assign').mockImplementation( l => {
   expect(l).toEqual(Config.BASE_URL);
})

window.location.assign.mockClear();

Das hat bei mir funktioniert, danke! Ich musste jedoch das Argument done von jest test() verwenden, sonst wäre ich nicht sicher, ob der Expect ausgewertet wurde und der Test sowieso erfolgreich beendet wurde:

it('should', (done) => {
jest.spyOn(window.location, 'assign').mockImplementation( l => {
   expect(l).toEqual(Config.BASE_URL);
   done();
})

window.location.assign.mockClear();
}

@hontas Funktioniert bei mir nicht :( Eigenschaft kann nicht neu geschrieben / ersetzt werden

Gibt es eine Möglichkeit herauszufinden, welcher Test die Meldung "Nicht implementiert: Navigation" auslöst? Ich habe eine Reihe von 43 Tests - der Fehler wird nur einmal angezeigt und springt ständig herum. Ich kann nicht sagen, welchen Test ich reparieren soll!!! Der Stacktrace gibt mir keinen Hinweis auf den Täter:

console.error
  Error: Not implemented: navigation (except hash changes)
      at module.exports (/Users/naresh/projects/mobx-state-router/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
      at navigateFetch (/Users/naresh/projects/mobx-state-router/node_modules/jsdom/lib/jsdom/living/window/navigation.js:76:3)
      at exports.navigate (/Users/naresh/projects/mobx-state-router/node_modules/jsdom/lib/jsdom/living/window/navigation.js:54:3)
      at Timeout._onTimeout (/Users/naresh/projects/mobx-state-router/node_modules/jsdom/lib/jsdom/living/nodes/HTMLHyperlinkElementUtils-impl.js:81:7)
      at listOnTimeout (internal/timers.js:531:17)
      at processTimers (internal/timers.js:475:7) undefined

    at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
    at module.exports (node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
    at navigateFetch (node_modules/jsdom/lib/jsdom/living/window/navigation.js:76:3)
    at exports.navigate (node_modules/jsdom/lib/jsdom/living/window/navigation.js:54:3)
    at Timeout._onTimeout (node_modules/jsdom/lib/jsdom/living/nodes/HTMLHyperlinkElementUtils-impl.js:81:7)

@hontas Funktioniert bei mir nicht :( Eigenschaft kann nicht neu geschrieben / ersetzt werden

Soweit ich weiß, hat Jest in der neuen Version etwas geändert ("jest": "^26.0.1"), so dass dies jetzt funktioniert:

// Mock
  Object.defineProperty(window, 'location', {
    value: {
      pathname: '/terminals',
      assign: jest.fn(),
    },
  });

// Then test
expect(window.location.assign).toBeCalledWith('/auth');

Gibt es eine Möglichkeit herauszufinden, welcher Test die Meldung "Nicht implementiert: Navigation" auslöst? Ich habe eine Reihe von 43 Tests - der Fehler wird nur einmal angezeigt und springt ständig herum. Ich kann nicht sagen, welchen Test ich reparieren soll!!! Der Stacktrace gibt mir keinen Hinweis auf den Täter:

console.error
  Error: Not implemented: navigation (except hash changes)
      at module.exports (/Users/naresh/projects/mobx-state-router/node_modules/jsdom/lib/jsdom/browser/not-implemented.js:9:17)
      at navigateFetch (/Users/naresh/projects/mobx-state-router/node_modules/jsdom/lib/jsdom/living/window/navigation.js:76:3)
      at exports.navigate (/Users/naresh/projects/mobx-state-router/node_modules/jsdom/lib/jsdom/living/window/navigation.js:54:3)
      at Timeout._onTimeout (/Users/naresh/projects/mobx-state-router/node_modules/jsdom/lib/jsdom/living/nodes/HTMLHyperlinkElementUtils-impl.js:81:7)
      at listOnTimeout (internal/timers.js:531:17)
      at processTimers (internal/timers.js:475:7) undefined

    at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
    at module.exports (node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12:26)
    at navigateFetch (node_modules/jsdom/lib/jsdom/living/window/navigation.js:76:3)
    at exports.navigate (node_modules/jsdom/lib/jsdom/living/window/navigation.js:54:3)
    at Timeout._onTimeout (node_modules/jsdom/lib/jsdom/living/nodes/HTMLHyperlinkElementUtils-impl.js:81:7)

Es ist schwer zu sagen, von welchem ​​Test nicht implementierter Fehler kommt.

Ich füge einen Haltepunkt bei node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12 , führe eine Debug-Sitzung aus und warte, bis der Haltepunkt erreicht ist. Erst dann sehe ich, welchen Test ich verbessern sollte, um diese Meldung loszuwerden.

Manchmal dauert es 2-3 Minuten, bis der Läufer mit einem Problem den Test erreicht.

PS: In meinem aktuellen Projekt gibt es 176 jsdom-bezogene Tests

Ich verwende derzeit Jest 26.0.1 und das Folgende funktioniert für mich:

1. Verwenden Sie window.location.assign(url) , um die Fensterposition zu ändern.

2. Verspotten Sie das Standortobjekt wie folgt (beachten Sie, dass das Löschen und Neuaufbauen des Objekts nicht zuerst zu dem nicht implementierten Fehler in der angegebenen Version von Jest führt und früher denke ich, auch Object.defineProperty funktioniert nicht und führt immer noch zu dem Error):

delete window.location;
window.location = {
    href: '',
    hostname: '',
    pathname: '',
    protocol: '',
    assign: jest.fn()
};

1. Behaupten mit:

expect(window.location.assign).toBeCalledWith(url);

Es wäre wirklich schön, wenn es uns Scherze erlauben würde, den Standort ohne all diese ständigen Probleme und Änderungen leicht zu verspotten. Ich habe vorher lange Zeit ohne Probleme nur window.location.assign = jest.fn() , dann habe ich von v24 aktualisiert und jetzt dies.

Gibt es einen guten Grund dafür, dass die Fenster-APIs gesperrt/eingefroren wurden?
Es scheint, dass dies die Barriere für Leute ist, die versuchen, die Navigation zu umgehen, die nicht implementiert wird.

Wenn nicht, können wir sie einfach nicht einfrieren? Ich glaube nicht, dass selbst Browser so streng sind, Sie daran zu hindern, Fensterobjekte zu ändern.

Wenn Sie ein Beispiel dafür haben, dass sich jsdom anders als Browser verhält, reichen Sie bitte ein Problem gemäß der Problemvorlage ein (einschließlich jsbin oder ähnlichem, das das Browserverhalten zeigt).

Läuft jemand anderes während Jest-Tests, die ein Klickereignis auf ein Ankerelement mit einem href auslösen, auf das gleiche Error: Not implemented: navigation (except hash changes) href ? Für meine Tests spioniere ich eine Funktion aus, die onClick aufgerufen wird, und mache Aussagen dazu, sodass ich tatsächlich das Click-Ereignis für das Ankerelement auslösen muss.

Die obigen Lösungen zum Verspotten von window.location funktionieren für mich, wenn ich explizit window.location.replace oder window.location.assign , aber helfen nicht in diesem Fall, in dem die Navigation von einem Ankerelement ausgeht angeklickt wird.

Irgendwelche Lösungsideen? Vielen Dank!

Wie würden Sie diesen Code in einem Browser testen? Denken Sie daran, dass das Klicken auf den Link im Browser Ihre gesamte Seite wegblasen und alle Testergebnisse verwerfen würde. Was auch immer Sie tun würden, um dies zu verhindern, wird auch die viel weniger dramatische Warnmeldung verhindern, die jsdom an die Konsole ausgibt.

In meiner Situation hat das Projekt Jest von der 23- auf die 26-Version aktualisiert.
Ich hatte ein Problem mit location.search . Hatte den gleichen Fehler Error: Not implemented: navigation .
Das von mir getestete Modul ruft Werte von Suchabfrageparametern ab.
Die nächste Implementierung hat bei mir funktioniert:

beforeAll(() => {
  delete window.location;
  window.location = new URL('your URL');
})

afterAll(() => {
  window.location.search = '';
})

@mattcphillips hast du herausgefunden, wie man das beheben kann? ich habe auch ein problem beim klicken

@Sabrinovsky Nein, am Ende habe ich nur ein Skript zu setupFiles in meiner Witzkonfiguration hinzugefügt, das die Konsolenfehler schluckt, die von der jsdom-Navigation kommen, damit sie unsere Tests nicht überladen. Eher ein Pflaster als alles andere, aber es klang, als wären diese Fehler in unserem Testaufbau zu erwarten.

Hier ist das Skript, das ich vor meinen Tests ausführe:

// There should be a single listener which simply prints to the
// console. We will wrap that listener in our own listener.
const listeners = window._virtualConsole.listeners('jsdomError');
const originalListener = listeners && listeners[0];

window._virtualConsole.removeAllListeners('jsdomError');

// Add a new listener to swallow JSDOM errors that orginate from clicks on anchor tags.
window._virtualConsole.addListener('jsdomError', error => {
  if (
    error.type !== 'not implemented' &&
    error.message !== 'Not implemented: navigation (except hash changes)' &&
    originalListener
  ) {
    originalListener(error);
  }

  // swallow error
});

Das hat bei mir funktioniert.

delete global.window.location
global.window.location = { href: 'https://test.com' }

Das hat bei mir funktioniert

delete window.location
window.location = { assign: jest.fn() }

Wenn Sie TypeError: Cannot assign to read only property 'assign' of object '[object Location]' , verwenden Sie so etwas in Ihrem jest.setup.ts :

```
global.window = Object.create(window);
Object.defineProperty(window, 'location', {
Wert: {
...Fenster.Position,
},
beschreibbar: wahr,-
});
````