docs(qwik-city): loaders mocking

Author: alexismch

packages/docs/src/routes/docs/(qwikcity)/api/index.mdx

@@ -355,7 +355,7 @@ test.each(cases)('should render card with %s %s', async ({text, link}) => {
 });
 ```
 
-> a `goto` prop can be passed to customize the `navigate` behavior during tests
+> A `goto` prop can be passed to customize the `navigate` behavior during tests
 
 ```tsx title="src/components/button.spec.tsx"
 import { $ } from '@builder.io/qwik';
@@ -383,6 +383,53 @@ test('should render the button and navigate', async () => {
 });
 ```
 
+> If you are using `routeLoader$`s in a Qwik Component that you want to test, you can provide a `loaders` prop to mock the data returned by the loaders
+
+```ts title="src/loaders/product.loader.ts"
+import { routeLoader$ } from '@builder.io/qwik-city';
+
+export const useProductData = routeLoader$(async () => {
+  const res = await fetch('https://.../product');
+  const product = (await res.json()) as Product;
+  return product;
+});
+```
+
+```tsx title="src/components/product.tsx"
+import { component$ } from '@builder.io/qwik';
+
+import { useProductData } from '../loaders/product.loader';
+
+export const Footer = component$(() => {
+  const signal = useProductData();
+  return <footer>Product name: {signal.value.product.name}</footer>;
+});
+```
+
+```tsx title="src/components/product.spec.tsx"
+import { createDOM } from '@builder.io/qwik/testing';
+import { test, expect } from 'vitest';
+
+import { Footer } from './product';
+import { useProductData } from '../loaders/product.loader';
+
+test('should render footer with product name', async () => {
+  const { screen, render } = await createDOM();
+  const loadersMock = [
+    {
+      loader: useProductData,
+      data: { product: { name: 'Test Product' } },
+    },
+  ];
+  await render(
+    <QwikCityMockProvider loaders={loadersMock}>
+      <Footer />
+    </QwikCityMockProvider>,
+  );
+  expect(screen.innerHTML).toMatchSnapshot();
+});
+```
+
 ## `<RouterOutlet>`
 
 The `RouterOutlet` component is responsible for rendering the matched route at a given moment, it internally uses the [`useContent()`](/docs/(qwikcity)/api/index.mdx#usecontent) to render the current page, as well as all of the nested layouts.

packages/qwik-city/src/runtime/src/qwik-city.runtime.api.md

@@ -330,6 +330,11 @@ export const QWIK_CITY_SCROLLER = "_qCityScroller";
 
 // @public (undocumented)
 export interface QwikCityMockProps {
+    // (undocumented)
+    loaders?: loaders?: {
+        loader: LoaderConstructor;
+        data: any;
+    }[];
     // (undocumented)
     goto?: RouteNavigate;
     // (undocumented)