DEV Community

Cover image for How to set up Vite React TS project with Vitest
Annie Taylor Chen
Annie Taylor Chen

Posted on

How to set up Vite React TS project with Vitest

#vite #react #testing #vitest

This tutorials will work for self-generated vite react-ts projects. Please also refer to the following two repos if you have different requirements:

I personally ran into quite some TS errors and after some hours of digging I found the following settings worked for me. Hence I'd like to write it down and hope it will benefit anyone who has encountered the same issue.

1. Install packages. You will need those following: 

@testing-library/dom
@testing-library/jest-dom
@testing-library/react
@testing-library/user-event
@types/testing-library__jest-dom
@vitest/ui
vitest
Enter fullscreen mode Exit fullscreen mode

2. Add scripts: 

"test": "vitest",
"test:ui": "vitest --ui",
"coverage": "vitest run --coverage",
Enter fullscreen mode Exit fullscreen mode

3. In your vite.config.ts add, note the triple slash reference types are important to include here: 

/// <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()],

  ...bla bla bla

  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    // you might want to disable it, if you don't have tests that rely on CSS
    // since parsing CSS is slow
    css: true,
  },
});
Enter fullscreen mode Exit fullscreen mode

4. In your tsconfig.json include: 

 "include": ["src", "@testing-library/jest-dom"],
Enter fullscreen mode Exit fullscreen mode

5. In your root directory, have a file named setupTests.ts and include those: 

/// <reference types="vitest/globals" />
import '@testing-library/jest-dom';
import "@testing-library/jest-dom/extend-expect";
Enter fullscreen mode Exit fullscreen mode

6. Make a utils folder and include a test-utils.tsx file and put those in the code: 

/* eslint-disable import/export */
import { cleanup, render } from '@testing-library/react'
import { afterEach } from 'vitest'

afterEach(() => {
  cleanup()
})

const customRender = (ui: React.ReactElement, options = {}) =>
  render(ui, {
    // wrap provider(s) here if needed
    wrapper: ({ children }) => children,
    ...options,
  })

export * from '@testing-library/react'
export { default as userEvent } from '@testing-library/user-event'
// override render export
export { customRender as render }
Enter fullscreen mode Exit fullscreen mode

7. Finally, try writing a test, such as App.test.tsx 

import {describe, expect, it} from 'vitest';
import App from './App';
import { render, screen, userEvent } from './utils/test-utils'


describe('Simple working test', () => {
  it('the title is visible', () => {
    render(<App />);
    expect(screen.getByText(/Ellida Admin/i)).toBeInTheDocument();
  });
``
  it('should increment count on click', async () => {
    render(<App />)
    userEvent.click(screen.getByRole('button'))
    expect(await screen.findByText(/count is: 1/i)).toBeInTheDocument()
  })

  it('uses flexbox in app header', async () => {
    render(<App />)
    const element = screen.getByRole('banner')
    expect(element.className).toEqual('App-header')
    expect(getComputedStyle(element).display).toEqual('flex')
  })
});
Enter fullscreen mode Exit fullscreen mode

Then type in command line either pnpm test if you just want it to run in the terminal or pnpm test:ui if you want to see the nice UI part. npm or yarn would work similar.

Top comments (1)

Collapse
 
voyager5874 profile image
Aleksandr Savkin • • Edited

I had an error in vite config either about plugins (in case of using defineConfig from vitest) or about test (with /// <reference types and defineConfig from vite). Upgraded to vite v.4
stackoverflow.com/questions/721463...
When tried to run the test I got an error about 'jsdom' dependency

Read next

joodi profile image

Goodbye Postman, Hello Insomnia: A Faster Way to Test APIs ⚡

Joodi -

goaqidev profile image

Construyendo un Portfolio Moderno con Astro y Tailwind CSS

Joaquín Gutiérrez -

erikvandewiel profile image

Static text reinvented: a developer’s solution to updates without a CMS

Erik van de Wiel -

stacks_gather_f66c31eb9d6 profile image

Step-by-Step Guide: Create a React Native CLI IOS & Android App Using Version 0.76

stacks gather -