Unit Testing ES6 Class with External Dependency

Question

I'm trying to set a unit testing boilerplate for my company. Our front end projects are built with ES6 classes and have a dependency to our core product. The front end code gets wrapped through a build process in a whole other block of code that is basically a closure and captures the dependency. So we don't have to manually import it in order to use it.

Let's say the dependency is called productScope and it's an object that has some DOM models, internal APIs and parameters among many other things necessary for each project. At the moment, Mocha throws ReferenceError: productScope is not defined. How can I mock this object? Or should I just use the actual object?

Example:

class someClass {
    constructor() {
        const id = productScope.items[0].id
        const item = productScope.domModel.querySelector('.some-div')

        item.classList.add(`added-${id}`)
    }
}

This get wrapped in core code like below:

(function(productScope) {
    // front end code goes here
}(productScope)

Testing file:

import someClass from '../../js/someClass'

describe('someClass', function() {
    const someClass = new someClass()
    it('should be a class', function() {
        console.log(someClass)
    });
});

Please edit your question to include relevant parts of your unit test code — Patrick Hund, Nov 20 '18 at 17:18
Here is an answer that is in the style of your question: Read this: https://gofreerange.com/mocha/docs/Mocha/Mock.html — Randy Casburn, Nov 20 '18 at 17:25

score 1 · Answer 1 · answered Nov 29 '18 at 13:17

You can try something like this

describe('#someClass', () => {
    let someClass;

    beforeEach(() => {
        global.productScope = {
            // mocking productScope object
        };
    });

    it('should be a class', () => {
        someClass = new SomeClass;
        console.log(someClass);
    });

    afterEach(() => {
        delete global.productScope;
    });
});

or alternatively if you want more specific mock logic for each test case

describe('#someClass', () => {
    let someClass;

    it('should be a class', () => {
        global.productScope = {
            // mocking productScope object
        };

        // Test logic start

        someClass = new SomeClass;
        console.log(someClass);

        // Test logic end

        delete global.productScope;
    });
});

score 0 · Answer 2 · answered Nov 21 '18 at 00:09

0

Looks like productScope is a global variable.

Something like this should work for you.

import someClass from '../../js/someClass';

describe('someClass', function() {
    let someClass;

    beforeEach(() => {
        global.productScope = {
          // you mock definition
          someClass = new someClass();
        };
    });

    it('should be a class', function() {
        console.log(someClass)
    });
});

answered Nov 21 '18 at 00:09

Dinesh Pandiyan

5,814
2
30
49

Thanks, but still the same error, plus `1) "before each" hook for "should be a class"` message in red. – Jaeeun Lee Nov 21 '18 at 01:02
Where are you getting `productScope` from? Are you importing it in your file or is it a global variable? – Dinesh Pandiyan Nov 21 '18 at 01:04
Basically, there is a whole block of code that wraps the front end code, and it's a closure that captures `productScope` – Jaeeun Lee Nov 21 '18 at 01:06
If it's a closure, you could stub it with `sinon`. Can you show how you import `productScope` in the `js/someClass` file? – Dinesh Pandiyan Nov 21 '18 at 01:52
I don’t need to import it to the class because the class is kind of wrapped in it. Perhaps like how you’d use the $ as jQuery inside of an IIFE. – Jaeeun Lee Nov 21 '18 at 05:33
Looks like you have a complicated code setup. Can you add the entire code for clarity? – Dinesh Pandiyan Nov 21 '18 at 06:10

Alejandro · Answer 3 · 2018-12-04T07:42:38.970

I'm with other answers as well, as managing global variables seems to be the simplest and most straightforward solution.

However, you can use toString to get class's string representation, and eval it to bind to closure's scope:

class someClass {
   constructor() {
     this.id = scopedId
   }
}

// pass class as an argument
function scopeFactory(classDef) {

   // define scoped data
   let scopedId = 2;

   // eval is used to bind class to the local closure
   // so `scopedId` will be in charge
   return eval("(" + classDef + ")");
}

const scopedSomeClass = scopeFactory(someClass);

console.log(new scopedSomeClass)

Note that eval(someCLass.toString()) doesn't work without parentheses.

You can add it as a helper function, into your project.

Unit Testing ES6 Class with External Dependency

3 Answers3