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

Viewed 219

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?

0 Answers
Related