Jsdom: エラー：実装されていません：ナビゲーション

私もこのエラーが発生します

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はナビゲーションをサポートしていないため、window.location.hrefなどを設定するとこのメッセージが表示されます。 Jestが以前にこれらのメッセージを抑制していたのか、それとも何なのかはわかりません。

これはおそらくテストで修正する必要があるものです。ブラウザでこれらのテストを実行している場合、ページを新しいURLに移動すると、テストランナーが完全に吹き飛ばされ、テストが表示されなくなるためです。結果。 代わりにjsdomでは、コンソールにメッセージを出力するだけですが、必要に応じて無視することも、テストを修正してより多くの環境でより適切に機能するようにすることもできます。

とにかく、私は人々のためにこれに関するドキュメントをもっと追加したいので、そうすることを追跡するためにこの問題を開いたままにしておきます。

あなたが言っていることを完全に理解してください。 最近のJest22の更新はJSDOM9から11IIRCに移行したため、9.xでの動作はかなり異なっていた可能性があります。

それはさておき、別のページをロードするという点で操作を行わないようにするために、何らかのフラグを使用してJSDOMにナビゲーションを実装することを望んでいます（HTML5プッシュステートと同様の精神で）。ライブラリはテスト目的で非常に一般的に使用されますしたがって、おそらく風変わりな要求ですが、頻繁に使用されます。

jsdomとブラウザでテストを異なる方法で実行するフラグを追加する必要はないと思います。 そうすると、ブラウザでコンテンツが壊れて（たとえば、テストで発生していると見なされるアクションを実行する代わりに、ユーザーを他のページにリダイレクトする可能性があります）、気付かない可能性があります。

この場合、現在のページコンテキストをアンロードしないことを除いて、何も変わりません。 私はまだwindow.location.hrefが更新されることを期待しています。

@domenic同じ問題が発生していて、 window.locationを設定するアプリでJSDOMをセットアップするための何らかのベストプラクティスがあるかどうか疑問に思っていました。 私の知る限り、JSDOMはwindow.locationを設定しようとするとエラーをスローし、 window.location.hrefを設定しようとするとエラーをログに記録しますが、mdnでこの2つは同義語である必要があると読んでいます。 スタブしやすい別の方法で場所を更新する必要がありますか？
助けてくれてありがとう😅

自分の質問への回答を投稿させてください😁
window.location = url;とwindow.location.href = url;の使用法を単純に置き換えます

window.location.assign(url);

そして、私のテストでは、次のことを行いました。

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

魅力のように機能します-それが他の誰かの助けになることを願っています👍

これは箱から出してすぐに機能するはずだということに同意します。 FBでwindow.locationをモックしますが、それはjsdomのHistory実装と競合します。

小さなチームとして、jsdomでナビゲーションを適切に実装するために私たちに依存しているより大きなプロジェクトからの助けを確かに感謝します。

興味のある方は、 https：//github.com/jsdom/jsdom/pull/1913から始めるとよいでしょう。

考えられる解決策は、単体テストでwindowオブジェクトの依存性注入/モックに依存することです。

何かのようなもの：

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

これは理想的ではありませんが、 @ domenicが言った

これはおそらくテストで修正する必要があるものです。ブラウザでこれらのテストを実行している場合、ページを新しいURLに移動すると、テストランナーが完全に吹き飛ばされることを意味します。

今のところ私たちはこれと一緒に暮らしています、そしてはい、私たちは悪い習慣と考えられているテストの実装コードを変更しますが、夜もよく眠ります！

ハッピーテスト

@hontasのソリューションが役立ちました：

コードでwindow.location.assign(Config.BASE_URL);を使用しました。

そして、これがテストです：

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

window.location.assign.mockClear();

同じ問題です。コードでwindow.location.search = foo;していますが、jsdom（およびjest）を使用してテストしたいと思います🤔

PS： https ：

jsdom 12.2.0にアップデートした後、エラーが発生しました：
TypeError：プロパティを再定義できません：割り当て
const assign = sinon.stub(document.location, 'assign')
それを修正する方法は？

@ yuri-sakharov

jsdom 12.2.0にアップデートした後、エラーが発生しました：
TypeError：プロパティを再定義できません：割り当て
const assign = sinon.stub(document.location, 'assign')
それを修正する方法は？

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

する必要があります：

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

documentをwindowに置き換える必要があります

私は次の機能を持っています

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}$/
  )
);

それが機能することをテストできるようにするために、 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 = '';
  });

しかし、私はこのエラーが発生しています。

jsdomがナビゲーションを完全に実装することは期待していませんが、少なくともキーを追加して関数をモックします。

なぜこのエラーが発生し続けるのか混乱しています。値を設定できるようにしたいだけです。

@nickhallph
あなたが書いたように私はそれをwindow.locationに置き換えましたが、結果は同じです
TypeError: Cannot redefine property: assign
何か案は？

@ yuri-sakharovがモカを実行しているのと同じ問題。

決してwindow.location.*置き換え/更新/モックしたり、何かをしたりできるようには見えません。 これを回避する唯一の方法は、独自のカスタムwindow.locationモックを作成し、それに依存するようにコードベース全体を変更することです。

@hontasのソリューションが役立ちました：

コードでwindow.location.assign(Config.BASE_URL);を使用しました。

そして、これがテストです：

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

window.location.assign.mockClear();

@zxiestのJestバージョンの@hontas 'ソリューションは私には機能しませんでしたが、これは機能しました：

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

location.assignを使用するようにコードを変更したくない場合-これはJSDom 11および13で機能するようです（ただし、JSDomが将来それを壊す可能性があります...）

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

最後の答えは私にとってはうまくいきましたが、 replaceを定義する必要がありました：

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

それが役に立てば幸い。

TypeErrorが発生します：プロパティを再定義できません：sinon7.2.3およびjsdom13.2.0で割り当てます。 なぜこれが一部の人に効果があり、他の人には効果がないのか分かりませんか？

これは私のために働いたものです：

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

これを機能させるためにpushStateを使用しました

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

これは難しい状況です。 JSDOMは（パンくずリスト以外の）ナビゲーションを完全にはサポートしておらず、JSDOMではナビゲーションをモックアウトすることはできません。 その結果、最終的にナビゲーションをトリガーしようとするテストを作成できなくなります。

JSDOMがナビゲートすることを学んだ場合（それが何を意味するのかさえわかりません）、適切なページにいることについて主張できるかもしれません。 ただし、私のテストユースケースでは、ナビゲーションが実際に実行されるのではなく、トリガーされたと主張する方がはるかにクリーンで高速です。 これは、jsdomを使用してテストするときに私が歴史的に行ってきたことですが、現在は壊れています。

自分の質問に対する回答を投稿させてください
window.location = url;とwindow.location.href = url;の使用法を単純に置き換えます

window.location.assign(url);

そして、私のテストでは、次のことを行いました。

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

魅力のように機能します-それが他の誰かの助けになることを願っています

ターゲットURLを制御できる場合はそうですが、GoogleまたはInstagramのWebサイトをロードしている場合はどうでしょうか。 または任意のウェブサイト？ この問題をどのように解決できますか？

@chrisbatemanからの回答に基づいて、私はこれをJest環境で機能させることができました。 Jestを使用している人のために、ここに私の回避策があります：

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

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

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

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

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

この設定を使用してこの問題を解決しました。 ハッシュURLのリダイレクトをテストしたかった：

    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ありがとう、そのソリューションはうまくいきました。

たぶんそれは良い習慣ではありませんが、いくつかのテストがあり、それらはlocation / host / hostnameと他のlocationプロパティに依存しています。 だから、私たちが望むように場所をあざけり、後で復元することは私のために働いた。

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
  });
});

これは私のために働いたものです：

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

circleciのようなCI機能しません

@hontasのソリューションが役立ちました：

コードでwindow.location.assign(Config.BASE_URL);を使用しました。

そして、これがテストです：

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

window.location.assign.mockClear();

おかげで仲間、あなたは私を一日救ってくれました！ :)

私の場合は、クエリ文字列をテストしていますし、私のスペックの主題は、クエリ文字列そのものであることから、私はそれをバイパスにしたくないが、私はそれをスタブに満足しています。 私の場合、これはうまくいきました：

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

ここでは、ウィンドウのタイトルが何であるかは関係なく、 /test.html （これは実際ではありません）であるかどうかも関係ありません。重要なのは、クエリ文字列が正しくフェッチされることだけです（これは合格です）

例の問題は、メソッドとゲッターが使用されていないことです。 私がやっていることは、基本的にLocationオブジェクトをURLオブジェクトに置き換えることです。 URLには、場所のすべてのプロパティ（検索、ホスト、ハッシュなど）があります。

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');

        // ...
    });
});

私もこのエラーが発生します

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)

@hontasのソリューションが役立ちました：

コードでwindow.location.assign(Config.BASE_URL);を使用しました。

そして、これがテストです：

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

window.location.assign.mockClear();

これは私のために働いた、ありがとう！ ただし、jest test（）のdone引数を使用する必要がありました。そうしないと、期待値が評価され、テストが正常に終了したかどうかがわかりません。

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

window.location.assign.mockClear();
}

@hontasは私には機能しません:(割り当て/置換プロパティを書き換えることができません

「実装されていません：ナビゲーション」メッセージをトリガーしているテストを見つける方法はありますか？ 私は43のテストのスイートを持っています-エラーは一度だけ表示され、それはバウンドし続けます。 どのテストを修正すればよいかわかりません!!! スタックトレースでは、原因はわかりません。

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は私には機能しません:(割り当て/置換プロパティを書き換えることができません

私が理解しているように、jestは新しいバージョン（ "jest"： "^ 26.0.1"）で何かを変更したので、これは今すぐ機能します：

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

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

「実装されていません：ナビゲーション」メッセージをトリガーしているテストを見つける方法はありますか？ 私は43のテストのスイートを持っています-エラーは一度だけ表示され、それはバウンドし続けます。 どのテストを修正すればよいかわかりません!!! スタックトレースでは、原因はわかりません。

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)

どのテストから実装されていないエラーが発生したかを判断するのは困難です。

node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12にブレークポイントを追加し、デバッグセッションを実行して、ブレークポイントに到達するまで待ちます。 そうして初めて、このメッセージを取り除くためにどのテストを改善する必要があるかがわかります。

ランナーが問題のあるテストに到達するまでに2〜3分かかる場合があります。

PS：私の現在のプロジェクトには、176のjsdom関連のテストがあります

私は現在Jest 26.0.1を使用していますが、以下が機能します。

1. window.location.assign(url)を使用して、ウィンドウの場所を変更します。

2. 次のようにロケーションオブジェクトをモックします（最初にオブジェクトを削除して再構築しないと、前述のバージョンのJestで実装されていないエラーが発生することに注意してください。また、 Object.defineProperty機能せず、エラー）：

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

1. アサート：

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

冗談が私たちにこれらの絶え間ない問​​題や変更のすべてなしで簡単に場所をあざけることを許してくれたら本当に素晴らしいでしょう。 以前はwindow.location.assign = jest.fn()だけを問題なく使用していましたが、v24からアップグレードしました。

Window APIがロック/フリーズされた正当な理由はありますか？
それが、回避策のナビゲーションが実装されていないことを試みる人々にとっての障壁のようです。

そうでなければ、私たちはそれらを凍結することはできませんか？ ブラウザでさえ、ウィンドウオブジェクトの変更を防ぐのにそれほど厳格ではないと思います。

jsdomの動作がブラウザと異なる例がある場合は、問題テンプレートに従って問題を報告してください（jsbinまたは同様のブラウザの動作を示すものを含む）。

hrefアンカー要素でクリックイベントを発生させるJestテスト中に同じError: Not implemented: navigation (except hash changes)に遭遇する人は他にいますか？ 私のテストでは、 onClickと呼ばれる関数をスパイし、それについてアサーションを作成しているので、アンカー要素で実際にクリックイベントを発生させる必要があります。

window.locationモックに関連する上記の解決策は、明示的にwindow.location.replaceまたはwindow.location.assign呼び出している場合に機能しますが、ナビゲーションがアンカー要素から発生しているこの場合には役立ちませんクリックされています。

ソリューションに関するアイデアはありますか？ ありがとう！

そのコードをブラウザでどのようにテストしますか？ ブラウザでリンクをクリックすると、ページ全体が吹き飛ばされ、テスト結果が破棄されることに注意してください。 したがって、それを防ぐために何をするにしても、jsdomがコンソールに出力するそれほど劇的ではない警告メッセージも防ぎます。

私の状況では、プロジェクトはJestを23から26バージョンにアップグレードしました。
location.search問題がありました。 同じエラーError: Not implemented: navigation 。
テストしたモジュールは、検索クエリパラメータの値を取得します。
次の実装は私のために働いた：

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

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

@mattcphillipsこれを修正する方法を理解しましたか？ クリックしても問題が発生します

@Sabrinovskyいいえ、jest構成のsetupFilesにスクリプトを追加するだけで、jsdomナビゲーションからのコンソールエラーを飲み込んで、テストが乱雑にならないようにしました。 何よりも絆創膏ですが、これらのエラーはテストセットアップで予想されるように聞こえました。

テストの前に実行するスクリプトは次のとおりです。

// 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
});

これは私のために働いた。

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

これは私のために働いた

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

あなたが取得する場合TypeError: Cannot assign to read only property 'assign' of object '[object Location]'その後、あなたにこのようなものを使用して、 jest.setup.ts ：

`` `
global.window = Object.create（window）;
Object.defineProperty（window、 'location'、{
価値： {
... window.location、
}、
書き込み可能：true、
}）;
「」