1
How to call onclick events written on div through jest (salesforce)?
Ayaan
I have created an LWC in Salesforce and am trying to creat Jest tests for it. I have implemented a div in html file and calling the js function using the onclick event as shown below.
<div class="csa-utility-svg" onclick={handleShowMoreClick} data-id="showMoreButton">
<label class="card-text-cursor-pointer">{labels.showMore_button} </label>
</div>How do I test onclick={handleShowMoreClick} through jest?
With both approaches I've tried I get TypeError: Cannot read properties of null (button value is coming as null).
approach 1:
element.shadowRoot.querySelector('div[data-id="showMoreButton"]').dispatchEvent(new CustomEvent('click'));
approach 2:
const showMoreButton = element.shadowRoot.querySelector('div\[data-id="showMoreButton"\]');
expect(showMoreBtn.length).toBeGreaterThan(0); // real existence check
showMoreBtn\[0\].click();
await flushPromises();
});Add a comment
1 Answers
-
0
Umar Shaikh
In Jest for Salesforce LWC, use querySelector to find the div, then call .click() on it. This triggers the onclick handler, letting you test the event logic and expected behavior.Umar Shaikh – Would you like to know more information – Oct 20, 2025 - 11:51
Add a comment
New User? Register
Sign Up
Learner
Master
Boffin