I’m using click event listeners in my Vue component to send events to our Silktide analytics.

The example on their website is like this:

<button id="basket-button">Add to basket</button>

<script> var button = document.getElementById('basket-button'); button.addEventListener('click', function (e) { silktide("add-to-basket"); }); </script>

Silktide is loaded on to the site using an import in the header:

 <script>
    (function (s,i,l,k,y) {
        s[i] = s[i] || y;
        s[l] = s[l] || [];
        s[k] = function(e, p) { p = p || {}; p.event = e; s[l].push(p); };
        s[k]('page_load');
    })(window, 'stConfig', 'stEvents', 'silktide', {});
    </script>

If I use the example above it causes issues in my test because they say silktide isn’t defined. I understand that i’m not defining silktide in every component as I don’t need to but how can I stop my tests flagging this as an issue?

I tried mocking silktide with vi.mock:

vi.mock("silktide", async () => ({
  silktide: vi.fn().mockReturnValue({
    event: vi.fn(),
  }),
}));

but it keeps saying silktide is not defined