Sharing mocks in LWC tests

Question

I am trying to build some shared mocks for common utilities such as the lightning platform resource loader, which I mocked like so:

jest.mock(
    'lightning/platformResourceLoader',
    () => {
        return {
            loadScript() {
                return new Promise((resolve, reject) => {
                    resolve();
                });
            }
        };
    },
    { virtual: true }

);

This is included in my tests, and I know jest support module mocking so I was wondering if the an alternative would be to place under my sfdx-project root a lightning/platformResourceLoader/__mocks__/platformResourceLoader.json file. Is this the right approach to sharing mocks in lwc testing?

Answer 1

See the Module Imports section under Jest Test Patterns in the LWC Docs.

It's going to be something like this...

Create a custom lightning-platform-resource-loader stub:

force-app\test\jest-mocks\lightning\platformResourceLoader.js

export const loadScript = jest.fn(() => {
    return new Promise((resolve, reject) => {
        resolve();
    });
});

Now customize your Jest configuration:

jest.config.js (this overrides the stub from sfdx-lwc-jest and goes at the root of your project)

const { jestConfig } = require("@salesforce/sfdx-lwc-jest/config");
module.exports = {
    ...jestConfig,
    moduleNameMapper: {
        "^lightning/platformResourceLoader$":
            "<rootDir>/force-app/test/jest-mocks/lightning/platformResourceLoader"
    }
};

The stub itself may require tweaking to get it to return exactly the right thing. See my answer on this thread for a working example where I globally mocked another lightning namespace API, lightning/empApi.