Javascript Jest mock document.activeElement

我有一个使用DOM的函数

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

module.exports=trap.init

我试图模拟

document.activeElement

，但出现了一个错误

global.document.activeElement = mockFirstTabStop;

mockFirstTabStop

只是函数mock，但不管我在那里放什么，错误都是一样的

TypeError:无法设置只有getter的[object object]的属性activeElement

---

那么，我如何测试该条件以期望调用

this.lastTabStop.focus（）

？

解决方案是创建模拟DOM并将其用作场景：

trap.js

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

module.exports = trap.init;

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

trap.test.js

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

module.exports = trap.init;

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

consttrap=require（'./trap.js'）；
//模仿DOM到处玩
document.body.innerHTML=`
btn 1
btn 2
btn 3
`;
//模拟笑话函数
const mockBtnFocus=jest.fn（）；
const mockBtnFirst=document.getElementById（'btn1'）；
const mockBtnLast=document.getElementById（'btn3'）；
它（'当activeElement为this.firstTabStop'时，应聚焦this.lastTabStop'，（）=>{
mockBtnFirst.focus（）；//错误消息有什么不清楚的地方？如何测试该密码？
返回此.lastTabStop.focus（）；
您可以尝试调用元素的focus方法使其成为活动的方法。@CBroe yh我通过模拟DOM找到了解决方案。您可以查看我自己的答案以了解更多详细信息。