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')
js file
@wire(getItemProperty, { iId: '$contactId' })
GetItemProperty({data}){
if (data) {
this.itemValue= data.itemValue;
this.itemValueColor=data.itemValueColor;
this.template.querySelector('div.itemValueColor').style.setProperty('--itemColor', data.itemValueColor)
}
How to fix this?can someone help?
Best Answer
The problem is not with your test. In your component's code, you have this selector:
But there is no element in your markup that matches the
div. itemValueColor
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: