Lightning button not rendered in jest test

Question

I'm trying to write a jest test for lwc component, and facing an issue with rendering . For example, if we add the condition like this

<template if:true={booleanFlagValue}>
    <lightning-button 
        label="Test">
    <lightning-button>
</template>

or

<template>
    <lightning-button 
        label="Test" 
        if:true={booleanFlagValue}>
    </lightning-button>
</template>

lightning-button will not rendered. The condition return true, and if I try to replace lightning-button with text, the text will displayed. I'm also tried something like this

<template if:true={booleanFlagValue}>
    {testTextValue}
    <lightning-button
        label="Test">
    </lightning-button>
<template>

and the testTextValue displayed but lightning-button was not rendered. Maybe someone faced this issue too and you have an idea how to resolve it?

Answer 1

Even though you didn't add your test code yet, here are some hints that might help you:

1. Did you really make sure, that booleanFlagValue evaluates to true during your LWC lifecycle / test execution in order to make the lightning-button accessible?

2. Depending on how and when you update booleanFlagValue, it may be that your LWC DOM has not been updated yet and therefore you cannot access the button in the test yet. Often this happens asynchronously, so you need to make sure that you wait for this DOM update to your component during test execution. Depending on your code, here are two examples of how this could be enforced / look like in your test code:

Example 1:

await new Promise((r) => setTimeout(r, 0));
const button = element.shadowRoot.querySelectorAll('lightning-button');

Example 2:

return Promise.resolve().then(() => {
   const button = element.shadowRoot.querySelectorAll('lightning-button');
});

I hope this helps you to fix your test issues.