Setup Vitest with React for unit testing (replace Jest)

Nowadays most React projects are created using Vite and it doesn't come with inbuilt unit test configuration like create-react-app. But the same developers of Vite have created Vitest which can be easily set up to write unit tests with React.

And, we can easily configure Vitest with most of the frontend libraries or frameworks out there like Vue, Svelte etc.

Let's talk about some advantages of using Vitest in our project -

• Out-of-the-box TypeScript / JSX support
• Multi-threading workers
• Filtering, timeouts, concurrent for suite and tests
• Jest-compatible Snapshot
• Chai built-in for assertions + Jest expect compatible APIs
• Designed with a Jest compatible API

To understand better why to use Vitest over other test runners, please go through these official docs -

• Why Vitest?
• Comparison with other test runners

Now let's try to set up a React project using Vite and Vitest.

1. Setup a React project using Vite

npm create vite@latest

You will be prompted to give the project name (we have given: react-vitest) then select a framework and variant as TypeScript then run the following command -

cd react-vitest
npm i
npm run dev

You will get such a screen. It means the basic project is set to write tests.

2. Now add dependencies for testing

npm install -D vitest jsdom @testing-library/react @testing-library/jest-dom

3. Now follow step by step

Then open vite.config.ts and replace it with the following code -

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

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

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

Now extend "scripts" in package.json with the following code -

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

Then create a new file in the src folder i.e., src/setupTest.ts and add the following content

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import "@testing-library/jest-dom";

Lastly, go to tsconfig.json and include the path of the setupTest.ts

"include": ["src", "./setupTest.ts"],

Now we are all set to create a file App.test.tsx so that we can write tests for App.tsx and write the following test

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

// To Test
import App from "./App";

// Tests
describe("Renders main page correctly", async () => {
    it("Should render the page correctly", async () => {
    // Setup
    render(<App />);
    const h1 = await screen.queryByText("Vite + React");

    // Expectations
    expect(h1).toBeInTheDocument();
    });
});

We can use npm test to run tests on our project.