Config empty for test wire adapter

[jjbennett]

I was attempting to emit getRelatedListRecords with 2 different sets of data and using the config as mentioned in #15 but the config is always an empty object. There are other reports of the config being blank on stack exchange.

[jmsjtu]

@jjbennett do you have a repro we can look at?

[jjbennett]

I created a simple repo and in doing so I found the issue to be when using a dynamic and reactive property in the config. If I hard code the Ids on line 15 and 18 then it works as expected.

config is available if you change line 15 and 18 to...

@wire(getRecord, { recordId: '0017i00001MIvJOAA1', fields: [ID] })
@wire(getRecord, { recordId: '0017i00001MIvKdAAL', fields: [ID] })

import { LightningElement, api, wire } from "lwc";
import { getRecord } from "lightning/uiRecordApi";
import ID from "@salesforce/schema/Account.Id";

export default class ConfigIssue extends LightningElement {
    @api firstRecordId = "0017i00001MIvJOAA1";
    @api secondRecordId = "0017i00001MIvKdAAL";

    @wire(getRecord, { recordId: '$firstRecordId', fields: [ID] })
    firstRecord;

    @wire(getRecord, { recordId: '$secondRecordId', fields: [ID] })
    secondRecord;

    @api getFirstRecordId() {
        return this.firstRecord?.data?.Id;
    }

    @api getSecondRecordId() {
        return this.secondRecord?.data?.Id;
    }
}

import { createElement } from "lwc";
import configIssue from "../configIssue";
import { getRecord } from "lightning/uiRecordApi";

describe("c-config-issue", () => {
    const mockGetRecordFirst = { "Id": "0017i00001MIvJOAA1" };
    const mockGetRecordSecond = { "Id": "0017i00001MIvKdAAL" };

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

    test("input => result", () => {
        const element = createElement("c-config-issue", {
            is: configIssue
        });
        document.body.appendChild(element);

        getRecord.emit(mockGetRecordFirst, (config) => {
            console.log('config: ', config);
            return config.recordId === "0017i00001MIvJOAA1"
        });
        getRecord.emit(mockGetRecordSecond, (config) => config.recordId === "0017i00001MIvKdAAL");

        expect(element.getFirstRecordId()).toBe("0017i00001MIvJOAA1");
        expect(element.getSecondRecordId()).toBe("0017i00001MIvKdAAL");
    });
});

[jmsjtu]

@jjbennett sorry I wasn't able to get to this earlier, could you try your test again but wait for a few ticks on the microtask queue?

Something like this:

describe("c-config-issue", () => {
    const mockGetRecordFirst = { "Id": "0017i00001MIvJOAA1" };
    const mockGetRecordSecond = { "Id": "0017i00001MIvKdAAL" };

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

    test("input => result", () => {
        const element = createElement("c-config-issue", {
            is: Config
        });
        document.body.appendChild(element);

        return Promise.resolve().then(() => {
            ldsAdapterMock.emit(mockGetRecordFirst, (config) => {
                console.log('config: ', config);
                return config.recordId === "0017i00001MIvJOAA1"
            });
            ldsAdapterMock.emit(mockGetRecordSecond, (config) => config.recordId === "0017i00001MIvKdAAL");

            expect(element.getFirstRecordId()).toBe("0017i00001MIvJOAA1");
            expect(element.getSecondRecordId()).toBe("0017i00001MIvKdAAL");
        });
    });
});

[spelak-salesforce]

I ran a similar issue as this where I have multiple getRecord wires, and I want to inspect the wire configs are computed as expected. In my test, I call a method that updates a wire config which forces the wire to re-fire. But in my test when I called getRecord.emit(value, filterFn), I wasn't getting the updated wire config value and instead getting the config value as it was on component construction. I noticed while debugging that the TestWireAdapterTemplate.update(config) wasn't getting called.

I tried this suggestion adding a await Promise.resolve() after updating the wire config and before the getRecord.emit, and it solved the issue.

export default class MyComponent extends LightningElement {
  @api recordId;

  layoutTypes;

  @wire(getRecord, {
    recordId: '$recordId',
    layoutTypes: '$layoutTypes'
  })
  wireRecord({ error, data }) {
        // ...
  }

  @api loadData() {
    this.layoutTypes = [ "Compact" ];
  }
}

// Original test

const recordId = "07rxx0000004C92AAE"; 

describe("MyComponent", () => {
  describe("loadData", () => {
    let component;
    let getRecordFilter = jest.fn();

    beforeEach(async () => {
      // Set when this wire should fire.
      getRecordFilter.mockImplementation((config) => {
        return config.record === recordId 
          && config.layoutTypes?.length === 1
          && config.layoutTypes?.[0] === "Compact"
      });

      const element = createElement("namspace__my-component", { is: Element  });
      element.recordId = recordId;
      document.body.appendChild(element);
 
      await Promise.resolve();

      // Fire the wire
      element.loadData();

      // Emit the wire
      getRecord.emit(RECORD_DATA, getRecordFilter);
    });

    it("should fire the getRecord wire", () => 
        expect(getRecordFilter).toHaveBeenCalledWith({
            recordId,
            layoutTypes: [ "Compact" ]
        });
        // FAILED getting only { recordId, layoutTypes: undefined } 
        // as if loadData() wasn't called.
    });

  });
});

// Fixed test

const recordId = "07rxx0000004C92AAE"; 

describe("MyComponent", () => {
  describe("loadData", () => {
    let component;
    let getRecordFilter = jest.fn();

    beforeEach(async () => {
      // Set when this wire should fire.
      getRecordFilter.mockImplementation((config) => {
        return config.record === recordId 
          && config.layoutTypes?.length === 1
          && config.layoutTypes?.[0] === "Compact"
      });

      const element = createElement("namspace__my-component", { is: Element  });
      element.recordId = recordId;
      document.body.appendChild(element);
 
      await Promise.resolve();

      // Fire the wire
      element.loadData();

      // FIX: Allow the test getRecord wire config to be updated
      await Promise.resolve();

      // Emit the wire
      getRecord.emit(RECORD_DATA, getRecordFilter);
    });

    it("should fire the getRecord wire", () => 
        expect(getRecordFilter).toHaveBeenCalledWith({
            recordId,
            layoutTypes: [ "Compact" ]
        });
        // SUCCESS
    });

  });
});