Jsdom: Kesalahan: Tidak diterapkan: navigasi

Saya mendapatkan kesalahan ini juga

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 tidak mendukung navigasi, jadi pengaturan window.location.href atau yang serupa akan memberikan pesan ini. Saya tidak yakin apakah Jest hanya menyembunyikan pesan-pesan ini sebelumnya, atau apa.

Ini mungkin sesuatu yang harus Anda perbaiki dalam pengujian Anda, karena itu berarti bahwa jika Anda menjalankan pengujian tersebut di browser, pelari pengujian akan benar-benar terpesona saat Anda menavigasi halaman ke URL baru, dan Anda tidak akan pernah melihat pengujian apa pun hasil. Di jsdom, kami hanya menampilkan pesan ke konsol, yang dapat Anda abaikan jika Anda mau, atau Anda dapat memperbaiki pengujian Anda agar berfungsi lebih baik di lebih banyak lingkungan.

Bagaimanapun, saya ingin menambahkan lebih banyak dokumentasi tentang ini untuk orang-orang, jadi saya akan membiarkan masalah ini terbuka untuk dilacak melakukannya.

Benar-benar mengerti apa yang Anda katakan. Pembaruan Jest 22 baru-baru ini beralih dari JSDOM 9 ke 11 IIRC, jadi perilaku di 9.x mungkin sangat berbeda.

Selain itu, saya akan senang melihat navigasi diimplementasikan di JSDOM dengan semacam flag untuk membuatnya tidak bisa memuat halaman yang berbeda (dalam semangat yang mirip dengan pushstate HTML5.) Pustaka ini sangat umum digunakan untuk tujuan pengujian jadi, meskipun mungkin permintaan yang unik, itu akan sering digunakan.

Saya tidak berpikir kita harus menambahkan tanda yang membuat pengujian Anda berjalan berbeda di jsdom daripada di browser. Kemudian barang-barang Anda bisa rusak di browser (misalnya itu bisa mengarahkan pengguna ke beberapa halaman lain, alih-alih melakukan tindakan yang dilihat pengujian Anda terjadi) dan Anda bahkan tidak akan menyadarinya!

Nah dalam hal ini tidak akan melakukan sesuatu yang berbeda, selain tidak membongkar konteks halaman saat ini. Saya masih berharap window.location.href diperbarui, dll.

@domenic Saya mengalami masalah yang sama dan saya bertanya-tanya apakah ada semacam praktik terbaik untuk mengatur JSDOM dengan aplikasi yang menetapkan window.location . Dari apa yang saya tahu JSDOM melempar kesalahan ketika mencoba mengatur window.location dan mencatat kesalahan ketika mencoba mengatur window.location.href - namun saya membaca di mdn bahwa keduanya harus sinonim. Haruskah saya memperbarui lokasi dengan cara lain yang lebih mudah di-stub?
Terima kasih atas bantuannya

Izinkan saya untuk memposting jawaban atas pertanyaan saya sendiri 😁
Saya cukup mengganti penggunaan window.location = url; dan window.location.href = url; dengan

window.location.assign(url);

dan kemudian dalam pengujian saya, saya melakukan:

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

Bekerja seperti pesona - semoga bisa membantu orang lain 👍

Setuju ini harus bekerja di luar kotak. Kami mengejek window.location di FB, tetapi itu bertentangan dengan implementasi History jsdom.

Sebagai tim kecil, kami pasti akan menghargai bantuan dari proyek besar yang bergantung pada kami untuk mengimplementasikan navigasi dengan benar di jsdom.

Jika ada yang tertarik, https://github.com/jsdom/jsdom/pull/1913 bisa menjadi tempat yang baik untuk memulai.

Solusi yang mungkin adalah mengandalkan injeksi ketergantungan/tiruan untuk objek window dalam pengujian unit.

Sesuatu seperti:

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

Ini tidak ideal tetapi seperti yang dikatakan oleh @domenic :

Ini mungkin sesuatu yang harus Anda perbaiki dalam pengujian Anda, karena itu berarti bahwa jika Anda menjalankan pengujian tersebut di browser, pelari pengujian akan benar-benar terpesona saat Anda menavigasi halaman ke URL baru

Untuk saat ini kami hidup dengan ini dan ya kami mengubah kode implementasi kami untuk tes yang dianggap praktik buruk tetapi kami juga tidur nyenyak di malam hari!

Selamat menguji

Solusi @hontas membantu:

Saya memang menggunakan window.location.assign(Config.BASE_URL); dalam kode saya.

Dan inilah tesnya:

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

window.location.assign.mockClear();

Masalah yang sama, saya menggunakan window.location.search = foo; dalam kode saya dan saya ingin mengujinya menggunakan jsdom (dan lelucon)

PS: Terkait dengan https://github.com/facebook/jest/issues/5266

Setelah memperbarui ke jsdom 12.2.0 mendapat kesalahan:
TypeError: Tidak dapat mendefinisikan ulang properti: tetapkan
pada const assign = sinon.stub(document.location, 'assign')
bagaimana memperbaikinya?

@yuri-sakharov

Setelah memperbarui ke jsdom 12.2.0 mendapat kesalahan:
TypeError: Tidak dapat mendefinisikan ulang properti: tetapkan
pada const assign = sinon.stub(document.location, 'assign')
bagaimana memperbaikinya?

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

perlu:

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

anda perlu mengganti document dengan window

Saya memiliki fungsi berikut:

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

agar saya dapat menguji apakah itu berfungsi, saya menyuntikkan langsung 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 = '';
  });

Tapi saya mendapatkan kesalahan ini.

Saya tidak berharap jsdom untuk sepenuhnya mengimplementasikan navigasi tetapi setidaknya menambahkan kunci dan mengejek fungsinya.

Saya bingung mengapa saya terus mendapatkan kesalahan ini, saya hanya ingin dapat mengatur nilainya.

@nickhallph
Saya menggantinya menjadi window.location seperti yang Anda tulis tetapi hasilnya sama
TypeError: Cannot redefine property: assign
Ada ide?

Masalah yang sama seperti @yuri-sakharov menjalankan moka.

Sepertinya saya tidak bisa mengganti/memperbarui/mengejek atau melakukan apa pun dengan window.location.* . Satu-satunya cara saya melihat ini adalah membuat tiruan window.location kustom saya sendiri dan mengubah seluruh basis kode untuk bergantung padanya.

Solusi @hontas membantu:

Saya memang menggunakan window.location.assign(Config.BASE_URL); dalam kode saya.

Dan inilah tesnya:

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

window.location.assign.mockClear();

Solusi @zxiest versi Jest dari @hontas ' tidak bekerja untuk saya, tetapi ini berhasil:

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

Jika Anda tidak ingin mengubah kode Anda untuk menggunakan location.assign - ini tampaknya berfungsi dengan JSDom 11 dan 13 (meskipun ada kemungkinan JSDom akan merusaknya di masa mendatang...)

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

Jawaban terakhir berhasil untuk saya, tetapi saya harus mendefinisikan replace :

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

Semoga membantu.

Saya mendapatkan TypeError: Cannot redefine property: assign with sinon 7.2.3 dan jsdom 13.2.0. Tidak tahu mengapa ini bekerja untuk beberapa orang dan tidak untuk orang lain?

Inilah yang berhasil untuk saya:

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

Kami menggunakan pushState untuk membuatnya berfungsi

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

Ini adalah situasi yang sulit. JSDOM tidak sepenuhnya mendukung navigasi (selain remah roti) dan JSDOM tidak mengizinkan kita untuk meniru navigasi. Hasil akhirnya adalah saya tidak dapat menulis tes yang pada akhirnya mencoba memicu navigation .

Jika JSDOM benar-benar belajar menavigasi (saya bahkan tidak yakin apa artinya), mungkin saya bisa menegaskan tentang berada di halaman yang sesuai. Namun, untuk kasus penggunaan pengujian saya, menegaskan navigasi dipicu, daripada benar-benar dilakukan, jauh lebih bersih/lebih cepat. Itu yang secara historis saya lakukan saat menguji menggunakan jsdom dan sekarang rusak.

Izinkan saya untuk memposting jawaban atas pertanyaan saya sendiri
Saya cukup mengganti penggunaan window.location = url; dan window.location.href = url; dengan

window.location.assign(url);

dan kemudian dalam pengujian saya, saya melakukan:

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

Bekerja seperti pesona - semoga bisa membantu orang lain

Itu jika Anda memiliki kontrol ke url target, tetapi bagaimana jika Anda memuat situs web google atau Instagram. atau situs apa saja? bagaimana Anda bisa memecahkan masalah ini?

Berdasarkan jawaban dari @chrisbateman saya berhasil

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

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

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

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

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

Saya memecahkan masalah ini menggunakan konfigurasi ini. Saya ingin menguji pengalihan untuk url hash:

    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 terima kasih, solusi itu bekerja dengan baik.

Mungkin ini bukan praktik yang baik, tetapi kami memiliki beberapa tes, yang bergantung pada lokasi/Host/nama host dan properti lokasi lainnya. Jadi mengejek lokasi seperti yang kami inginkan dan memulihkan setelah itu berhasil untuk saya.

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

Inilah yang berhasil untuk saya:

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

itu tidak bekerja pada CI seperti circleci

Solusi @hontas membantu:

Saya memang menggunakan window.location.assign(Config.BASE_URL); dalam kode saya.

Dan inilah tesnya:

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

window.location.assign.mockClear();

Terima kasih sobat, Anda telah menyelamatkan saya sehari! :)

Dalam kasus saya, saya sedang menguji string kueri, dan karena subjek spesifikasi saya adalah string kueri itu sendiri, saya tidak ingin melewatinya, tetapi saya senang untuk menghentikannya. dalam kasus saya ini bekerja dengan baik:

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

Perhatikan bahwa di sini tidak masalah apa judul jendelanya dan juga tidak masalah itu /test.html (yang tidak nyata), yang penting adalah string kueri diambil dengan benar ( ini berlalu)

Masalah dengan contoh adalah bahwa metode dan getter tidak digunakan. Apa yang saya lakukan pada dasarnya adalah mengganti objek Lokasi dengan objek URL. URL memiliki semua properti Lokasi (pencarian, host, hash, dll).

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

        // ...
    });
});

Saya mendapatkan kesalahan ini juga

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)

Solusi @hontas membantu:

Saya memang menggunakan window.location.assign(Config.BASE_URL); dalam kode saya.

Dan inilah tesnya:

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

window.location.assign.mockClear();

Ini berhasil untuk saya, terima kasih! Namun saya harus menggunakan argumen done dari jest test(), jika tidak, saya tidak akan yakin bahwa ekspektasi telah dievaluasi dan tes mungkin telah berakhir dengan sukses:

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

window.location.assign.mockClear();
}

@hontas Tidak berfungsi untuk saya :( Tidak dapat menulis ulang menetapkan/mengganti properti

Apakah ada cara untuk mengetahui tes mana yang memicu pesan "Tidak diterapkan: navigasi"? Saya memiliki rangkaian 43 tes - kesalahan hanya ditampilkan sekali dan terus memantul. Saya tidak tahu tes mana yang harus diperbaiki!!! Jejak tumpukan tidak memberi saya indikasi pelakunya:

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 Tidak berfungsi untuk saya :( Tidak dapat menulis ulang menetapkan/mengganti properti

Seperti yang saya pahami, lelucon mengubah sesuatu di versi baru ("jest": "^26.0.1") jadi ini berfungsi sekarang:

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

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

Apakah ada cara untuk mengetahui tes mana yang memicu pesan "Tidak diterapkan: navigasi"? Saya memiliki rangkaian 43 tes - kesalahan hanya ditampilkan sekali dan terus memantul. Saya tidak tahu tes mana yang harus diperbaiki!!! Jejak tumpukan tidak memberi saya indikasi pelakunya:

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)

Sulit untuk mengetahui dari mana tes yang tidak diimplementasikan kesalahannya.

Saya menambahkan breakpoint pada node_modules/jsdom/lib/jsdom/browser/not-implemented.js:12 , menjalankan sesi debug dan menunggu hingga breakpoint tercapai. Baru kemudian saya melihat tes mana yang harus saya tingkatkan untuk menghilangkan pesan ini.

Terkadang dibutuhkan 2-3 menit sampai pelari mencapai tes dengan masalah.

PS: Dalam proyek saya saat ini ada 176 tes terkait jsdom

Saat ini saya menggunakan Jest 26.0.1 dan di bawah ini berfungsi untuk saya:

1. Gunakan window.location.assign(url) untuk mengubah lokasi jendela.

2. Mengejek objek lokasi sebagai berikut (perhatikan bahwa tidak menghapus dan membangun kembali objek terlebih dahulu masih menghasilkan kesalahan yang tidak diterapkan dalam versi Jest yang dicatat dan sebelumnya saya pikir, juga Object.defineProperty tidak berfungsi dan masih menghasilkan kesalahan):

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

1. Tegaskan dengan:

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

Akan sangat menyenangkan jika lelucon memungkinkan kita untuk dengan mudah mengejek lokasi tanpa semua masalah dan perubahan konstan ini. Saya sebelumnya hanya menggunakan window.location.assign = jest.fn() tanpa masalah untuk waktu yang lama, kemudian saya memutakhirkan dari v24 dan sekarang ini.

Apakah ada alasan bagus mengapa API Jendela dikunci/dibekukan?
Sepertinya itulah penghalang bagi orang yang mencoba untuk mengatasi navigasi yang tidak diterapkan.

Jika tidak, bisakah kita tidak membekukannya? Saya tidak berpikir bahkan browser seketat itu untuk mencegah Anda mengubah objek jendela.

Jika Anda memiliki contoh jsdom yang berperilaku berbeda dari browser, harap ajukan masalah dengan mengikuti template masalah (termasuk jsbin atau yang serupa yang menunjukkan perilaku browser).

Apakah ada orang lain yang mengalami Error: Not implemented: navigation (except hash changes) selama tes Jest yang mengaktifkan acara klik pada elemen jangkar dengan href ? Untuk pengujian saya, saya memata-matai fungsi yang dipanggil onClick dan membuat pernyataan tentang itu jadi saya harus benar-benar mengaktifkan acara klik pada elemen jangkar.

Solusi di atas terkait dengan mengejek window.location berfungsi untuk saya di mana saya secara eksplisit memanggil window.location.replace atau window.location.assign , tetapi tidak membantu untuk kasus ini di mana navigasi berasal dari elemen jangkar sedang diklik.

Ada ide tentang solusi? Terima kasih!

Bagaimana Anda menguji kode itu di browser? Ingatlah bahwa di browser mengklik tautan akan menerbangkan seluruh halaman Anda dan membuang hasil pengujian apa pun. Jadi apa pun yang akan Anda lakukan untuk mencegahnya, juga akan mencegah pesan peringatan yang jauh lebih dramatis dari jsdom keluar ke konsol.

Dalam situasi saya, proyek memutakhirkan Jest dari versi 23 menjadi 26.
Saya punya masalah dengan location.search . Memiliki kesalahan yang sama Error: Not implemented: navigation .
Modul yang saya uji mendapatkan nilai parameter kueri penelusuran.
Implementasi selanjutnya berhasil untuk saya:

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

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

@mattcphillips sudahkah Anda menemukan cara untuk memperbaikinya? saya juga mengalami masalah saat mengklik

@Sabrinovsky Tidak, saya akhirnya hanya menambahkan skrip ke setupFiles di konfigurasi lelucon saya yang akan menelan kesalahan konsol yang berasal dari navigasi jsdom sehingga mereka tidak mengacaukan pengujian kami. Lebih dari bandaid daripada apa pun, tetapi sepertinya kesalahan ini diharapkan dalam pengaturan pengujian kami.

Inilah skrip yang saya jalankan sebelum pengujian saya:

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

Ini berhasil untuk saya.

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

Ini berhasil untuk saya

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

Jika Anda mendapatkan TypeError: Cannot assign to read only property 'assign' of object '[object Location]' , maka gunakan sesuatu seperti ini di jest.setup.ts :

```
global.window = Object.create(jendela);
Object.defineProperty(jendela, 'lokasi', {
nilai: {
...jendela.lokasi,
},
dapat ditulis: benar,
});
````