Cannot find module ‘lightning/actions’ import { CloseActionScreenEvent } from “lightning/actions”;

lightning-web-componentslwc-jestunit-test

Is there a valid solution for this issue in latest versions of @salesforce/sfdx-lwc-jest? I implemented the below solution and still get the error:

"@salesforce/sfdx-lwc-jest": "1.1.0"
sfdx-cli: sfdx-cli/7.179.0 darwin-x64 node-v18.12.1

in process of updating to even newer lwc-jest but looking at the repo still no stubs for CloseActionScreenEvent

Ive tried the solution listed here Having issue with jest test for Lightning Quick action and CloseActionScreenEvent

with no luck still get same error cannot find module 'lightning/actions'

Best Answer

It's not in @salesforce/sfdx-lwc-jest, it's found in @trailheadapps/lwc-recipes.

Setting this up is pretty trivial, though not necessarily very obvious what you're supposed to do.

Starting from the linked repository above, you first will want to install @salesforce/sfdx-lwc-jest if you haven't yet:

npm i --save-dev @salesforce/sfdx-lwc-jest

This installs the config.js referenced in the next step.

You should have a file called jest.config.js in your project root, written as follows (note: this is in @trailheadapps/lwc-recipes/jest.config.js):

const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
const setupFilesAfterEnv = jestConfig.setupFilesAfterEnv || [];
setupFilesAfterEnv.push('<rootDir>/jest-sa11y-setup.js');
module.exports = {
    ...jestConfig,
    moduleNameMapper: {
        /* CSS library import fix in test context. See:
        https://github.com/salesforce/sfdx-lwc-jest/issues/288) */
        '^c/cssLibrary$':
            '<rootDir>/force-app/main/default/lwc/cssLibrary/cssLibrary.css',
        // Jest mocks
        '^@salesforce/apex$': '<rootDir>/force-app/test/jest-mocks/apex',
        '^@salesforce/schema$': '<rootDir>/force-app/test/jest-mocks/schema',
        '^lightning/navigation$':
            '<rootDir>/force-app/test/jest-mocks/lightning/navigation',
        '^lightning/platformShowToastEvent$':
            '<rootDir>/force-app/test/jest-mocks/lightning/platformShowToastEvent',
        '^lightning/uiRecordApi$':
            '<rootDir>/force-app/test/jest-mocks/lightning/uiRecordApi',
        '^lightning/messageService$':
            '<rootDir>/force-app/test/jest-mocks/lightning/messageService',
        '^lightning/actions$':
            '<rootDir>/force-app/test/jest-mocks/lightning/actions',
        '^lightning/alert$':
            '<rootDir>/force-app/test/jest-mocks/lightning/alert',
        '^lightning/confirm$':
            '<rootDir>/force-app/test/jest-mocks/lightning/confirm',
        '^lightning/prompt$':
            '<rootDir>/force-app/test/jest-mocks/lightning/prompt',
        '^lightning/modal*':
            '<rootDir>/force-app/test/jest-mocks/lightning/modal'
    },
    setupFiles: ['jest-canvas-mock'],
    setupFilesAfterEnv,
    testTimeout: 10000
};

You can remove any module names you don't need. The important part here is in moduleNameMapper for '^lightning/actions$. You'll notice that that this maps to a file:

<rootDir>/force-app/test/jest-mocks/lightning/actions

So, you should set up this folder structure in your project. Inside force-app/test/jest-mocks/lightning, create a file called actions.js, and place the contents of this file there.

/**
 * Close Screen Action Event base class
 */
export const CloseScreenEventName = 'lightning__actionsclosescreen';

export class CloseActionScreenEvent extends CustomEvent {
    constructor() {
        super(CloseScreenEventName, { bubbles: false, composed: false });
    }
}

This is found in @trailheadapps/lwc-recipes/force-app/test/jest-mocks/lightning/actions.js.

So, in summary, install @salesforce/sfdx-lwc-jest, configure a jest.config.js, and copy the relevant modules from @trailheadapps/lwc-recipes/force-app/test/jest-mocks.

Related Topic