← Back to blog

Article

How to Test Vite + React application (Vitest)

Vitest

Jest can be used in vite project, but it is not fully supported. Vitest is a test runner for vite project.

Install

yarn add -D vitest @testing-library/react jest-dom

Configuration

// vite.config.js
 import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true
        }),
        react(),
        eslint({
            include: ['/resources/js/**/*.jsx', '/public/assets/*'],
            exclude: ['node_modules/**']
        })
    ],
+   test: {
+       globals: true,
+       files: ['resources/js/**/*.test.js'],
+       environment: 'jsdom'
+   },
    resolve: {
        alias: {
            '@hoil': '/resources/js',
            '@assets': '/public/assets'
        },
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    },
    ssr: {
        noExternal: ['@inertiajs/react', '@inertiajs/react/server']
    }
});

Usage

yarn vitest

Reference

Discussion

Profile picture

Full-Stack Engineer

Yerin Hong

Building products end-to-end across frontend, mobile, backend, and product UX.

Full-stack engineer and generalist. I design, build, and debug products with a bias for clean UX and practical engineering.

© 2026 Yerin Hong

Built with Gatsby