What's a good way to mock window.location?

[uttk-dev]

I tried mocking window.location with vi.stubGlobal(), but it seems that the processing of the previous test affects the results of the later test 😭

example code 👇

import { vi } from "vitest"

describe('window.location mock test', () => {
  const hash = '#test-hash';

  // ✅
  test('is passed', () => {
    expect(window.location.hash).not.toBe(hash);
  });


  // ✅
  test('is passed', () => {
    vi.stubGlobal('location', { hash });
    expect(window.location.hash).toBe(hash);
  });

  // ❌
  test('is failed', () => {
    expect(window.location.hash).not.toBe(hash);
  });
});

How can I mock window.location without affecting other tests?

[sheremet-va]

You need to reset the state in beforeEach hook

[uttk-dev]

Thank you!

[sheremet-va]

There is also a way to do this automatically. Vitest keeps track of your spies, so you can do this:

vi.spyOn(window, 'location', 'get').mockReturnValue({ hash })

If you have restoreMocks enabled in config, then you don't need to do anything. Otherwise you need to call vi.restoreAllMocks in beforeEach hook.

[Kolobok12309]

If you use stubGlobal, for unstub you need unstubAllGlobals
And result code

describe('...', () => {
  beforeEach(() => {
    vi.unstubAllGlobals();
  });
});

[kwojcik]

@sheremet-va What's the best way to do this in browser mode now? vi.spyOn(window, 'location', 'get') throws Cannot redefine property: location.

[is-jonreeves]

@kwojcik is it possible that another test or setup file of yours is already doing something like:

Object.defineProperty(window, 'location', { value: vi.fn() });

If so, you would probably need to avoid it or add the configurable: true option:

Object.defineProperty(window, 'location', { value: vi.fn(), configurable: true });