Setting up a React project using Vite + TypeScript + Vitest
Tags: vite, react, typescript, tutorial
Published: 2024-04-19 18:39:55

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.

{% youtube FGA7djd7hDs %}

## 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.

![React Vite Set up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezfw57t2j3m4dkaffldo.png)
![React Vite Set up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xynxps7wek6dod7skqh2.png)


## 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.

3. Add `"test": "vitest"` to _package.json_

![Test script in package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ex4ro87jk7bz54y6z0y6.png)
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!

![App tests with errors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmrq2ddyyqznkueeizfk.png)
The tests will pass, we just need to tell TypeScript to include type definitions for Vitest global variables and Jest DOM matchers.

3. Add `"types": ["vitest/globals", "@testing-library/jest-dom"],` to _tsconfig.json_ in the `compilerOptions`.

![Add Vitest types to TypeScript Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo4e5arax5nrajy1tdae.png)

Voilà! If you enjoy this content, please consider supporting my efforts. Your generosity fuels more of what you love! 🩷
<a href="https://www.buymeacoffee.com/janoskocs" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

----------
I'm János, I write about Software, coding, and technology.
Checkout my [portfolio](https://janoskocs.com). 💾