0

I'm trying to do a simple test that confirms that a field (from an object) exists on a javascript lwc component. The field I'm trying to check is Sweep_Day__c (from the account object). This field is displayed in the html. I know the way I have it now is not working, as I can change the Sweep_Day__c field name to anything and the test still passes. Thanks.

This is my Jest:

import { createElement } from 'lwc';
import lwcRetailerInformationHub from 'c/lwcRetailerInformationHub';

const mountElement = () => {
  const element = createElement("c-lwc-Retailer-Information-Hub", {
    is: lwcRetailerInformationHub
  });
  document.body.appendChild(element);
  return element;
};

describe("check for field existence and non-existence", () => {
  afterEach(() => {
    // The jsdom instance is shared across test cases in a single file so reset the DOM
    while (document.body.firstChild) {
      document.body.removeChild(document.body.firstChild);
    }
    jest.clearAllMocks();
  });

  async function flushPromises() {
    return Promise.resolve();
  }

  function getSelector(element, selector) {
    return element.shadowRoot.querySelector(selector);
  }

  it("Sweep_Day__c should exist on the component", async () => {
    const element = mountElement();
    const sweepDay__c = getSelector(element, "Sweep_Day__c");   
    expect(sweepDay__c).toBeDefined();
  });
});

This is where the field is displayed on the HTML:

<div class="slds-col slds-size_1-of-5">                               
     lightning-output-field field-name="Sweep_Day__c"></lightning-output-field>                                        
</div>

I tried this Jest as well, The test passes but shouldn't.

import { createElement } from 'lwc';
import lwcRetailerInformationHub from 'c/lwcRetailerInformationHub';

describe("check for field existence and non-existence", () => {
afterEach(() => {
    // The jsdom instance is shared across test cases in a single file so reset the DOM
    while (document.body.firstChild) {
      document.body.removeChild(document.body.firstChild);
    }
  });

  it("Sweep_Day__c should exist on page", () => {
    const component = createElement("c-lwc-Retailer-Information-Hub", {
      is: lwcRetailerInformationHub
    });
    document.body.appendChild(component);
    const testedElement =
      component.shadowRoot.querySelector("xxxSweep_Day__c");
    expect(testedElement).toBeDefined()
  });
});

1 Answer 1

1

You will have to modify your jest test as follows.

import { createElement } from 'lwc';
import jesttestdemo from 'c/jesttestdemo';

describe('c-jesttestdemo', () => {
    afterEach(() => {
        // Clean up DOM elements after each test
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });

    it('contains a lightning-output-field for Sweep_Day__c', () => {

        const OUTPUT_FIELDS = ['Sweep_Day__c'];
        const element = createElement('c-jesttestdemo', {
            is: jesttestdemo
        });
        document.body.appendChild(element);

        const outputFieldNames = Array.from(
            element.shadowRoot.querySelectorAll('lightning-output-field')
        ).map((outputField) => outputField.fieldName);
        expect(outputFieldNames).toEqual(OUTPUT_FIELDS);
    });
});

You can find variety of jest examples for most of the use cases in LWC Recepies

toBeDefined only checks for undefined. Which in your case is null, hence toBeDefined wont work.

https://jestjs.io/docs/expect#tobedefined

.toBeDefined() Use .toBeDefined to check that a variable is not undefined. For example, if you want to check that a function fetchNewFlavorIdea() returns something, you can write:

test('there is a new flavor idea', () => {
expect(fetchNewFlavorIdea()).toBeDefined(); });

2
  • Thanks so much for your help. I'll try this solution today. Commented Mar 21 at 15:04
  • I had to make a small change to the expect statement, then it worked fine. Thank you! expect(outputFieldNames).toEqual(expect.arrayContaining(OUTPUT_FIELDS)); Commented Mar 21 at 16:40

You must log in to answer this question.

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