Jest中的模拟HTML元素

// 假设我们有一个函数，它会在点击按钮时改变某个元素的文本内容
function changeTextOnClick(buttonId, newText) {
  const button = document.getElementById(buttonId);
  if (button) {
    button.addEventListener('click', () => {
      const element = document.getElementById('targetElement');
      if (element) {
        element.textContent = newText;
      }
    });
  }
}

// 测试代码
describe('changeTextOnClick', () => {
  beforeEach(() => {
    // 创建模拟的 DOM 元素
    document.body.innerHTML = `
      <button id="testButton"></button>
      <div id="targetElement">Original Text</div>
    `;
  });

  it('should change text on button click', () => {
    const button = document.getElementById('testButton');
    const targetElement = document.getElementById('targetElement');

    // 触发点击事件
    button.click();

    // 验证文本是否已更改
    expect(targetElement.textContent).toBe('New Text');
  });
});

describe('changeTextOnClick', () => {
  beforeEach(() => {
    document.body.innerHTML = `
      <button id="testButton"></button>
      <div id="targetElement">Original Text</div>
    `;
  });

  it('should change text on button click', () => {
    const button = document.getElementById('testButton');
    const targetElement = document.getElementById('targetElement');

    // 使用 jest.spyOn 监听事件
    const listenerSpy = jest.spyOn(button, 'addEventListener');

    changeTextOnClick('testButton', 'New Text');

    expect(listenerSpy).toHaveBeenCalledWith('click', expect.any(Function));

    // 触发点击事件
    button.click();

    // 验证文本是否已更改
    expect(targetElement.textContent).toBe('New Text');
  });
});