How do I check if a method was called?

[trajano]

Right now in vitest I do something like this

describe('anchor directive', () => {
  beforeEach(() => {
    Element.prototype.scrollIntoView = vi.fn()
  })
  it('scrolls', () => {
    const wrapper = mount(TestComponent)
    const button = wrapper.find<HTMLButtonElement>('#button').element
    button.click()
    expect(Element.prototype.scrollIntoView).toBeCalled()
  })
  it('scrolls to nowhere works', () => {
    const wrapper = mount(TestComponent)
    const button = wrapper.find<HTMLButtonElement>('#nowhere').element
    button.click()
    expect(Element.prototype.scrollIntoView).not.toBeCalled()
  })
})

But I was wondering if there was a way of doing it without modifying the prototype

[capricorn86]

@trajano I believe the right syntax for Vitest is:

const spy = vi.spyOn(Element.prototype, 'scrollIntoView');
const wrapper = mount(TestComponent);
button.click()
expect(spy).toHaveBeenCalled();

In order for it to work the element with scrollIntoView needs to be created after the spy was appended.

Another way which works after it was appended is to query selector the element:

const wrapper = mount(TestComponent);
const element = document.querySelector('.myElement');
const spy = vi.spyOn(element, 'scrollIntoView');
button.click()
expect(spy).toHaveBeenCalled();