Vite is a robust tool for rapidly creating React projects. However, unlike Create React App (CRA), Vite does not come with built-in support for React Testing Library (RTL). Let us walk through the process of setting up RTL in a Vite React project using Vitest, a testing solution designed specifically for Vite. By following these steps, you’ll be able to easily write and execute tests for your Vite React applications.
Step 1: Creating a Vite React Project
Let’s begin by creating a new Vite React project. Open your terminal and run the following command:
npm create vite@latest my-vite-app --template reactStep 2: Installing Dependencies
Next, we need to install the necessary dependencies for RTL and Vitest. In your project directory, run the following command:
npm install --save-dev @testing-library/jest-dom @testing-library/react @testing-library/react-hooks @testing-library/user-event jsdom vitestStep 3: Setting up Vitest
3.1 Create a new file called setupTests.js at the root of your project and add the following import statement:
import "@testing-library/jest-dom"3.2 Create another file called test-utils.js at the root of your project and include the following code:
/* eslint-disable import/export */
import { render } from "@testing-library/react";
const customRender = (ui, options = {}) =>
render(ui, {
wrapper: ({ children }) => children,
...options,
});
export * from "@testing-library/react";
export { default as userEvent } from "@testing-library/user-event";
export { customRender as render };
3.3 Open vite.config.js and add the following code:
export default defineConfig({
// ...
test: {
globals: true,
environment: 'jsdom',
setupFiles: './setupTests.js',
},
})
Step 4: Modifying package.json
Update the scripts section in your package.json file with the following scripts:
"scripts": {
// ...
"test": "vitest",
"coverage": "vitest run --coverage"
}
Step 5: Writing Tests
Now you can start writing tests using RTL in your Vite React project. Here’s an example of a test file named App.test.jsx:
import { describe, expect, it } from "vitest";
import App from "./App";
import { render, screen, userEvent } from "../test-utils";
describe("Sample tests", () => {
it("should render the title correctly", () => {
render(<App />);
const title = screen.getByText(/Welcome to My App/i);
expect(title).toBeInTheDocument();
});
it("should increment count on button click", async () => {
render(<App />);
const button = screen.getByRole("button");
userEvent.click(button);
const count = await screen.findByText(/Count: 1/i);
expect(count).toBeInTheDocument();
});
});
Step 6: Running Tests
To run your tests, execute the following command in your terminal:
npm run testThis is how to set up React Testing Library (RTL) in Vite React projects using Vitest. By following these steps, you can seamlessly integrate testing into your Vite React applications. RTL’s user-friendly API combined with the power of Vit.
