How to stub out lifecycle hooks in <script setup>?

[MetRonnie]

When using the options API, you could stub out a lifecycle hook by passing an empty function to the mount function, e.g.

mount(Component, {
  mounted () {},
})

How do you do this when using the composition API and <script setup>?

[cexbrayat]

Hi @MetRonnie
What are you trying to achieve? Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?
It only takes a few minutes, and we'll be able to take a look

[MetRonnie]

https://stackblitz.com/edit/github-y2zmfe4b?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts&view=editor

In my case I have a function that is called in the onBeforeMount lifecycle hook, but I would like to stop this from running when mounting the component in the test so I can call the function directly to test its effects.

(The real function in question is async so I need to await it when running the test, hence I can't rely on just mounting the component to see the effects)

[cexbrayat]

If it is an async function, does it call a composable or does an http request? If so you can mock that function or http request using jest/vitest (see #775 (comment) for example)

[MetRonnie]

We're already mocking the (GraphQL) request. But the function that makes the request also sets state on the component.

Basically what I'm looking to do is test the component's function in isolation, without the component's state being already altered by the lifecycle hook by the time the component is mounted (we may add other things to this hook in future).

This was perfectly possible with the options API. I understand this is probably more challenging using script setup as the lifecycle hooks are not neatly defined as object properties, but is it possible at all?

I've had a go at using sinon.stub and vi.mock. I couldn't get sinon to stub it but had some luck with vi.mock

vi.mock('vue', async (importOriginal) => ({
  ...await importOriginal(),
  onBeforeMount () {},
}))

The only problem is the hoisting means this seems to apply for all specs in the test file.