function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Greg CooganGreg Coogan 

Testing a Property in a Lightning Web Component

I've built a Lightning Web Component and need to write a Jest unit test class for it. A part of the component only renders when a tracked property, called it "showDesktopView" is true. The default value is false. For a Jest test case to pass, the section needs to render. Therefore, I need a method that will result in "showDesktopView" being set to true. It is set to true when the UI theme isn't mobile.

The property: 
@track showDesktopView = false;

I've tried the below appproaches of setting the property, but they don't work. 
const element = createElement('c-test', { is: testLWC });
element.showDesktopView = "true";  //Trial 1
element.showDesktopView = true;    //Trial 2
document.body.setAttribute('showDesktopView','true');  //Trial 3
document.body.appendChild(element);


return Promise.resolve().then(() => {
// My promise code
});
They don't seem to work since my Promise fails. I know my code in the Promise works because if I set the property "showDesktopView" to a default value of true, then it passes.

Does anyone know how to correctly set this property from a Jest unit test?
Alain CabonAlain Cabon

Test a Property Change
  
it('Renders with Hello Matt', () => {
    const element = createElement('c-hello-component', { is: HelloComponent, });

    document.body.appendChild(element);
 
    element.person = "Matt";
 
    return Promise.resolve().then(() => {
        const pTag = element.shadowRoot.querySelector('p');
        expect(pTag.textContent).toEqual('Hello, Matt!');
    });
});
  
it('Renders with showDesktopView  = true', () => {

const element = createElement('c-test', { is: testLWC, });

document.body.appendChild(element);

element.showDesktopView = true;  

return Promise.resolve().then(() => {
// My promise code
});

});

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.unit_testing_using_jest_patterns
Greg CooganGreg Coogan
Alain,
That is the same documentation I've been using. That is basically my Trial 2 approach, but document.body.appendChild(element) is before the element assignment. I tried it in that order as well, but it didn't work. The error I get back is the querySelector doesn't find the element. However, when I default the value in my code to true for showDesktopView (which I cannot leave it like that), the query selector does find the "Name" element it is looking for.

This is a closer representation of my code following what you suggested, but doens't work: 
it('Displays Contact Name field', () => {
        const element = createElement('c-test', { is: testLWC });
        document.body.appendChild(element);
        element.showDesktopView = true;
        getRecordWireAdapter.emit(mockGetRecord);
 
        // Resolve a promise to wait for a rerender of the new content.
        return Promise.resolve().then(() => {
            const content = element.shadowRoot.querySelector('.myclass');
            const nameField = mockGetRecord.fields.Name.value;
            console.log('Expected: ' + nameField)
            console.log('Found: ' + content.textContent);
            expect(content.textContent).toBe(nameField);

        });

The error I get back is "TypeError: Cannot read property 'textContent' of null" which is recieved when the querySelector doesn't find the rendered element. Again, the test case does pass if I default the showDesktopView to true.
Alain CabonAlain Cabon
The problem could be your used selector (class).

const content = element.shadowRoot.querySelector('.myclass');

element.shadowRoot is not the common this.shadowRoot as you can find in the mozilla documentation but it is equivalent to this.template for LWC.

You can try in your code (not the jest test) if  const content = this.template.querySelector('.myclass');  is resolved. 
Greg CooganGreg Coogan
I do use this.template.querySelector in my code in certain places (not jest test) and it definitely functions correctly.

In my jest test, the element.shadowroot.querySelector does work if I default showDesktopView to true. The test case passes, it finds the name value.

I also found this in my jest test, if I use element.querySelector when default showDesktopView is true, the case fails.