Jest mock document.activeElement

Question

I have a function that uses the DOM

const trap = {
  // ...
  init() {
    if (document.activeElement === this.firstTabStop) {
      return this.lastTabStop.focus();
    }
  }
}

module.exports = trap.init;

I try to mock document.activeElement but it throws an error.

global.document.activeElement = mockFirstTabStop;

mockFirstTabStop is just function mock, but whatever I put there, the error is the same.

TypeError: Cannot set property activeElement of [object Object] which has only a getter

So, how can I test that conditional to expect this.lastTabStop.focus() was called?

Answer 1

The solution is to create a mocked DOM and use it as scenario:

trap.js

const trap = {
  // ...
  init() {
    if (document.activeElement === this.firstTabStop) {
      return this.lastTabStop.focus();
    }
  }
}

module.exports = trap.init;

trap.test.js

const trap = require('./trap.js');

// Mock a DOM to play around
document.body.innerHTML = `
    <div>
        <button id="btn1">btn 1 </button>
        <button id="btn2">btn 2 </button>
        <button id="btn3">btn 3 </button>
    </div>
`;

// Mock Jest function
const mockBtnFocus = jest.fn();
const mockBtnFirst = document.getElementById('btn1');
const mockBtnLast = document.getElementById('btn3');


it('should focus this.lastTabStop when activeElement is this.firstTabStop', () => {
    mockBtnFirst.focus(); // <<< this is what sets document.activeElement
    mockBtnLast.focus = mockBtnFocus;

    // Mock trap context to access `this`
    trap.bind({
        firstTabStop: mockBtnFirst,
        lastTabStop: mockBtnLast,
    });

    expect(mockBtnLast.focus).toHaveBeenCalledTimes(1);
});

Answer 2

An alternative solution:

const element = document.createElement('div');

Object.defineProperty(document, 'activeElement', { value: element, writable: false });