DEV Community

János K.
János K.

Posted on • Updated on

Setting up a React project using Vite + TypeScript + Vitest

This is a quick step-by-step tutorial designed to guide you through setting up the project. While I strive to provide detailed explanations, feel free to skip ahead and simply follow each step; you should still achieve the desired results.

Set up React Project with Vite

  1. npm create vite <project-title>
  2. Select React -> TypeScript .
  3. Run npm install and npm run dev to start a local development server.

React Vite Set up
React Vite Set up

Setting up Vitest

Vitest test runner is optimised for Vite-powered projects.

  1. npm install -D vitest
  2. npm install -D @testing-library/react @testing-library/jest-dom jsdom
    First package, @testing-library/react, is for component testing, second, @testing-library/jest-dom, is for DOM assertions, and lastly, jsdom, is for simulating a browser environment in Node for testing purposes.

  3. Update vite.config.ts to include testing configurations

/// <reference types="vitest" />
/// <reference types="vite/client" />

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

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setupTests.ts'],
Enter fullscreen mode Exit fullscreen mode

Changes we made:

  • Added type definitions at the beginning of the file
  • globals: true means global variables will be available during tests like 'describe, it, expect' so we don't have to import it in every test file
  • Specified 'jsdom' as the test environment, simulating a browser environment
  • Defined 'setupFiles' to execute necessary code before running the tests. This is a perfect segue to create setupTests.ts.

Create setupTests.ts

  1. Create setupTests.ts in the src directory
  2. Paste this into setupTests.ts
import * as matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';

Enter fullscreen mode Exit fullscreen mode

Here, we bring Jest's DOM matchers into Vite, making testing feel more familiar and easier for users familiar with Jest.

  1. Add "test": "vitest" to package.json

Test script in package.json
This will allow you to run your tests using npm test.
Onto, to our first test!

Writing our first test

  1. Let's create a new file called App.test.tsx in the src folder.
  2. Here's a passing test for you to get started:
import { screen, render } from "@testing-library/react";
import App from "./App";

describe("App tests", () => {
  it("should render the title", () => {
    render(<App />);

      screen.getByRole("heading", {
        level: 1,
    ).toHaveTextContent("Vite + React");
Enter fullscreen mode Exit fullscreen mode

But oh wait! It's all red!

App tests with errors
The tests will pass, we just need to tell TypeScript to include type definitions for Vitest global variables and Jest DOM matchers.

  1. Add "types": ["vitest/globals", "@testing-library/jest-dom"], to tsconfig.json in the compilerOptions.

Add Vitest types to TypeScript Config

Voilà! If you enjoy this content, please consider supporting my efforts. Your generosity fuels more of what you love! 🩷
Buy Me A Coffee

I'm János, I write about Software, coding, and technology.
Checkout my portfolio. 💾

Top comments (0)