Setting Up Vitest & Cypress in a React + Vite Project

In this guide, we'll set up both in a React + Vite + TypeScript project.

🚀 1. Create a React + Vite Project

If you don't already have a project:

pnpm create vite@latest my-app --template react-ts
cd my-app
pnpm install

🎨 2. Install & Configure Tailwind (Optional but Recommended)

If you want a clean UI quickly:

pnpm add -D tailwindcss postcss autoprefixer
pnpm exec tailwindcss init -p

Configure Tailwind

In tailwind.config.js:

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

In src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

⚡ 3. Set Up Vitest for Unit & Component Testing

Install Vitest & Testing Library:

pnpm add -D vitest @testing-library/react @testing-library/jest-dom jsdom

Update Vite Config

Update vite.config.ts:

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

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/test/setup.ts",
  },
});

Setup Test Environment

Create src/test/setup.ts:

import "@testing-library/jest-dom";

Add a Sample Test

Create src/App.test.tsx:

import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders app component", () => {
  render(<App />);
  expect(screen.getByText(/vite/i)).toBeInTheDocument();
});

Run Tests

pnpm exec vitest

🌐 4. Set Up Cypress for E2E Testing

Install Cypress:

pnpm add -D cypress

Run the installer (downloads the Electron binary):

pnpm exec cypress install

Configure Cypress

Add cypress.config.ts:

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:5173",
    supportFile: "src/test/cypress/support/e2e.ts",
    specPattern: "src/test/cypress/e2e/**/*.cy.{js,ts,jsx,tsx}",
  },
});

Create Folder Structure

src/test/cypress/
├── e2e/
│   └── home.cy.ts
└── support/
    ├── e2e.ts
    └── commands.ts

Add E2E Test

src/test/cypress/e2e/home.cy.ts:

describe("Home Page", () => {
  it("loads successfully", () => {
    cy.visit("/");
    cy.contains("Vite").should("exist");
  });
});

Run Cypress

GUI Mode (recommended for development):

pnpm exec cypress open

Headless Mode (for CI):

pnpm exec cypress run

📜 5. Scripts for Convenience

Add these to your package.json:

{
  "scripts": {
    "test:unit": "vitest",
    "test:unit:watch": "vitest --watch",
    "test:e2e": "cypress run",
    "test:e2e:gui": "cypress open"
  }
}

🚀 6. Where to Go Next?

>💭 Final Thoughts