2.4-setup-vite.md

Setting up a React Application using Vite

Docs

https://vite.dev/

Setup

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Testing

Setup

npm i -D vitest @testing-library/react @testing-library/user-event @testing-library/jest-dom jsdom @types/jsdom @vitest/coverage-v8 @vitest/ui

vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    css: true,
    include: ['src/**/*.{test,spec}.{ts,tsx}'],
  }
})

src/setupTests.ts

import '@testing-library/jest-dom/vitest'

package.json

{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "coverage": "vitest run --coverage"
  }
}

App.test.tsx

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

describe("App", () => {
  it("should render heading", () => {
    render(<App />);
    expect(screen.getAllByTestId("headline"), "Vite + React");
  });
});