如何在Jest中触发jQuery的$(function(){})入口函数以覆盖代码逻辑

看起来你遇到的核心问题是jQuery的$(function(){})（也就是$(document).ready()的简写）在Jest测试环境里没有自动执行，导致事件绑定逻辑没跑起来，代码自然没被覆盖。结合你的代码，我给你梳理几个关键的修复点和解决方案：

首先提个肉眼可见的小问题：你的业务代码里绑定点击事件的选择器是$(".main #subMain")（注意subMain首字母大写），但测试代码里触发点击用的是$('.main #submain')（小写的submain）——这会导致找不到元素，就算ready函数触发了，点击也不会生效，这个得先改过来。

接下来解决核心的ready函数触发问题：Jest用的jsdom环境虽然模拟了DOM，但不会自动触发DOMContentLoaded事件，而jQuery的$(function())就是靠这个事件（或者检查DOM是否已加载）来执行回调的。这里给你两种靠谱的修复方式：

方案一：手动触发DOMContentLoaded并等待jQuery就绪 #

调整测试代码的执行顺序，先准备好DOM结构，再触发事件，最后用jQuery的ready回调确保业务代码已经执行：

import $ from 'jquery';
// 先引入jQuery，再引入你的业务脚本，确保$已经挂载
require('../file_name.js'); 

describe("Test helppage", () => {
    test("testing click functionality", (done) => {
        // 先把测试需要的DOM结构插入到body里
        document.body.innerHTML = `
            <div class="main">
                <div id="subMain"></div>
            </div>
            <div class="head">
                <div class="main_styles" hidden>
                    <div class="next">Text</div>
                </div>
            </div>
            <div class="footer-section"></div>
        `;

        // 手动触发DOMContentLoaded事件，让jQuery捕获到并执行ready回调
        document.dispatchEvent(new Event('DOMContentLoaded'));

        // 用jQuery的ready来等待业务代码的事件绑定完成
        $(document).ready(() => {
            // 触发正确元素的点击事件（注意选择器的大小写）
            $('.main #subMain').trigger('click');

            // 这里可以加断言验证你的逻辑是否生效，比如：
            // 检查main_styles的hidden属性是否被移除
            expect($('.main_styles').attr('hidden')).toBeFalsy();
            // 检查head元素是否被移到footer-section之后
            expect($('.footer-section').next().hasClass('head')).toBe(true);

            done();
        });
    });
});

方案二：直接强制触发jQuery的ready回调 #

如果上面的方式还是有问题，你可以直接调用jQuery内部的ready队列，强制执行所有绑定的ready回调：

// 在设置好DOM之后，直接调用这个方法
$.ready();

这种方式更直接，适合快速验证，但不如第一种贴近真实浏览器的行为。

几个关键注意点： #

• 脚本引入顺序：一定要先引入jQuery，再引入你的业务脚本，否则业务脚本里的$可能不是jQuery实例，导致绑定失败。
• DOM准备时机：要在触发DOMContentLoaded之前就把测试需要的DOM结构插入到body中，这样jQuery在执行ready回调时，目标元素已经存在，才能成功绑定事件。
• 异步处理：jQuery的ready回调是异步执行的，所以必须用done回调或者async/await来处理异步逻辑，否则测试会提前结束，看不到正确的结果。

这样调整之后，你的$(function(){})里的代码应该就能被触发，点击事件也能正常执行，代码覆盖率也能统计到这部分逻辑了。

备注：内容来源于stack exchange，提问作者keerthi