Set Up React Testing Library in Vite TS & JS Examples

Looking to get React Testing Library set up in your Vite project quickly? You found the post you’re looking for. Let’s dig in. This post is broken down into 2 sections. One to set up React Testing Library with Vite in a regular Javascript project and the other to set up React Testing Library in Vite with Typescript.

Estimated reading time: 4 minutes

With Regular Javascript

Beginning steps to set up React Testing Library in Vite Javascript

Install React with Vite:

For npm -v (version) 6.x:

npm create vite@latest my-rtl-vitest --template react

For npm 7+, extra double-dash is needed:

npm create vite@latest my-rtl-vitest -- --template react

Next change into your working directory:

cd my-rtl-vitest

Install Vitest, Happy Dom & React Testing Library

Why Vitest instead of Jest? Vitest is a blazing fast unit-test framework powered by Vite. It’s simpler to set up in Vite and unit testing your React components is identical to Jest.

Install vitest:

npm install vitest --save-dev

In your package.json file add a test script command like so:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest",
    "preview": "vite preview"
  }

I found happy-dom to work better in the Vite environment than jsdom. The goal of Happy DOM is to emulate enough of a web browser to be useful for testing, scraping web sites and server-side rendering.

Install happy-dom so you can test your react components:

npm install happy-dom

Add happy-dom to your vite.config.js file:

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
   environment: 'happy-dom'
  },
})

Install react testing library:

npm install @testing-library/react @testing-library/jest-dom --save-dev

Update your vite.config.js file:

import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'happy-dom',
    setupFiles: './tests/setup.js',
  },
})

Add a tests folder and within that folder a file named setup.js.

Inside setup.js add the following:

import { expect, afterEach } from 'vitest'
import { cleanup } from '@testing-library/react'
import * as matchers from '@testing-library/jest-dom/matchers'

// extends Vitest's expect method with methods from react-testing-library
expect.extend(matchers)

// runs a cleanup after each test case
afterEach(() => {
  cleanup()
})

Just to be sure everything is installed correctly, quickly run npm install:

npm install

Go back to typescript steps.

Like working with Vite? Check out this post on how to Create a React List in minutes with Vite, Material UI, and Redux.

Now, all you have to do is write some tests.

I’ll create a simple Text.jsx file in my components folder and then create a test for it with a Text.test.jsx file.

In my Text.jsx file I have:

// eslint-disable-next-line no-unused-vars
import React from 'react'

function Text() {

    return (
      <>
        <div>
        <h1>Vite</h1>
        </div>
      </>
    )
  }
  
  export default Text

Next up, in my Text.test.jsx file I have:

// eslint-disable-next-line no-unused-vars
import React from 'react'
import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import Text from './Text'

describe('App', () => {
  it('Vite to be in document', () => {
    render(<Text />)
    expect(screen.getByText('Vite')).toBeInTheDocument()
  })
})

Now in my terminal, all I have to do is run npm test.

That’s it! Your Text.test.jsx file should pass with all green colors!

Passing tests with React Testing Library in Vite with Javascript.

Learn the best way to test the onChange event of a text input with fireEvent here.

With Typescript

Beginning steps to set up React Testing Library in Vite with Typescript

Install react typescript in Vite:

For npm -v 6.x:

npm create vite@latest my-rtl-ts-vitest --template react-ts

For npm 7+, extra double-dash is needed:

npm create vite@latest my-rtl-ts-vitest -- --template react-ts

Next change into your working directory:

cd my-rtl-ts-vitest

Follow the steps to Install Vitest, Happy Dom and React Testing Library here.

The link above will walk you through the steps you need to take to install vitest, happy-dom, and React Testing Library to test your React Typescript components in a Vite project. After you complete setting up the setup.js file, head back here.

Final Steps to set up your Typescript Tests with React Testing Library

Next in your tsconfig.json file add the vitest and react testing library global types to your compilerOptions:

    "jsx": "react-jsx",
    "types": ["vitest/globals", "@testing-library/jest-dom"],

At the top of your vite.config.ts file add this:

/// <reference types="vitest" />

Change your setup.js file to setup.ts.

Update the setupFiles property in your vite.config.ts file to account for this change:

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'happy-dom',
    setupFiles: './tests/setup.ts',
   },
})

Last but not least, we can finally write up a test!

I copied over my components folder from the Javascript Project above but made a couple of changes.

In my components folder I have a Text.tsx file and a Text.test.tsx file.

In my Text.tsx file I have a simple functional component. (Note that I had to remove the react import):


function Text() {

    return (
      <>
        <div>
        <h1>Vite</h1>
        </div>
      </>
    )
  }
  
  export default Text

Next in my Text.test.tsx file I am simply checking for the text Vite to exist in the document. (Note that I had to remove the react import):

import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import Text from './Text'

describe('App', () => {
  it('Vite to be in document', () => {
    render(<Text />)
    expect(screen.getByText('Vite')).toBeInTheDocument()
  })
})

Now, run npm install really quick to be sure all of your dependencies are installed.