使用Jest测试deck-shuffle-btn触发shuffleDeck函数失败，求排查

我开发了一个带交互式卡牌组的网站，需要验证点击id为deck-shuffle-btn的按钮时，shuffleDeck函数会执行。但当前测试显示按钮点击后卡牌组未洗牌，测试失败，怀疑问题出在测试实现上。

现有代码 #

事件监听逻辑（script.js） #

document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("deck-shuffle-btn").addEventListener("click", () => shuffleDeck(deck.shuffledDeck));
});

我已定义deck对象（包含卡牌组）、deckShuffle()函数（重排卡牌顺序）、resetDeck()函数（重置默认值后洗牌），按钮点击本应触发deckShuffle()。

测试代码（script.test.js） #

describe("Test deckShuffle function when using the deck-shuffle-btn element", () => {
    beforeAll(() => {
        // 模拟包含单个按钮的HTML结构
        document.body.innerHTML =
            '<div>' + +
            '<button id="deck-shuffle-btn"></button>' +
            '</div>';
        // 重置deck对象
        resetDeck();
        // 复制初始卡组用于对比
        testElement = [...deck.shuffledDeck];
        // 触发按钮点击
        $("#deck-shuffle-btn").trigger("click");
    });
    test("洗牌后卡组顺序与初始不同", () => {
        expect(deck.shuffledDeck).not.toEqual(testElement);
    });
})

测试失败的可能原因及修复方案 #

• DOMContentLoaded事件未触发：测试中直接设置DOM结构后，原事件监听绑定在DOMContentLoaded上，但该事件在测试环境启动时已触发，导致按钮的点击监听器未被绑定。
  修复：在设置完document.body.innerHTML后，手动触发DOMContentLoaded事件：

  document.dispatchEvent(new Event('DOMContentLoaded'));
  

• HTML字符串拼接错误：测试代码中'<div>' + + '<button...'存在多余的+号，会导致DOM结构解析异常，按钮可能未正确渲染。
  修复：去掉多余的+：

  document.body.innerHTML =
      '<div>' +
      '<button id="deck-shuffle-btn"></button>' +
      '</div>';
  

• jQuery触发点击的兼容性问题：若测试环境未引入jQuery，$("#deck-shuffle-btn").trigger("click")会失效，建议改用原生JS触发点击：

  document.getElementById("deck-shuffle-btn").click();
  

• 函数名拼写不一致：注意到事件监听中调用的是shuffleDeck()，但描述中提到定义的是deckShuffle()，需确认二者是否为同一函数，是否存在拼写错误。

内容的提问来源于stack exchange，提问作者Ben Miles