How to intercept/mock a function called by an eventListener

Question

I am learning about unit testing and I have been implementing it into my current project with success somewhat, using vitest.

But I don't really know how to tackle this situation, let's say that I have a listener on a button that on clicking, would fire a function:

    $('.dropdown-item.dataItem').on('click', function() {showData(retrievedData, $(this).text().trim())});

This is part of a bigger function, but I already tested the other parts of it successfully. For this part, I wanted to be sure that "should fire showData when user clicks on it".

So I wrote this on my test file:

// The only way I managed to intercept top functions imported was this
const optionsFunctions = await import('../../options.js');

test('should call showData when a new dataItem is selected', ()=> {
        // Arrange
        const spyShowData = vi.spyOn(optionsFunctions, 'showData');

        // Act 
        console.log($('.dropdown-item.dataItem')[0].click());
        console.log(spyshowData.mock.calls);

    });

With this, I get 0 calls from the mocked function (but it is executed on the actual file, so I get duplicated). I'm not sure the correct approach in this cases, should I not bother with testing this stuff? And in case I should, how am I supposed to be sure it's being correctly implemented? maybe I have to intercept the clicking function itself? but that would be changing too much the test itself.

if I execute addLanguages() directly, the spy gets the call count, but if it happens with the event listener, it doesn't, why is that?

Thanks