Testing JavaScript without exports using the Jest testing framework

Question

I am in the process of moving an old JS codebase to modern JS. First step though is to add some tests to the current codebase. The current code base is essentially a bunch of individual JS files each wrapped in an IIFE.

This in itself is a problem for tests because, unless something is exposed to the global object, you cannot reach into the IIFE. Some of the code I am refactoring to be simple JS object with properties, which is attached to a namespace(namespace below is just a placeholder name) on the global object, for example:

var namespace = window.namespace || {};
var paymentsHandlerUtils = {
    getNewValue: function(selectedAmount) {
        'use strict';
        return selectedAmount < 1 || isNaN(selectedAmount)
            ? ''
            : '$' + selectedAmount;
    },
    getSelectedAmount: function(value) {
        'use strict';
        return value % 1 === 0 ? parseInt(value) : parseFloat(value).toFixed(2);
    }
};

namespace.paymentsHandlerUtils = paymentsHandlerUtils;

My question is, how would you go about testing this with Jest? I have tried requiring the above as follows:

const paymentsHandlerUtils = require('../js/components/payments/payments-handler-utils.js');

This runs, but the paymentsHandlerUtils object is just an empty {}. Not surprising, as nothing is being returned by simply executing the JS. However, window.namespace is also undefined. Seems like the code is not being executed in the context of jsDOM, so the global(s) is not created.

Is there a way to get this to work, or is this simply not a use case for Jest? Thanks in advance.

I went down the rabbit hole with rewire, which claims to do what you need. Perhaps you can make it work. — AnonymousSB
– AnonymousSB, Commented Dec 9, 2018 at 9:07

Andréa Maugars · Accepted Answer · 2018-12-09 09:06:22Z

5

I don’t think there is a way to access module globals when imported as it goes against the principle of encapsulated modules in the first place.

An alternative which would require the least refactoring would be to add the following code to all your modules:

if (typeof exports === "object") {
    module.exports = paymentsHandlerUtils;
}
namespace.paymentsHandlerUtils = paymentsHandlerUtils;

It is inspired by the old UMD (Universal Module Definition). The condition detects if you are running in a commonjs environment and exports your variable. You will then be able to require it in your tests:

const paymentsHandlerUtils = require('../js/components/payments/payments-handler-utils.js');

Otherwise you need to use another test suite that works in the browser, because Jest doesn’t.

Good luck to your migrations!

answered Dec 9, 2018 at 9:06

Andréa Maugars

4253 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

schalkneethling Over a year ago

Thanks Andréa! I was thinking of something along those lines but, was a little concerned about possible issues in production. This sounds like a totally legit way that feels safe. I am going to give this a try.

YakovL · Accepted Answer · 2022-07-03 09:08:21Z

0

In fact this is now possible with rewire. Here's what you have to do:

install rewire (npm i rewire)

in your jest file,

const rewire = require("'rewire');
const paymentsHandlerUtilsRewire = rewire('../js/components/payments/payments-handler-utils.js');
const namespace = paymentsHandlerUtilsRewire.__get__('namespace');

do what you were planning to do with namespace and namespace.paymentsHandlerUtils

Read more in the rewire repo; there's also babel-plugin-rewire for ES6+ (see, for instance, here).

answered Jul 3, 2022 at 9:08

YakovL

8,44813 gold badges74 silver badges117 bronze badges

Collectives™ on Stack Overflow

Testing JavaScript without exports using the Jest testing framework

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related