Is running jQuery inside another HTML file loaded via JSDOM testable with Jest?

[joshbrekke]

Is running jQuery inside another HTML file that is loading via JSDOM testable utilizing Jest? I have an older .Net app that needs Jest testing. However, it has jQuery in the script tags, and it's complaining about the jQuery dependency. Does Jest support the ability to load the page via JSDOM and run the jQuery inside? I can't seem to find anything from anyone that has done this.

Here is my current test example I'm having issues with...

I'm trying to run a Jest test (MyPreferences.test.js) that has a jQuery ready function at the end. However, when I run the test, I keep getting the following error...

When I check p_window.window from inside MyPreferences.test.js, it does have the document. And p_window.window1 has the jQuery object. However, I don't know why it can't find the jQuery when the JSDOM loads MyPreferences.aspx from ./src/MyPreferences.js.

Any ideas to what I'm missing that would be causing the jQuery errors?

MyPreferences.aspx

<%@ Page Title="My Preferences" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="MyPreferences.aspx.cs" Inherits="RFS.MyPreferences" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="page-content-wrapper">
                        <div style="display: inline-block;">
                            <div>
                                <input type="radio" name="time_format" value="min" /> 
                                <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                          type="number" maxlength="6" class="time_format_value" name="time_format_value" value="" /> Minutes
                            </div>
                            <div>
                                <input type="radio" name="time_format" value="hrs" /> <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                          type="number" maxlength="6" class="time_format_value" name="time_format_value" value="" /> Hours
                            </div>
                            <div>
                                <input type="radio" name="time_format" value="days" /> <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                          type="number" maxlength="6" class="time_format_value" name="time_format_value" value="" /> Days
                            </div>
                            <div>
                                <input type="radio" name="time_format" value="wks" /> <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                          type="number" maxlength="6" class="time_format_value" name="time_format_value" value="" /> Weeks
                            </div>
                            <div>
                                <input type="radio" name="time_format" value="dttm" /> <input id="endDateTime" type="datetime-local" name="time_format_value" /> Date & Time
                            </div>
                            <div>
                                <input type="radio" name="time_format" value="indef" /> Indefinitely
                            </div>
                        </div>

</div>

<script type="text/javascript">
    $(function () {

    });
</script>

</asp:Content>

./src/MyPreferences.js

module.exports = {};

const { JSDOM } = require("jsdom");

const $ = require('jquery');
const path = require("path");
const fs = require("fs");
const html = fs.readFileSync(path.resolve(__dirname, "../../MyPreferences.aspx"));
const window = (new JSDOM(html, { runScripts: "dangerously", resources: 'usable' }).window);
const window1 = (jQuery)(new JSDOM(html, { runScripts: "dangerously", resources: 'usable' }).window);

module.exports.$ = $;
module.exports.window = window;
module.exports.window1 = window1;

./MyPreferences.test.js

let p_window;

describe("MyPreferences UI", () => {
beforeEach(() => {
p_window = require("./src/MyPreferences");

    global.window = p_window.window;
    global.document = p_window.window.document;
});
test("Has expected time formats?", () => {
    var timeFormats = p_window.window.document.getElementsByName("time_format");
    var expectedTimeFormats = ['min', 'hrs', 'days', 'wks', 'dttm', 'indef'];

    var expFormats = true;
    for (var n = 0; n < timeFormats.length; n++) {
        if (expectedTimeFormats[n] != timeFormats[n].value) {
            expFormats = false;
            break;
        }
    }

    expect(expFormats).toBeTruthy();
});

});