How to mock window.location.href with Jest in React?

When conducting frontend testing, especially with testing frameworks like Jest, we often need to mock global objects such as window.location.href to simulate and test various scenarios across different test cases. Jest offers several approaches to achieve this.

Method One: Using Object.defineProperty

This approach is straightforward and can be applied within specific test cases or in global test setup. By using Object.defineProperty, we can simulate the behavior of window.location.href.

javascript
beforeEach(() => {
  // Set up the mock for window.location.href before each test case
  Object.defineProperty(window, 'location', {
    value: {
      href: 'initial mock URL'
    },
    writable: true
  });
});

test('Test window.location.href change', () => {
  // Simulate window.location.href being assigned a new value
  window.location.href = 'http://example.com';
  expect(window.location.href).toBe('http://example.com');
});

Method Two: Using jest.spyOn

If you prefer not to modify the window.location object itself but only want to monitor or mock the behavior of the href property, jest.spyOn is suitable.

javascript
beforeEach(() => {
  // Monitor the assignment behavior of window.location.href using jest.spyOn
  jest.spyOn(window.location, 'href', 'set');
});

test('Monitor window.location.href modification', () => {
  window.location.href = 'http://example.com';
  // Verify that the href was successfully set
  expect(window.location.href.set).toHaveBeenCalledWith('http://example.com');
});

Method Three: Overriding the entire location object

When you need to mock additional location properties, consider overriding the entire location object.

javascript
beforeEach(() => {
  // Save the original location object
  const originalLocation = window.location;
  delete window.location;
  window.location = { ...originalLocation, href: 'initial mock URL' };
});

afterEach(() => {
  // Restore the original location object after tests
  window.location = originalLocation;
});

test('Verify window.location mock and restoration', () => {
  expect(window.location.href).toBe('initial mock URL');
  window.location.href = 'http://example.com';
  expect(window.location.href).toBe('http://example.com');
});

When using these methods, choose the most appropriate one based on your specific requirements and context. Typically, simpler approaches are sufficient for most testing scenarios. When writing tests, maintaining code simplicity and maintainability is crucial.