'How to verify the router push of a q-btn with :to was triggered in vitest/jest?

I am using a q-btn component from the Quasar frame work in a Vue3 application like this:

<q-btn :to="{name: 'someView'}"/>

It works great and I am trying to set up a unit test for it with vitest. I assumed that :to would just call router.push(), so I set up the test something like this:

test('click on button forwarded to myView', async () => {
    const push = vi.fn()
    ;(useRouter as SpyInstanceFn).mockImplementationOnce(() => ({
      push,
    }))
    const wrapper = createWrapper()
    const forwardButton = wrapper.findComponent(QBtn)

    await forwardButton.trigger('click')

    expect(push).toHaveBeenCalledOnce()
  })

For this to work I also defined:

vi.mock('vue-router', () => ({
  useRouter: vi.fn(() => ({
    push: vi.fn(),
  })),
}))

However, push is never called. Could someone please help me to verify the actual forward action by clicking the button?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source