How to mock jquery function $(function(){})

Hi my java script file looks like this

import $ from 'jquery';

$(function(){
    $(".main #subMain").on("click", function(e){
        e.preventDefault();
        var block = $("div.next").parents(".head").first();
        block.find(".main_styles").attr("hidden", false);
        block.insertAfter(".footer-section");
        $([document.documentElement, document.body]).animate({
            scrollTop: $("div.next").offset().top
        }, 1000);
    });
}); 

I tried writing jest test case like this loading the html and calling the the function but the error is with invoking the jquery function

require('../file_name.js');

describe("Test helppage", () => {
    test("testing ", () => {
        return new window.Promise((done) => {

            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>`;
            const onDomContentLoadedCallback = async () => {
                
              
                ($('.main #submain')).trigger('click');
                
                document.removeEventListener("DOMContentLoaded", onDomContentLoadedCallback);
                done();
            };

            document.addEventListener("DOMContentLoaded", onDomContentLoadedCallback);
            document.dispatchEvent(
                new Event("DOMContentLoaded", {
                    bubbles: true,
                    cancelable: true,
                })
            );

        });
    });
});

Any solutions in how to invoke this jquery function will be helpful.Thanks!!