0

i am new to LWC and jest test.So while doing the testing i have got an error.

TypeError: Cannot read properties of null (reading 'style')

html

<template>
    <div class="slds-grid slds-grid_align-center">
            <div class="primary-num-text-large"  >
            <div class="itemValueColor" >{itemValue}</div>
            </div>
        </div>
        <template if:true={hasChanges}>
                <template if:true={PositiveChange}>
                    <div class="slds-col slds-size_1-of-6" >
                        <lightning-icon icon-name="utility:arrowup" class="blue" size="medium"></lightning-icon>
                    </div>
                </template>
                <template if:false={PositiveChange}>
                    <div class="slds-col slds-size_1-of-6" style="margin-top:15%">
                      <lightning-icon icon-name="utility:arrowdown" class="red" size="medium"></lightning-icon>
                    </div>
                </template>
       </template
    
</template>

js file

@wire(getItemProperty, { iId: '$contactId' })
    GetItemProperty({data}){
        if (data) {
            this.itemValue= data.itemValue;
            this.itemValueColor=data.itemValueColor;
            this.hasChanges=data.hasChanges;
            this.PositiveChange=data.PositiveChange;
           this.template.querySelector('div.itemValueColor').style.setProperty('--itemColor', data.itemValueColor)

}

test.js

import { createElement } from 'lwc';
import itemProperty from 'c/itemProperty';
import getItemProperty from '@salesforce/apex/ItemService.getItemProperty';
//import { mockItemData } from "lightning/uiRecordApi";

// Mock realistic data
const mockItemData = require('./data/mockItemData.json');


describe('c-item-property', () => {

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

    
    it('getting Item Property Test', () => {
        const element = createElement('c-item-Property', {
            is:itemProperty
          });
          getItemProperty.emit(mockItemData);

          return Promise.resolve().then(() => {
            const content = element.shadowRoot.querySelector(".itemValueColor");
            const itemValueField = mockItemData.itemvalue;
            expect(content.textContent).toBe(itemValueField);
           
          });
        });
});

How to fix this?can someone help?

2
  • Are you able to share the relevant part of the component & the test? Jun 23 at 21:18
  • @KrisGoncalves yes,i have included Jun 24 at 5:09

1 Answer 1

1

The problem is not with your test. In your component's code, you have this selector:

this.template.querySelector('div.itemColor').style.setProperty('--itemColor', data.itemColor)

But there is no element in your markup that matches the div.itemColor selector. This explains your error.

As a best practice you should not apply style in this way with LWC because you're not supposed to modify the DOM manually unless your mark the element with the lwc:dom="manual" attribute (see Manipulate the DOM with JavaScript). This only useful in specific cases. In your case, you'll want to write a getter for the style:

<div style={myDynamicStyle}>...</div>
get myDynamicStyle() {
  return 'color: red;';
}
1
  • itemValueColor is getting from a class and i have to use in the itemValue.That's why i used like this this.template.querySelector('div.itemColor').style.setProperty('--itemColor', data.itemColor).Any other way to do this? 2 days ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.