Does Django Work With Vitest?
Django and Vitest can work together, but they operate in separate domains—Django for backend Python, Vitest for frontend JavaScript—requiring a deliberate architectural separation.
Quick Facts
How Django Works With Vitest
Django and Vitest don't directly integrate because they serve different purposes: Django is a backend framework running on Python, while Vitest is a frontend JavaScript test runner. However, they coexist well in modern full-stack applications where Django provides REST APIs and Vitest tests a separate frontend application (Vue, React, Svelte, etc.). The typical architecture involves Django as a headless backend serving JSON to a frontend built with a modern JavaScript framework, where Vitest handles unit and integration tests for frontend logic, components, and API client code. Django's own Python tests remain separate, using pytest or unittest. This separation is actually advantageous—it keeps concerns cleanly divided and allows frontend developers to work independently using familiar JavaScript tooling. The main integration point is configuring Django to serve the compiled frontend assets or running them separately during development. You'll manage two distinct test suites: Django tests for backend logic (using pytest-django) and Vitest for frontend code.
Best Use Cases
Django + Vitest Setup in Monorepo
npm install --save-dev vitest @vitest/ui happy-dom && pip install djangorestframework// vitest.config.ts
import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
test: {
environment: 'happy-dom',
globals: true,
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
// src/api.test.ts
import { describe, it, expect, vi } from 'vitest';
import { fetchUserData } from './api';
describe('API client', () => {
it('calls Django REST endpoint', async () => {
global.fetch = vi.fn(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve({ id: 1, name: 'Test' }),
})
);
const data = await fetchUserData(1);
expect(data.name).toBe('Test');
expect(fetch).toHaveBeenCalledWith('http://localhost:8000/api/users/1/');
});
});Known Issues & Gotchas
Environment variable mismatch between Django (.env) and frontend (VITE_*)
Fix: Use a shared .env file or create a Django endpoint that serves frontend config. Remember Vitest reads VITE_ prefixed variables only.
Django CSRF tokens not automatically included in Vitest mocked API calls
Fix: Mock API client interceptors to add CSRF headers, or test against a real development server rather than mocked endpoints
Path resolution differences between Django's static file system and Vite's module resolution
Fix: Use alias configuration in vite.config.ts and ensure Django's STATIC_ROOT/STATIC_URL are properly configured for production builds
No official Django plugin for Vitest; integration requires manual setup
Fix: Create a shared vitest.config.ts with alias paths pointing to your Django backend URLs if needed
Alternatives
- •Django + Jest: More mature, larger ecosystem, but slower than Vitest
- •Django + Playwright: For end-to-end testing of full Django templates and frontend interaction
- •FastAPI + Vitest: Lighter Python backend alternative if you don't need Django's ORM and admin
Resources
Related Compatibility Guides
Explore more compatibility guides