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.

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';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./src/setupTests.ts'],
  },
});

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';

expect.extend(matchers);

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

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 />);

    expect(
      screen.getByRole("heading", {
        level: 1,
      })
    ).toHaveTextContent("Vite + React");
  });
});

But oh wait! It's all red!

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.

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

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