Testing a React-Vite App

Introduction

Before proceeding, make sure you have already understood the basics of testing in React. See the article on Testing a normal React App for the basics. This article covers only the setup for testing a React-Vite app.

Bootstrap a React-vite app by running the following command:

npx create-vite@latest GIVEN-PROJECT-NAME

Be sure to replace GIVEN-PROJECT-NAME with the name of your project. Choose react as the template when prompted. Choose JavaScript as the language when prompted.

---

Setting up a React-Vite app for testing

• To set up a React-Vite app for testing, you need to install the following packages:

  • @testing-library/react - This package provides utilities for testing React components.
  • vitest - This package provides utilities for testing Vite apps.
  • jsdom - This package provides a JavaScript implementation of the DOM.

• Run the following command to install the packages:

npm install --save-dev @testing-library/react vitest jsdom

• add the following to the vite.config.js file:

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

export default defineConfig({
  plugins: [react()],
  test: {
    testEnvironment: "jsdom",
    testMatch: ["**/__tests__/**/*.test.js"],
  },
});