Need help integrating vitest into my laravel/react project

[Agent57]

Hi folks,

I am working on a Laravel 10 project using inertia and react. I have the following setup so far but getting an error that states 'route is not defined'. I think I need to mock 'route' and maybe 'Head', but not sure how or where to do that. If anyone can provide any assistance, it would be very much appreciated.

// global.d.ts
import { AxiosInstance } from 'axios';
import ziggyRoute, { Config as ZiggyConfig } from 'ziggy-js';

declare global {
    interface Window {
        axios: AxiosInstance;
    }

    var route: typeof ziggyRoute;
    var Ziggy: ZiggyConfig;
}

// vite.config.js
/// <reference types="vitest" />
/// <reference types="vite/client" />

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
 plugins: [
   laravel({
     input: 'resources/js/app.tsx',
     refresh: true,
   }),
   react(),
 ],
 test: {
   globals: true,
   environment: 'jsdom',
   setupFiles: './tests/vitest.setup.ts',
   css: true,
 },
});

// vitest.setup.ts
import '@testing-library/jest-dom';

// Dashboard.text.tsx - Simple first test to check my setup is working (it's not!)
import {render, screen} from "@testing-library/react";
import Dashboard from "@/Pages/Dashboard";

it("should show you're logged in!", () => {
  render(<Dashboard/>);
  const message = screen.queryByText(/You're logged in!/i);
  expect(message).toBeDefined();
});```