Squire.js failing to replace mock dependency while utilizing store

Question

Squire.js failing to replace mock dependency while utilizing store

Exploring Squire.js as a dependency loader for RequireJS. Testing in a standard web browser environment to run unit tests. Attempting to utilize store to access my mocks, but struggling with preventing Squire from loading the actual module.

The usage of mock functions smoothly:

define(['lib/squire'], function (squire) {
    var injector = new squire();

    injector
    .mock('modules/dependency', {
        run: function () {
            console.log("fake dependency run");
        }
    })
    .require(['modules/module-under-test'], function (module) {
        module.run();
    });
});

Console output:

module under test loaded       module-under-test.js:2
module under test run          module-under-test.js:5
fake module run                module-test.js:8

However, encountering an issue when trying to use store like so:

define(['lib/squire'], function (squire) {
    var injector = new squire();

    injector
    .store('modules/dependency')
    .require(['modules/module-under-test', 'mocks'], function (module, mocks) {
        mocks.store["modules/dependency"] = {
            run: function () {
                console.log("fake dependency run");
            }
        };
        module.run();
    });
});

The actual module is being used and executed:

real dependency loaded      dependency.js:2
module under test loaded    module-under-test.js:2
module under test run       module-under-test.js:5
real dependency run         dependency.js:5

Squire documentation explicitly states that this should work fine. Using the latest versions of Squire.js from Github and RequireJS from requirejs.org. What could be the mistake on my end?

javascript mocking requirejs squirejs

Answer 1

Answer №1

In the second example, it seems like you may have missed calling the run method. Assuming it should be called after assigning to mocks.store["modules/dependency"].

The issue could be that you are trying to stub the entire dependency instead of just the run method. This works in the first scenario because the dependency hasn't been resolved yet. However, in the second case, the module-under-test already has a reference to the dependency, so replacing it in Squire's store doesn't have an effect. The correct way to use store would be:

mocks.store["modules/dependency"].run = function () {
    console.log("fake dependency run");
};

If you need to replace the whole dependency, then using mock is the right approach. Store allows you to stub individual properties before they are accessed by the code under test. If the code loads the property upon initialization, you'll still need to use mock.

An alternative solution is to require the dependency along with Squire and stub only the necessary methods. Then, use mock to make Squire resolve dependencies with your partially stubbed dependency for the module under test. Here's how you can do it:

define(['lib/squire', 'modules/dependency'], function (squire, dep) {
    var injector = new squire();

    dep.run = function () {
        console.log("fake dependency run");
    };

    injector
    .mock('modules/dependency', dep)
    .require(['modules/module-under-test'], function (module) {
        module.run();
    });
});

Answer 2

In the second example, it seems like you may have missed calling the run method. Assuming it should be called after assigning to mocks.store["modules/dependency"].

The issue could be that you are trying to stub the entire dependency instead of just the run method. This works in the first scenario because the dependency hasn't been resolved yet. However, in the second case, the module-under-test already has a reference to the dependency, so replacing it in Squire's store doesn't have an effect. The correct way to use store would be:

mocks.store["modules/dependency"].run = function () {
    console.log("fake dependency run");
};

If you need to replace the whole dependency, then using mock is the right approach. Store allows you to stub individual properties before they are accessed by the code under test. If the code loads the property upon initialization, you'll still need to use mock.

An alternative solution is to require the dependency along with Squire and stub only the necessary methods. Then, use mock to make Squire resolve dependencies with your partially stubbed dependency for the module under test. Here's how you can do it:

define(['lib/squire', 'modules/dependency'], function (squire, dep) {
    var injector = new squire();

    dep.run = function () {
        console.log("fake dependency run");
    };

    injector
    .mock('modules/dependency', dep)
    .require(['modules/module-under-test'], function (module) {
        module.run();
    });
});

Squire.js failing to replace mock dependency while utilizing store

Answer №1

Similar questions

A dynamic modal window built with ReactJS

Is it necessary to include my library dependencies in the devDependencies section if I am only planning to publish the library bundle?

Why isn't CSS showing up in preview mode on the network tab?

Modifying an element in an array while preserving its original position

How to Use JQuery to Retrieve the Nearest TD Element's Text Content

What is the best way to incorporate auto refresh in a client-side application using vue.js?

Releasing the mouse button after dragging successfully without the use of any libraries

Guide to placing a button on the same line as text with the use of JavaScript

``The error 'Uncaught SyntaxError' is thrown during the production build of

Is there a more efficient algorithm available to solve this problem in a quicker manner?

Generating dynamic JSON objects in Node.js

Ways to retrieve data from response instead of subscription JSON in Angular 2/4

Sort various divs using a list

issue with visibility of checkbox in material ui table row

Tips for transferring state value from a form to a child modal

Leverage the power of ssh2-promise in NodeJS to run Linux commands on a remote server

Look for identical values within a nested array

Have you ever encountered the frustration of being unable to navigate to the next page even after successfully logging in due to issues

Transfer information from an Express route to a function exported from a Node module

Perform an ajax request to check for the existence of an image and insert