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
npm create vite <project-title>
Select React -> TypeScript .
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.
npm install -D vitest
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.
Update vite.config.ts to include testing configurations
/// <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
Create setupTests.ts in the src directory
Paste this into setupTests.ts
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.
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
Let’s create a new file called App.test.tsx in the src folder.
Here’s a passing test for you to get started:
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.
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. 💾
