Does Laravel Work With Vitest?
You can use Vitest with Laravel, but they operate in different layers—Vitest excels at testing your JavaScript/TypeScript frontend code, not your PHP backend.
Quick Facts
How Laravel Works With Vitest
Laravel and Vitest don't directly integrate because they target different parts of your stack: Laravel is a PHP backend framework, while Vitest is a JavaScript test runner designed for frontend code. However, in modern Laravel projects that use Node.js tooling (Vite, npm), Vitest fits naturally into your workflow for testing JavaScript/TypeScript assets, Vue components, and frontend utilities.
The typical setup involves configuring Vitest alongside Laravel's Vite integration. You'd use Vitest for your JS/TS code (including Vue 3 components if using Inertia or Livewire with Vue), and either PHPUnit or Pest for your PHP backend tests. Your Laravel project's vite.config.ts can easily include Vitest configuration, allowing both to coexist. The developer experience is smooth when you treat them as testing separate concerns: Vitest for frontend, PHPUnit/Pest for backend.
For testing API interactions or full-stack features, you'd typically use Laravel's HTTP testing utilities (not Vitest) to hit your backend endpoints from tests. Vitest shines when testing computed properties, composables, component logic, and utility functions on the frontend side of a Laravel+Inertia or Laravel+Vue stack.
Best Use Cases
Quick Setup
npm install -D vitest @vue/test-utils happy-dom// vite.config.ts
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel(['resources/js/app.ts']),
vue(),
],
test: {
environment: 'happy-dom',
globals: true,
},
});
// resources/js/__tests__/utils.test.ts
import { describe, it, expect } from 'vitest';
import { formatPrice } from '../utils/formatPrice';
describe('formatPrice', () => {
it('formats currency correctly', () => {
expect(formatPrice(1000)).toBe('$1,000.00');
});
});
// package.json
"scripts": {
"dev": "vite",
"test": "vitest",
"test:ui": "vitest --ui"
}Known Issues & Gotchas
Vitest doesn't test PHP code—developers sometimes expect it to validate their Laravel routes or models
Fix: Use PHPUnit or Pest for backend tests. Reserve Vitest strictly for JavaScript/TypeScript code. Clearly separate test suites in your CI/CD pipeline.
Vite config conflicts if you try to run Vitest and Laravel's dev server simultaneously without proper setup
Fix: Ensure your vite.config.ts defines Vitest config separately and use concurrent npm scripts (e.g., 'npm run dev' runs both 'vite' and 'vitest --watch' in parallel).
Environment variables from .env aren't automatically available in Vitest tests the way they are in Laravel
Fix: Use dotenv package to manually load .env in your Vitest setup file, or configure Vitest's environment option to handle this.
Module resolution mismatches between Vite and Vitest when using Laravel's path aliases
Fix: Define the same alias resolution in both vite.config.ts and vitest.config.ts to ensure consistency.
Alternatives
- •Jest + Laravel (Jest was the traditional choice, but Vitest is faster with better Vite integration)
- •PHPUnit + Pest for fullstack testing (test both backend and frontend interactions)
- •Cypress/Playwright + PHPUnit (end-to-end testing the entire Laravel app rather than unit testing JS)
Resources
Related Compatibility Guides
Explore more compatibility guides