Testing RequireJS modules with QUnit

2019-09-09 21:36发布

问题:

I'm trying to test a requirejs module that has two dependencies (jquery and another custom module).

myModule-Test.js

'use strict';

(function() {

    var uut,
        modulePath= "../../main/webapp/js/modules/myModule.js";


    module("myModule object test suite", {
        setup: function() {
            QUnit.stop();

            require.config({
                map: {
                  "*": {
                     "jquery": "../../main/webapp/js/jquery/jquery-1.11.0.min.js",
                     "screenLabelsResolver": "../../main/webapp/js/modules/my-screen-labels-resolver"
                  }
                }
            });
            require([modulePath], function(module) {
                uut = module;
                QUnit.start();
            });
        },
        teardown: function() {
            require.undef(modulePath);
            require.config({
                map: {
                  "*": {
                     "jquery": "jquery",
                      "screenLabelsResolver": "../../main/webapp/js/modules/my-screen-labels-resolver"
                  }
                }
            });
        }
    });

    test("Given A Page I Expect The Global myModule Object To Exist", function() {
        ok( uut !== undefined );
    });



}());

I am using require.config to pass in the dependencies with stop() and a Start().

myModule.js

'use strict';

define(["jquery", "screenLabelsResolver"], function($, screenLabelsResolver) {

    var metaTag = $("meta[name='application-name']"),
        currentBrand = metaTag.attr("data-brand"),
        currentWidth,
        viewState,
        sessionTimeoutValue = metaTag.attr("data-sessiontimeoutvalue"),
        sessionTimeoutWarningValue = metaTag.attr("data-sessiontimeoutwarningvalue"),
        screenLabels = {},
        perceptionDate = metaTag.attr("data-todayatmidnight"),
        currentViewportWidth = $(window).width(),
        isViewState = metaTag.attr("data-isviewstate"),
        isTouch = $("html").hasClass("touch")

    return {
        metaTag: function () {
            return metaTag;
        },
        currentBrand: function(){
            return currentBrand;
        },
        currentViewportWidth: function(){
            return currentViewportWidth;
        },
        isViewState: function(){
            return isViewState;
        },
        sessionTimeoutValue: function(){
            return sessionTimeoutValue;
        },
        sessionTimeoutWarningValue: function(){
            return sessionTimeoutWarningValue;
        },
        getPerceptionDate: function(){
            return perceptionDate;
        },
        getOrientation: function () {
            return ( window.orientation == -90 || window.orientation == 90 ) ? "landscape" : "portrait";
        },
        isTouch: function(){
            return isTouch;
        },
        screenLabels: function() {
            if (screenLabels = {}) {
                screenLabels = screenLabelsResolver( metaTag.attr("data-viewstate") /* or however you want to get the current viewstate name */ );
            }
            return screenLabels;
        }
    };
});

I get the error "Uncaught TypeError: undefined is not a function" where I try to use jQuery ($) in line var metaTag = $("meta[name='application-name']").

Somehow, jQuery is not loaded properly by the time the call is made.

My question that is this the correct approach to test r.js modules with multiple dependencies? If so what's the fundamental error in the above code?

Many Thanks in advance.