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

Exemple de travail avec @testing-library/react en 2020 pour window.location.assign :

  afterEach(cleanup)
  beforeEach(() => {
    Object.defineProperty(window, 'location', {
      writable: true,
      value: { assign: jest.fn() }
    })
  })

Answer 2

De nombreux exemples fournis ne reprennent pas les propriétés de l'objet Location original.

Ce que je fais, c'est simplement remplacer l'objet Location (window.location) par URL, car URL contient les mêmes propriétés que l'objet Location comme "href", "search", "hash", "host".

Les Setters et Getters fonctionnent également exactement comme l'objet Location.

Exemple :

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

        console.log(window.location.href);

        // ...
    });
});

Answer 3

Extension de la solution de @jabacchetta pour éviter que ce paramètre ne se répande dans d'autres tests :

describe("Example", () => {
  let location;

  beforeEach(() => {
    const url = "https://example.com";
    location = window.location;
    const mockLocation = new URL(url);
    mockLocation.replace = jest.fn();
    delete window.location;
    window.location = mockLocation;
  });

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

Answer 4

Vous pouvez essayer une aide :

const setURL = url => global.jsdom.reconfigure({url});

describe('Test current location', () => {
  test('with GET parameter', () => {
    setURL('https://test.com?foo=bar');
    // ...your test here
  });
});

Answer 5

Ceci est valable pour Jest + TypeScript + Next.js (au cas où vous utilisez useRoute().push

const oldWindowLocation = window.location;

beforeAll(() => {
  delete window.location;
  window.location = { ...oldWindowLocation, assign: jest.fn() };
});

afterAll(() => {
  window.location = oldWindowLocation;
});