🚀 Configure Vitest with React Testing Library 🚀

It is 2023 and we have so many options to create a react app that it can be hard to choose between tools, but most people are choosing Vite because of its simplicity and speed. If you are one of those people and are looking for an easy way to setup your tests, you came to the right place!

Let's go right to the point with setting up a new application:

Create a new React app with Vite:

yarn create vite

Install the dependencies

yarn

Install the necessary dependencies

yarn add -D vitest jsdom @testing-library/react @testing-library/jest-dom

Add a test script

In your package.json file, add the following line under the scripts attribute:

"scripts": {
+  "test": "vitest"
}

Create a setup tests file

Create a new file under tests/setup.ts with the following content:

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

expect.extend(matchers);

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

Configure vite to use this setup

Edit the file vite.config.js in the root folder

  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    testMatch: ['./tests/**/*.test.tsx'],
+    globals: true
+  }

That is all the configuration needed.
Now, let's go ahead and create a quick test to try this out

Your first test

Create a test file at tests/App.test.tsx

touch tests/App.test.tsx

Add the following content

import { render, screen } from '@testing-library/react';
import App from "../src/App";


describe('App', () => {
  it('renders headline', () => {
    render(<App />);
    const headline = screen.getByText(/It works and you found me!/i);
    expect(headline).toBeInTheDocument();
  });
});

Run the tests (and expect to fail)

yarn test

Fix the test

Replace the html content of the App.tsx file with the following:

+  return (
+    <div>
+      <h1>It works and you found me!</h1>
+    </div>
+  )

Run the tests

Try running again the tests, it should be working fine now!