lwc-oss lightning-base-components jest tests

Question

I am working on an lwc-oss project and found reference to lightning-base-components npm package in a salesforce blog post.

• https://developer.salesforce.com/blogs/2020/12/build-connected-apps-anywhere-using-lightning-base-components.html

• https://www.npmjs.com/package/lightning-base-components

We have started utilizing this package but now when trying to write jest tests around our custom components we are running into errors trying resolve modules that are not exposed inside of the package.

Cannot find module 'lightning/primitiveIcon' from 'node_modules/lightning-base-components/src/lightning/buttonIcon/buttonIcon.html'

I've added the following to our jest config:

    transformIgnorePatterns: [
        "/node_modules/(?!lightning-base-components)",
    ],

Any assistance or direction on this would be great.

Example Below:

Here is the basic component and test I am working with. If I remove the lightning-card component from the html it passes. When adding the component it fails.

basic.html

<template>
    <lightning-card>
        <h3 class="slds-text-heading_small slds-text-title_bold">
            <a title={title}>{title}</a>
        </h3>
    </lightning-card>
</template>

basic.js

import {LightningElement} from "lwc";

export default class basic extends LightningElement {

    title;
}

basic.test.js

import { createElement } from "lwc";
import Popover from "c/basic";
import { afterEach, beforeEach, describe, it, jest } from "@jest/globals";

describe("ccm-popover", () => {

    const title = 'this is a title';

    beforeEach(() => {
        document.body.appendChild(element);
    });

    afterEach(() => {
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });


    const element = createElement("ccm-basic", {
        is: Popover
    });

    element.title = title;

    it("title anchor has value of title attribute", () => {
        const titleAnchor = element.shadowRoot.querySelector("h3 a");
        expect(titleAnchor).toHaveProperty("title", title);
    });

});

Answer 1

I was able to get this to work by updating the jest.config.js with the following.

This allows the module Name mapper to map any lighting components that are not exposed in the lightning-base-components package to be resolved by jest.

I'm not well versed with Jest so this may not be the final answer.

const { jestConfig } = require('lwc-services/lib/config/jestConfig');

module.exports = {
    ...jestConfig,
    transformIgnorePatterns: ['/node_modules/(?!lightning-base-components)'],
    moduleNameMapper: {
        "lightning/(.*)": [
            "<rootDir>/node_modules/lightning-base-components/src/lightning/$1/$1.js"
        ]
    },
};