Comment simuler window.location.href avec Jest + Vuejs ?

Question

Actuellement, je suis en train d'implémenter un test unitaire pour mon projet et il y a un fichier qui contenait window.location.href .

Je veux faire une simulation pour tester et voici mon exemple de code :

it("method A should work correctly", () => {
      const url = "http://dummy.com";
      Object.defineProperty(window.location, "href", {
        value: url,
        writable: true
      });
      const data = {
        id: "123",
        name: null
      };
      window.location.href = url;
      wrapper.vm.methodA(data);
      expect(window.location.href).toEqual(url);
    });

Mais je reçois cette erreur :

TypeError: Cannot redefine property: href
        at Function.defineProperty (<anonymous>)

J'ai essayé quelques solutions mais je ne l'ai pas résolu. J'ai besoin de quelques conseils pour m'aider à me sortir de ce mauvais pas. Aidez-moi, s'il vous plaît.

Answer 1

Vous pouvez essayer :

global.window = Object.create(window);
const url = "http://dummy.com";
Object.defineProperty(window, 'location', {
  value: {
    href: url
  }
});
expect(window.location.href).toEqual(url);  

Jetez un coup d'œil à l'Issue Jest pour ce problème :
Question de plaisanterie

Answer 2

Mise à jour 2020

---

Base

El Objet URL a une grande partie des mêmes fonctionnalités que le Objet de l'emplacement . En d'autres termes, il comprend des propriétés telles que pathname , search , hostname etc. Ainsi, dans la plupart des cas, vous pouvez procéder comme suit :

delete window.location
window.location = new URL('https://www.example.com')

Avancé

Vous pouvez également simuler Méthodes de localisation dont vous pourriez avoir besoin et qui n'existent pas sur l'interface URL :

const location = new URL('https://www.example.com')
location.assign = jest.fn()
location.replace = jest.fn()
location.reload = jest.fn()

delete window.location
window.location = location

Answer 3

J'ai résolu ce problème en ajoutant writable: true et le déplacer vers beforeEach

Voici mon exemple de code :

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

Answer 4

Solution pour 2019 à partir de GitHub :

delete global.window.location;
global.window = Object.create(window);
global.window.location = {
  port: '123',
  protocol: 'http:',
  hostname: 'localhost',
};

Answer 5

Le mieux est probablement de créer un nouveau URL de sorte qu'il analyse votre chaîne de caractères comme suit location.href et met donc à jour toutes les propriétés de l'élément location comme .hash , .search , .protocol etc.

it("method A should work correctly", () => {
  const url = "http://dummy.com/";
  Object.defineProperty(window, "location", {
    value: new URL(url)
  } );

  window.location.href = url;
  expect(window.location.href).toEqual(url);

  window.location.href += "#bar"
  expect(window.location.hash).toEqual("#bar");
});

https://repl.it/repls/VoluminousHauntingFunctions