1

referencing this answer:Mocking CurrentPageReference wire in Jest unit tests - LWC

This is how I mock CurrentPageReference in the test file , the navigate functionality seem to work but I can't call the setter for the currentPageReference in the actual component.

This is what my test looks like:

import {CurrentPageReference} from 'lightning/navigation';
const currentPageReferenceAdapter = registerTestWireAdapter(CurrentPageReference);

const createOnlineSalesHomePageDynamic = (params = {}) => {
    const element = createElement(
        'runtime_online_sales-online-sales-home-page',
        {is: OnlineSalesHomePage}
    );
    Object.assign(element, params);
    document.body.appendChild(element);
    return element;
};
describe('Product catalog tests in onlineSalesHomePage', () => {
   it('should show expected breadcrumb on contract detail navigation', () => {
        const props = {
            currentPageReferenceAdapter: currentPageReferenceAdapter,
        };
        const element = createOnlineSalesHomePageDynamic(props);

        return Promise.resolve()
            .then(() => {
                // Navigate to Contract Details.. this works!
                currentPageReferenceAdapter.emit(getPageReference(VIEW.CONTRACT_DETAIL, {c__id : contracts[0].contractId}));
            })
            .then(() => {
                const bcElement = element.shadowRoot.querySelector('runtime_online_sales-breadcrumb');
                debugger; // !! bcElement null, since currentPageReference for the actual component is not defined  and that because the setter is never called
            })
    });
});
   

This is the code actual component where the currentPageReference is injected, but this never gets called in the test as I expect it to:

    @wire(CurrentPageReference)
    setCurrentPageReference(currentPageReference) {
        debugger;
    // ! never gets called through the unit test as I expect it to !
    this.currentPageReference = currentPageReference;
    // some other setter code
    }

getPageReference() function:

export function getPageReference(view, state) {
    const pageRef = {
        type: 'standard__navItemPage',
        attributes: {
            apiName: 'standard-OnlineSalesHome',
        },
        state: {}
    };
    if (view !== VIEW.HOME) {
        Object.assign(pageRef.state, {c__view: view});
    }
    if (state) {
        Object.assign(pageRef.state, state);
    }
    return pageRef;
}
3
  • Deleted my answer as I presume your issue is in what your LWC actually does and how you're going about testing it. In my simple local example, it works fine (even with your exported function) - but, my LWC isn't doing much. For example, you say navigate to contract works - which implies that the user is presented away from the LWC? In what real-world scenario should the user be presented with the setter logic from CurrentPageReference? Ex. Load the page with certain parameters. If so, it sounds like it'd just be its own test....test1: navigate logic, test2: currentpagereference logic Commented Mar 19, 2022 at 16:15
  • 1
    it seems like can't run the set before the emit initializes the pageReference object, In the real application the set is always run after as it depends on the asyn call to the backend, fixing that seems to fix the issue. The setter for the currentPageReference gets called when emit is called is what I didn't understand before Commented Mar 21, 2022 at 17:25
  • Correct, only emit would pass the relevant page info for the wire for CurrentPageReference - feel free to put your own answer to help others. Commented Mar 21, 2022 at 17:29

1 Answer 1

1

Looks like .emit() is the function that calls the setter for the page reference,

In my case emit() was getting called after it was required , fixing that seems to fix the issue

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .