Mocking and Testing Events
By the end of this lesson, you'll be able to:
- Simulate a user interaction like a click in a Jest test
- Assert that a component dispatched a CustomEvent with the expected detail
- Attach a mock listener before triggering the interaction being tested
Prerequisites: "Testing Strategy and Jest Fundamentals"
Simulating User Interaction
const button = element.shadowRoot.querySelector('lightning-button');
button.click();Calling .click() on a queried element simulates the user interaction that would trigger a click handler in the real component — the same interaction a real user clicking the rendered button would cause.
Testing Dispatched Events
it('dispatches a select event with the chosen id', () => {
const element = createElement('c-account-list', { is: AccountList });
document.body.appendChild(element);
const handler = jest.fn();
element.addEventListener('select', handler);
const row = element.shadowRoot.querySelector('[data-id="001xx0000"]');
row.click();
expect(handler).toHaveBeenCalledTimes(1);
expect(handler.mock.calls[0][0].detail).toBe('001xx0000');
});jest.fn() creates a mock function to use as a listener; attaching it with addEventListener before triggering the interaction is essential — a listener attached afterward would simply miss the event entirely. handler.mock.calls[0][0].detail reads the detail payload (Module 5) of the first call's first argument — the actual CustomEvent object.
Why This Matters in Real Projects
This directly verifies Module 5's child-to-parent communication pattern actually works as intended — not just that a click handler runs without error, but that it dispatches the correct event with the correct data, exactly what a real parent component would depend on.
Exercise
Write a test asserting that clicking a "Remove" button dispatches a "remove" CustomEvent with detail equal to the string "item-1".
Show hint
Attach the mock listener before triggering the click.
Exercise
Challenge: explain, as a comment, why the mock listener must be attached before button.click() is called, not after.
Show hint
Think about the order events actually fire in.
Mocking and Testing Events Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
Testing events means simulating the interaction that triggers one and asserting on what a mock listener actually received — directly verifying the child-to-parent communication pattern from Module 5.