Forcing useFetch to send request on the client in testing environment (to intercept requests)

[ryrych]

Hello,
as developer I want to render data on the server. QA wants to intercept requests to return a fixture data. I'm using a standalone Playwright—after build is done, npx playwright test does its job.
If I have the following function in the Pinia:

// Store
async function fetchData(slug) {
  try {
    const { data } = await useFetch(`/internal/content/page?name=${slug}`);
    page.value = { ...data.value };
  } catch (e) {
    console.error(e);
  }
}

useFetch is pre-fetched on the server, which is good for the end user. Testers cannot intercept /internal/content/page as the client does not send requests.
If I change to $fetch, playwright test can intercept the request.

async function fetchData(slug) {
  try {
    const data = await $fetch(`/internal/content/page?name=${slug}`);
    page.value = { ...data };
  } catch (e) {
    console.error(e);
  }
}

I'm reading through API, documentations, and unit tests, but can't find an answer to the question how can I force sending request on the client for a given environment, or **how to globally disable pre-fetching for a given environment`.
A very dirty solution:

if (config.public.APP_ENV === 'test') {
  const data = await $fetch(`/internal/content/page?name=${slug}`);
  page.value = { ...data };
} else {
  const { data } = await useFetch(`/internal/content/page?name=${slug}`);
  page.value = { ...data.value };
}

To make it more portable, it could be probably moved into a custom fetch. useFetch returns data which is a ref, while $fetch returns just data. How to do it in a clean way, not breaking the API of $fetch and useFetch, I do not know. useFetch also returns for example pending and I would not like to over engineer the wrapper.

Looking forward to your replies!