[SalesForce] LWC Jest querySelector cannot read property ‘value’ of null

New to LWC and Jest — and trying to write a succinct test on a component with multiple lightning-input elements.

I have used the following pattern, which works fine — I get a passing result:

let allInputs = element.shadowRoot.querySelectorAll('lightning-input');
allInputs.forEach(input => {
    if (input.name === 'zip') {
        expect(input.value).toBe('97214');
    }
});

The following would be much shorter, but I get "TypeError: Cannot read property 'value' of null":

let zipInput = element.shadowRoot.querySelector('lightning-input[name="zip"]');
expect(zipInput.value).toBe('97214');

Seems like these two should work the same way. Why not?

Best Answer

You're getting different results because the first approach is looking at the javascript property value and the second approach is looking at the html attribute value. These are not guaranteed to be the same. Whether or not the javascript property reflects to the html attribute (and vice-versa) depends on the component implementation.

The difference between your two approaches boils down to the following:

Approach 1: Query all lightning-input elements and then apply a filter based on the value of the javascript name property of each instance.

Approach 2: Query all lightning-input elements that have the html attribute name set to the value zip.

Edit: I forgot to mention that in LWC, custom properties are set via javascript properties under the covers. You can verify this by looking at the rendered html to see which html attributes actually get rendered. This behavior is subject to change in the future! In the meantime, if you want to avoid filtering with javascript, you can add a class attribute or a data attribute to the input since those values show up as html attributes.

Related Solutions

[SalesForce] Help needed: Writing a Jest Test for an LWC with a slot

I don't know much about Jest but I can spot a potential problem.

You're creating a test element (let testElement = createElement('c-my-wizard', { is: MyWizard });) and later attempting to modify its DOM.

LWC only lets you manipulate an element's DOM if you decorate it with a lwc:dom="manual" in it's definition. The error gives you that hint.

The component you created gets rendered as <c-my-wizard></c-my-wizard> but it should get rendered as <c-my-wizard lwc:dom="manual"></c-my-wizard>

My lack of knowledge in Jest will preclude me from fixing your syntax, but if you can add that directive you'll be good to go

[SalesForce] Bind a property from a controller – LWC

You are in a loop <template for:each={emails.data} for:item="email"> which means below is how you need to access data for an instance of the record in the data array. Here email is the indidual record attribute which you have declared through for:item="email

 <lightning-badge label={email.Incoming}></lightning-badge>

You are trying to run an expression function on a list of records this.emails.data.fields.Incoming.value but data your data is an array so you need to access specific node of array inside the template if

Solution 2:

Create a child component and put all the contents inside for loop there

Child Component markup:

<template>
    <p>{email.TextBody}</p>
    <div  class="slds-p-around_x-small" >
        <lightning-badge label={incoming}></lightning-badge>
     </div>
</template>

JS File:

import { LightningElement,api} from 'lwc';

    export default class EmailRecord extends LightningElement {
        @api email;
        get incoming() {
            return this.email.Incoming;
        }   

    }

In the parent component where you are getting data change the markup(html template like this) where c-email-record is your child component

<template>

<template for:each={emails.data} for:item="email">
    <lightning-layout-item key={email.Id} size="12">
    <c-email-record email={email}></c-email-record>
    </lightning-layout-item>
</template>    
</template>

within this child component js you can do whatever manipulation of data you want to and then show the UI accordingly

Best Answer

Related Solutions

[SalesForce] Help needed: Writing a Jest Test for an LWC with a slot

[SalesForce] Bind a property from a controller – LWC

Related Topic